How to develop an HTML editor

Source: Internet
Author: User

The online HTML content editor provides the user with style control over text, such as text color, font size, and so on. Although there are many powerful editors (e.g. FCKEditor) on the web, there are many complicated configurations in use, and the code is often "bloated". The purpose of this article is to describe how to develop an HTML editor. Using the method described in this article, we can easily develop the HTML editor that satisfies your needs, and the code is comparatively concise. The following is an HTML editor developed using this method to achieve some simple features:

The development method is as follows:

1. Add an editable IFRAME

The 1th step in implementing the HTML editor is to place an editable iframe in the Web page to enter text, making the IFrame editable method fairly simple, by simply setting the designmode of the IFrame to on, as follows:

var editor = document.getElementById("IFRAME的ID");

var editorDoc = editor.contentWindow.document;
var editorWindow = editor.contentWindow;

editorDoc.designMode = "on";

editorDoc.open();
editorDoc.write(" editorDoc.close();

2. Set the style of selected text

The easiest way to set the method of selecting a text style is to use Document.execcommand, but the execcommand feature is limited and sometimes does not meet the requirements, such as: execcommand set font size can only be 1-7, cannot use pixel size, And if you click on a toolbar button to call ExecCommand the other div,iframe selection will disappear, then the call to ExecCommand is invalid. So this article introduces another method, the basic idea is as follows:

(1) Get the selected HTML;

(2) modify the HTML style;

(3) Replace the selected HTML with the modified HTML.

2.1 Getting the selected HTML

The way to get the selected HTML in a different browser is different, and you can use it in IE

var range = document.selection.createRange() 

In Firefox,chrome, you use the

var range = window.getSelection().getRangeAt(0); 

2.2 Replace the selected HTML

After you get the object that represents the selection by using the 2.1 method, you can call its method to replace the selected content. There is a difference in how to replace the selected HTML in different browsers, in IE, you can simply call range.pastehtml, and in firefox,chrome you use Range.deletecontents and Range.insertnode Two ways to implement

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.