edit

Multi-function text editor (MTE) provides editing function similar to Microsoft Word, which is easily loved by users who can't write HTML and need to set various text formats. Its application is also more and more extensive. At first, only IE browser supported it, and other browsers followed suit. In terms of functional richness, IE is stronger. Although there is no uniform standard, the APIs provided by browsers are basically the same for the most basic functions, which makes it possible to write a cross-browser rich text editor.

In the eyes of many developers, the writing of rich text editor is a very mysterious or complicated matter. There is no mystery. If it's complicated, it is. But its basic principle is not complicated, and it is not difficult to get started. Today, our theme is to tell the basic principles and demonstrate the generation of a simple rich text editor step by step. This is what I shared in D2. The speech on the stage was not effective, so I wrote it down, hoping to help interested readers.

fundamental principle

edit

This principle is too simple! For browsers that support rich text editing, it is actually to set the designMode property of document to on, and then execute the document. execcommand ('commandname' [，uiflag [，value]])。 Command names and values can be found on MSDN and MDC. They are commands that we create in various formats. For example, we need to bold fonts and execute documents. execcommand ('bold '，false)。 Simple, right? However, it is worth noting that this command is usually executed after selecting the text and formatting the selected text. Different browsers have different ways to handle this command for unselected text. For example, IE may format the content of the tag in the cursor, while other browsers do nothing, which is beyond the content of this article and will not be repeated here. At the same time, it should be noted that setting the UIFlag parameter to true means displaying any user interface triggered by the command (if any), which is false in our tutorial today, and the value is only in some commandName? Only in Chinese, please refer to the two links just given above for details.

In order not to affect the current document, the usual practice is to embed an iframe element in the page, and then manipulate the document in this iframe (obtained through iframe.contentWindow.document).

Simple, isn't it? Let's make one.

Simple editing

edit

This example uses YUI. It doesn't matter if you're not familiar with it. I only use its DOM and some basic cross-platform event methods here.

raise

Here, I want to emphasize that it is not abrupt, which has not been mentioned for a long time. Our editor is an enhancement of the textarea element, that is, even if JavaScript is disabled, users can edit the content through textarea.

In this example, we will only calculate textarea. We use an instance variable to save the items in the toolbar. Instance initialization is placed in a method called render. See step 1 for the page and code of this step.

Create iframe and replace textarea.

Build a shelf, like I said before, build an iframe. All the operations of the editor are performed in the iframe document. And hide the text area. As you can see in step 2, we already have an iframe, but we can't enter anything. It is normal. We didn't open its design mode.

Open design mode

This step involves many things and is also the key. We will create a method to get the document of iframe and write a blank page to iframe through the program instead of using external blank.html. We use a class attribute YAHOO.realazy.RTE.htmlContent to save the html of an empty page. When everything is ready, we can start designing the pattern. See step 3 for the page and code. Look, we can already enter the content in iframe.

Build toolbar

We need to operate the toolbar! Only in this way can we control the content in iframe and call it an editor. I don't intend to realize too many functions here, just choose glyphs, bold, italics, underscores, left, middle, right, hyperlinks and illustrations as examples. The Mozilla Midas specification is a good reference for cross-platform. Ok, please look at step four. Our toolbar came out, although it was ugly. At the same time, I made some adjustments to the width of iframe with CSS.

Add items to the toolbar

Well, the toolbar comes out and the editor looks "man to dog". If you're excited, you can't ... as expected. Then, we bind some events to the toolbar so that the editor content can respond to the toolbar. In this step, we seal the execCommand with another layer. As mentioned earlier, we can put UIFlag on it and make it always false. Well, where there is code, there is truth. See step 5. If you are using IE, please switch to another browser temporarily. Look, the toolbar is working!

Solve IE's problem

Well, if you don't take my advice and use IE, you will find that you can't use anything except font and font size. Why? If you observe, do you find that other browsers click on the item on the toolbar after selecting the text, and the selected text is still selected? And IE, when you click on the toolbar, the selected text immediately loses its selected state, so they fail. Therefore, if we can ensure that the click toolbar text remains selected, we can solve the problem of IE.

Microsoft gives HTML tags a strange attribute that cannot be selected. As long as it is set to On, it will not be transferred to the clicked element, thus ensuring the selected state of the text.

See step 6. This is also the key to solving IE's headache. I have put a lot of thought into it.