Difficulties in creating an HTML online editor

Document directory

• What is the HTML online editor actually?
• How to implement bold, italic, underline, and link Adding Functions
• Interaction Problems
• Carriage Return Problem
• Get Standard Code
• Summary

What is the HTML online editor actually?

In fact, there are several implementation methods. Currently, the iframe method is the most widely used and the most compatible.

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

Only this empty iframe cannot be used. You need to use Javascript to set it to Editable:

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

In other words,The HTML online editor is an editable iframe..

How to implement bold, italic, underline, and link Adding Functions

The browser has provided interfaces to implement these functions.ExecCommand:

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

The three parameters mean:

• Cmd: There are a lot of command texts. for IE, you can see here, for Firefox, you can see here.
• Isdefashowshowui: whether to display the interactive interface by default. For example, when adding a link, you can enter the link in the interface. However, this parameter has compatibility issues. Generally, it is set to false to disable it and create an interactive interface.
• Value: the input value. Some commands can be omitted.

The problem with execCommand is that the generated code may not be standard. For example, in IE, the B label rather than the strong label is used for bold text.

Interaction Problems

You cannot always enter the image in the editor. For example, you can use buttons to insert images or bold images. Suppose the user wants to bold a selected text segment. When he presses the bold button, the selection area and focus will also be there, so the selection area (selected text) is lost, the operation cannot be completed. Similarly, the position of the inserted image is also lost.

That is to say, you need to save the selected area that finally appears in the editor. The solution I adopted is to use a timer (setInterval) when the focus is in the editor)Obtain the current constituency regularly. Constituency programming is rarely used at ordinary times, and there are also many compatibility issues, mainly refer to Microsoft'sMSDN(TextRange ControlRange) and Mozilla'sMDC(Range Selection.

Carriage Return Problem

In IE, press enter to change the paragraph to generate <p>, but in Firefox it is a line break, and the generated is <br>. To solve this problem, you must listen to the keydown event. If the key is detected as a carriage return, insert "<p> </p> ".

Get Standard Code

How can I get the edited content? This problem is simple. You only need to obtain the innerHTML in the body of the iframe page:

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

However, the innerHTML in IE is very nonstandard: The tag name is in uppercase, the attribute is not enclosed in quotation marks, and there is no Terminator for a single tag ...... Even the code obtained in Firefox has a few flaws. This time is requiredRegular ExpressionStandardize the code.

Summary

Let's just move on to the HTML editor and you will know how powerful the CKEditor is.