Some experiences in developing Rich Text editors

We have been developing a text editor for the background WCMS System for the last two weeks. In the development process, I feel that I can still learn a lot about developing Rich Text editors. Next I will talk about how I developed it. Because my editor must be compatible with my own background, I modified some browser methods.

The Rich Text Editor is mainly used for development.Document.exe ccommand (command, showui, value) method.

Command: name of the command to be executed. showui: Boolean: whether to display the value type of the command-specific dialog box or message box to the user. String indicates the value to be allocated using this command.

For more details about this method, you can search by Google.

We all know that in textarea, we can directly input text, but how can we display the edited text effect. We usually edit it in Div and IFRAME. To edit a DIV, set its contenteditable = "true ". If you want to edit it in IFRAME, you can use designMode = "on ". In general, ifame is used. I am here to talk about my personal views. If you have any mistakes, I hope you can point them out.

Why use IFRAME to develop a Rich Text Editor is based on multiple considerations. My personal views are as follows:

1. IFRAME can be used to solve browser compatibility issues. In IFRAME, you can easily obtain the selected text.

2. Editing under IFRAME can achieve what you see is what you get. As a result, IFRAME displays the content after the browser parses the source code.

3. operations on the document under IFRAME directly do not affect the document of the current document.

Let me talk about my experiences in development, because the source code of our news page is written in <textarea> innerhtml. If you want to get the content after source code parsing, just get its value. If you want to <! --> If this encoding format is also displayed, set <! -- And --> are parsed to & lt; and -- gt ;. Also, <br/> is converted to <br> in IFRAME. Therefore, you need to convert it to <br/> when uploading and saving the file.

Because you need to paste the source code into IFRAME during the development process, because IFRAME is a WYSIWYG editor that automatically adds tags to your text to display the current content. If so, IFRAME willSource codeTo solve this problem, I added a paste event to the document of IFRAME, when a pasting event occurs, a textarea element is created in the body, and a focus is added to textarea to set the focus in textarea, so that the content is pasted in textarea. It won't produce anything we don't need.

To capture the CTRL + A event of the browser to obtain all currently selected text content, the method to obtain all currently selected IFRAME text is document. getelementbyid ("iframe" ).content?#doc ument. getselection (). tostring ();

I need to modify the tab event of the browser to align the text. Here I use the inserthtml command, that is, Execcommand ("inserthtml", false ,""). Add spaces to the page when you press a tab key. Here the problem occurs. I have to add seven spaces to align the text. Then how can we solve this problem? Later I found the information and found & emsp; it can represent a Chinese fullwidth space. Through it, I solved this problem.

Of course, the source code is displayed with the current text editor, that is, IFRAME and textarea are displayed with each other.

Write it here.CodeI will not paste it, that is, to provide you with ideas. You are welcome to make a picture.