Develop Reference

How to implement a code button in a javascript wysiwyg editor

I try to build my own WYSIWYG editor in javascript.
Most of the buttons are quite simple (as long as document.execCommand has a commandId).
But how to implement a code option like in StackOverflow editor.
What I tried:
document.execCommand('formatBlock', '<pre><code>')
Unfortunately, it is not working. What I'm doing wrong?

The <code> tag is not part of the list of supported tags for formatBlock. You can however insert a <pre> tag by using:
document.execCommand('formatBlock', false, '<pre>');
You can check the w3c documentation for a list of supported tags (it depends on the browser).
If you do not care about IE, you can use the insertHTML option, combined together with document.getSelection(), like so:
document.execCommand('insertHTML', false, `<pre><code>${document.getSelection()}</code></pre>`)
Or you could implement the functionality yourself. As pointed out by others, document.execCommand is now obsolete, so it might be your safest option, depending on which browsers you need to support.

How to check if browser supports pseudo-elements in javascript?

I'm developing a website that should run in ancient browsers (IE 7/8/9, Safari 5.1.7). Our target customer is the old people.
I'm no expert in javascript and I searched for solution. My title question is very straight-forward.
I used input radio and others that has custom design using before and after.
If it's checked. I just toggle in after and before display property in css.
The problem is when the user is using ancient browser, the input radio will never appear. My idea is toggle display in input radio if the browser doesn't support pseudo-elements.

For CSS feature detection there really is no need to reinvent the wheel, tools like Modernizr do this perfectly and have a very small footprint, since you can select only the feature detects that you need.
Seeing as you want to support IE <8, I would strongly advise you to use it, since you're probably going to run into a lot of situations where CSS/JS features are unavailable.

Detect if they have a sufficient browser: http://caniuse.com/#feat=css-gencontent
Basically, IE8 (maybe 9 depending on what you need) and older don't work, everything else does.

You may find the library Modernizr useful in this instance. It allows you to test for browser features.
Optionally if you want to shim it so you know that the browser will support it you can use Selectivizr

execCommand Customization

With execCommand different browsers create different code. firefox might take span and set the font-weight , IE decides to write tag strong or p.
Here is a link for execCommand demos.
http://help.dottoro.com/ljcvtcaw.php
Is there anyway to customize the code that execCommand generates?
Is there any command like execCommand which can generate same code in all browsers?

I would just build multiple arrays for multiple functions and when a user is complete with their file, just run a .replace();

Online WYSIWYG editor using a div [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to create a WYSIWYG editor using a div, just like Google Docs works (as far as I know). I am aware there are other, easier solution for editors, but all have one thing in common: they output terrible HTML thanks to the Javascript execCommand() function. I really need it to output clean HTML (and the same HTML across browsers), so therefore I'm thinking about writing my own editor with a regular div and some Javascript (to record click and keypresses etc.) Before I do that though, I have a couple of questions:
Does the editor I'm looking for (one that outputs the same, clean HTML across browsers) already exist?
Am I mistaken that it is possible to write this?
Thanks a lot!
Edit: I think I should have been clearer on this: I don't consider existing WYSIWYG editors (like TinyMCE or CKEditor) an option, because (and please correct me if I'm wrong) they use the Javascript execCommand() function. This (especially in combination with an iFrame in design mode, which they both use), outputs different, illogical HTML in different browsers. For example: a simple enter in Safari causes it to create a div, instead of adding a <br /> tag or create a new paragraph (<p>). Furthermore: making text bold causes Mozilla to add <span style="font-weight: bold">, Internet Explorer and Opera to add <strong> and Safari to add a <b> tag. Not to mention the tricks some browsers pull by adding their name to tags (Safari I'm looking at you, I don't like <span class="Apple-style-span">). Because there's no way to change all these strange behaviors, it's very hard for me to make the site look consistent.
That's the reason I'm thinking about writing my own alternative: cross-browser compatibility and consistency...

Creating an editor from scratch is a massive undertaking because of the sheer number of browser quirks and bugs with in-browser editing. I've done it several times for various niche projects. My advice would be to start with either TinyMCE or CKEditor as a base and extend them. Both have had unbelievable amounts of development time poured into them over several iterations to get them as good as they are now. Try taking a look at their bug trackers to get an idea of what they have to contend with. Both have decent options for extension, so you could write your own formatting commands to replace document.execCommand() and in both you can add buttons/tools to the toolbar and context menus.
Self-promotion alert: Another option for the future is to use the commands module I'm working on for my Rangy library. It's some way off completion but will initially have replacements for inline formatting commands offered by document.execCommand(), and will allow control of the tags/CSS it produces. Rough early demo here: http://rangy.googlecode.com/svn/branches/1point2/demos/commands.html

Don't do this. There are teams of developers behind high profile WYSIWYG editors, and they already have the workflow built into their development to handle cross browser testing.
Look at
TinyMCE
CKeditor
Dojo Toolkit's Dijit.Editor

http://280slides.com/ built for the canvas tag
Everything is possible if you are stubborn enough.

The two we looked at were:
http://tinymce.moxiecode.com/
and
http://ckeditor.com/
Both did exactly what we wanted but in the end we went with the commercial CKeditor.

Did you already try TinyMCE ?
You have full control over the output via different parameters or existing plugins, also possible to write your own plugin..

Is there a way to give CSS syntax highlighting to any <textarea> using any bookmarklets?

Is there a way to give CSS syntax highlighting to any <textarea> using any bookmarklets or favlets? I work on a CMS where I write and manage CSS in a plain <textarea> like Notepad. Is there a boomarklet to enable CSS syntax highlight in specific <textarea> temporarily?
Should work in IE.

If you know how to write a bookmarklet, you may be able to adapt Code Mirror.

I don't know about mookmarklets or Favlets, but you could write a userscript to do that.
Not sure if IE supports anything like that, but Firefox, Chrome and Opera all support userscripts. (Use Greasemonkey for Firefox)
For example, I wrote this script for myself, to highlight code on the Bytes forums, which I can use in all three browsers. (Feel free to use that if you want.)
Edit. It seems the IE7pro addon for IE supports Greasemonkey-like userscripts.