First of all, a brief introduction to the HTML Rich Text Editor implementation principle, if it is WYSIWYG, then with textarea can be done, if you want to achieve what you see, especially if you want to insert pictures and so on, then you should consider other ways to replace the textarea, After all, textarea cannot implement "live preview."
Currently published HTML Rich text editor such as: FCKeditor, TINYMCE, etc., the implementation method is basically based on the IFRAME
, the tab under IE has a contenteditable property that sets its value to true to enable editing of its internal elements, such as <div contenteditable= "true" >123</div> or <p contenteditable= "true" >dds</p>
According to the online saying is not support Firefox, but I tested a bit, unfortunately, Firefox can also be used, and not only that, I tested a bit, even Safari 4.0, Opera9.6, Google Chrome, Firefox 3.10 can be used, It's possible that these newer browsers just joined. Perhaps the early Firefox didn't support it. This does not know, however, suggest that those who write technical blog colleagues, if they have not been tested, it is best to write clearly, do not always put someone else's blog sticky to stick to, even if glued, they have to test.
If you want to implement a simple HTML Rich text editor, use the system with the execcommand (); To modify,
This is a method of document, first by IE implementation, Firefox and later browsers support this method.
However, the method used in IE and FF down the parameters and the resulting results are not the same.
For details, please refer to execcommand () and the detailed parameters under IE and FF,
OK, cut to the chase, what we want to do most.
The first step is to turn an IFRAME into a writable mode
In the second step, insert the content at the current cursor.
With these two steps, we can implement a good editor, we do not need to consider the complex execcommand (); Parameters,
For example, you want to increase the font: Just insert a <p style= "FONT-SIZE:24PX;" >sddsds</p> will be all right.
If you want to insert a picture: code is both specification and concise.
<iframe src= "name=" editor "id=" editor "style=" border:1px solid RGB (204, 204, 204); "frameborder=" 0 "height=" "Wid" Th= "></iframe>"
This is an IFRAME,
Now we use JS to modify it so that it document.designmode to "on", the default is "off", which opens the writable mode of the IFRAME
Here's what you can do with jquery, if you don't have jquery, you might want to make another decision, because different browsers want to get an IFRAME document differently.
<script>
_win=$ (' #editor ') [0].contentwindow; We use the _win variable instead of the iframe window.
_doc=_win.document; Replacing the document of IFRAME with _doc variables
_doc.designmode = ' on ';
</script>
Test it. And see if it's writable.
The above code does not judge different browsers, according to the online spread of the saying: for IE to use: _doc.contenteditable= ' true '; To set up. And I tested, not needed, as long as the above code can be run.
Test browser: ie6,7,8 firefox3.10,opera9.6, Safari 4.0, Google Chrome is good, generally we open the writable mode after usually write something into such as _doc.write (");
The following code reports no permissions under IE6, I do not know where to set the wrong, open () and close () function report does not have permissions, other browsers are normal, if the FF does not have these two functions, will show the browser has been in a refreshing state and IE will not, So if there's no way you can try to use code to determine:
if ($.browser.msie) {
_doc.write (' }else{
_doc.open ();
_doc.write (' _doc.close ();
}
I don't know if it's possible my browser problem.
$.browser.msie This is jquery used to detect if the browser is ie.
OK, here's how to achieve the most critical technology:
Inserts the HTML code at the current cursor:
Non-IE and other browsers support _doc.execcommand (' inserthtml ', ', ', HTML); The first argument is: ' inserthtml ' the second argument is left blank, and the third parameter is the inserted value
IE does not support this method, but IE supports _doc.selection.createrange (). pastehtml (HTML); Method
So here's the implementation:
function inserthtml (sHtml)
{
_win.focus ();
if ($.browser.msie) {
_doc.selection.createrange (). pastehtml (sHtml);
}else{
_doc.execcommand (' inserthtml ', ', ', sHtml);
}
}
_win.focus (); This sentence is critical, if the current focus is not above the IFRAME, insert the time will be inserted into the page. Rather than IFRAME inside, as for why, have not studied understand. Because _doc is obviously an IFRAME. I can't think of a real sense.
Well, with this method, the next thing to achieve is unimpeded.
For example, insert a picture: inserthtml (' ');
Give it a try.
Reference: http://hi.baidu.com/smallchicken/blog/item/d11908447d6de18ab3b7dc43.html
Another article:
Most of the features of the online editor can be implemented using JavaScript's execcommand function, but there is a problem with using execcommand (' FontSize ', false, value) when implementing arbitrary text sizes, which is only 7 sizes, Editor switch to source code to see the way <font size= "7" > </font>. Oh, too stupid way, to change to <font style= "FONT-SIZE:12PX;" ></font> the way is good. That will use the pastehtml function, but this method is not supported by other browsers except IE. Many articles on the web complain that other browsers do not support pastehtml functions. Oh, is not in fact more convenient for IE browser implementation, using ExecCommand (' inserthtml ', false, value) (Note that the function uses ' inserthtml ' parameter IE does not support). Therefore the judgment is IE uses the Pastehtml method not IE uses the execcommand (' inserthtml ', false, value) method, uses it to be possible to replace the specified text paragraph with the text which you want. Oh, yes, it doesn't matter. Insert a picture, generate a link (use the ExecCommand method to implement directly if you can not take parameters such as you to take ALT, <a> to take target) you can play the turn. Other things can be easily implemented, such as inserting a colored horizontal line, inserting a block </a><div></div><a> bringing your favorite style.
(The above method I only tested the Firefox feasible, other browsers have yet to be confirmed).
