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.
Related
I'm working on a WYSIWYG redactor using contenteditable and execCommand. Bold, italic an other things are working just fine, but I'm confused about how to add custom tags (e.g. "<span style="white-space: nowrap;">", etc.). It seems like there's no standart tools for that (which is really strange). I thought about manually manipulating DOM with code, but it seems rather hard beacuse of complex formatting, I have no idea how to make this properly (so that html will remain valid). So are there any solutions to this problem?
After several attempts, I stopped at this decision. It's not using insertHTML (which is not supported by IE), keeps formatting and work as expected (well, in most cases). Still searching for a better solution, but maybe it would be helpful for someone.
var range = document.getSelection().getRangeAt(0);
var clone = $(range.cloneContents());
$.each(clone.find('.nowrap'), function(id, elem) {
$(elem).contents().unwrap();
});
range.deleteContents();
range.insertNode($('<span class="nowrap"/>').append(clone).get(0));
Perhaps you have heard about JavaScript Document's execCommand() function, which we often use to make rich text editors. It had a bad reputation before as Internet Explorer worked differently with it. Here are my questions.
Today, do all the elements of execCommand work on all browsers? Like save as, bold, italic, etc...?
If you want to make a rich text editor, is execCommand the appropriate choice today?
Can you give me a website where I can find all the elements this function offers? Because I visited some, but they are just showing bold, italic and others. I want the complete updated lists.
Quirksmode has an (oldish) compatibility table of document.execCommand.
I think the best would be to mix execCommand with selection/range & DOM manipulation for a rich-text editor.
Edit:
window.getSelection()
document.selection
Related questions:
how to modify the document selection in javascript?
JavaScript selection/range framework
I had a similar requirement and came across a rich source of such commands. This list is exhaustive, IMO, and also provides compatibility with various browsers.
http://help.dottoro.com/larpvnhw.php
I've not been able to make it work with Chrome at all, while some work with IE and all the commands run smoothly with Firefox.
Hope this helps.
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();
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.
I'm using TinyMCE in an ASP.Net project, and I need a spell check. The only TinyMCE plugins I've found use PHP on the server side, and I guess I could just break down and install PHP on my server and do that, but quite frankly, what a pain. I don't want to do that.
As it turns out, Firefox's built-in spell check will work fine for me, but it doesn't seem to work on TinyMCE editor boxes. I've enabled the gecko_spellcheck option, which is supposed to fix it, but it doesn't.
Does anybody know of a nice rich-text editor that doesn't break the browser's spell check?
TinyMCE only goes out of its way to disable spell-checking when you don't specify the gecko_spellcheck option (i verified this with their example code). Might want to double-check your tinyMCE.init() call - it should look something like this:
tinyMCE.init({
mode : "textareas",
theme : "simple",
gecko_spellcheck : true
});
Most rich text editors let you specify whether or not to disable the browser's spellchecker (as answered by others), with the exception of those running in Safari.
There is currently no way to programmatically disable the Safari spellchecker (as there is in FF and IE7+), so most rich text editors choose to let Safari do its own thing by leaving the browser in control of the context menu.
I know at least yahoo!'s Rich Text Editor will let you use the included spell checker in FireFox.
I also tested FCKeditor, but that requires the users to install additional plugins on their computer.