Create your own HTML online editor implementation Difficulties Analysis _ Web page Editor

What the HTML online editor is actually

In fact, there are several ways to implement, currently used most, compatibility best or IFRAME way.

<iframe src="" frameborder="0"></iframe>

Only this empty IFRAME does not work, but also use JavaScript to make it editable:

iframe.contentWindow.document.designMode = "on";
iframe.contentWindow.document.contentEditable = true;

In other words, theHTML online editor is an editable iframe.

How to achieve the functions of bold, italic, underline, plus link

The browser has provided an interface to implement these functions execcommand:

iframe.contentWindow.document.execCommand(cmd, isDefaultShowUI, value);

The meanings of these three parameters are:

• CMD: Command text, there are many, ie can be seen here, Firefox can see here.
• Isdefaultshowui: Whether the default display interactive interface, such as the link, you can fill in the link through the interface. However, there is a compatibility problem with this parameter, generally set to False to disable it, and create an interactive interface.
• Value: The values passed in, some commands can be omitted.

The problem with ExecCommand is that the generated code may not be standard, as in IE, the text is bold with a B tag instead of a strong label.

Interaction issues

Users can not always enter in the editor, such as bold, insert pictures and other functions are operated through the button. Suppose the user wants to make a bold paragraph of the selected text, and when he presses the Bold button, the selection and focus will follow, so the selection (the selected text) is lost and the operation cannot be completed; the insertion position is also lost when the picture is inserted.

In other words, you want to save the selection that appears last in the editor. The solution I took was to get the current selection with a timer (setinterval) when the focus was in the editor. Constituency programming is rarely used, and there are a lot of compatibility issues to do, mainly referring to Microsoft's MSDN(TextRange controlrange) and Mozilla's MDC(Range Selection).

Carriage return problem

In IE, press ENTER is to change the paragraph, generate <P>, but in Firefox is the line, generated is <br>. To resolve this problem, listen for the KeyDown event and insert "<p></p>" if the key is detected as a carriage return.

Get the standard Code

How do I get the content of my edits? This problem is very simple, as long as you get the innerHTML of the IFRAME page body:

var content = iframe.contentWindow.document.body.innerHTML;

However, the innerHTML under IE is very non-standard: the label name is uppercase, the attribute is not wrapped in quotation marks, and the single label has no terminator ... Even the code acquired under Firefox has a few flaws. This is the time to standardize the code with regular Expressions .

Summarize

No more, just do the HTML editor, and you'll know how powerful CKEditor is.