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();
Related
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.
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.
im writing a chrome extension and need a simple text editor component so that users can edit simple notes in the extension.
required:
clickable links, but without any sort of modal dialog. its sufficient if any "http://.." substrings can be turned into actual clickable links of any sort (ie. divs styled like links and with onclick handler are fine)
undo/redo functionality
tab indent/outdent of a single line or multiple selected lines simultaneously
seamless switch between editing/displaying, ie. no save buttons or reflowing or the like (counterexample)
dont need any kind of formatting capabilities apart from indenting, just plain text (counterexample)
html/js that works on chrome
i have looked at/tried:
<textarea/>: undo included and tab indent easy to implement, but no way to do links
<div contenteditable="true">: undo broken, tab indent=hell (selections and ranges), but links work fine. also have set white-space: nowrap; to show indent spaces. this is my current solution but its very buggy, maybe ill have to open another question just for this.
tinymce: overkill i guess
markitup: looks good, but since it is a textarea, i figure no links possible
ACE: looks promising, worth a shot? not overkill?
kix-standalone demo doesnt work on chrome (ironically)
any comments or answers very appreciated..
edit: i have used codemirror 1 in my project (Syncpad for Simplenote Chrome extension) and i am quite content with it. CodeMirror provided alot of additional infrastructure for text editing (esp live parsing) which i wouldnt want to miss anymore. Will be updating to codemirror 2 when i have the time
How about CodeMirror? I don't think it will do links, but it's nicely engineered and you may be able to extend it.
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.