The implementation principle of the online editor (IE and Firefox compatible) _javascript tips

Source: Internet
Author: User
The online editor is very useful in our daily project development (such as news system), it can easily achieve the online editing of the article, eliminating the FrontPage and other tools.  So how to achieve the browser online editing function? First of all need IE support, after the IE5.5 has an editing status. is to use this editing state and then use JavaScript to control online editing.
The first thing to have is an edit box, which is actually an editable page, and we use an IFRAME to create the edit box.
<iframe id= "Htmledit" style= "width:100%; height:296px "marginwidth=" 0 "marginheight=" 0 "></IFRAME>
and add JavaScript code to specify that Htmledit has an editing function (the complete original code is provided below):
Copy Code code as follows:

<script language= "JavaScript" >
var editor;
Editor = document.getElementById ("Htmledit"). Contentwindow;

Simply type the following setting, and the IFrame immediately becomes an editor.
Editor.document.designMode = ' on ';
Editor.document.contentEditable = true;

But IE is a little different from Firefox, so you have to create a new document to be compatible with Firefox.
Editor.document.open ();
Editor.document.writeln (' Editor.document.close ();

Font Effects-Bold method one
function Addbold ()
{
Editor.focus ();
All font effects can be done using Execcomman () only.
Editor.document.execCommand ("Bold", false, NULL);
}
Font Effects-Bold Method two
function Addbold ()
{
Editor.focus ();
Get the selected focus
var sel = Editor.document.selection.createRange ();
Inserthtml ("<b>" +sel.text+ "</b>");
}
function inserthtml (HTML)
{
if (Editor.document.selection.type.toLowerCase ()!= "None")
{
Editor.document.selection.clear ();
}
Editor.document.selection.createRange (). pastehtml (HTML);
}

</script>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.