Rich Text Editor

Rich text editor, rich-text editors, or RTE, is a text editor that can be embedded in a browser and WYSIWYG. It provides similar to Google, Firefox effect is very good, in terms of the richness of functionality, or IE strong (but IE 6, 7, 8, 9 versions are enough to kill developers).
Unlike a text editor, a rich text editor can download a free Rich text editor that is embedded in its own web site or program (which, of course, is more powerful), making it easier for users to edit articles or information. Relatively good text editor has kindeditor,fckeditor, etc., Baidu launched the open source Rich Text editor Ueditor is one of the rising stars.

Principle Practice

Rich Text Editor
Rich Text Editor
Rich Text editor, named RTE, provides editing features similar to Microsoft Word, and is easy to be loved by users who do not write HTML and who need to set up various text formats. Its application is also more and more extensive. First, only IE browser support, other browsers followed, in the richness of the function, or IE stronger. Although there is no uniform standard, the API provided by each browser is basically the same for the most basic functions, making it possible to write a cross-browser rich text editor.

It seems to many developers that writing a rich text editor is a mystery or a complex matter. Mysterious not, complex words, indeed. But its fundamentals are not complicated and getting started is easy. Our topic today is to tell the fundamentals and to step through the generation of a simple rich text editor. This is a share of my content on the D2, the performance of the speech on the stage is not good, write down, hoping to be helpful to interested readers.

Collapse Edit the basics of this paragraph

This principle is simply too simple! For browsers that support rich text editing, the DesignMode property of the document is set to on, and then by executing document.execcommand (' CommandName ' [, uiflag[, Value]]). CommandName and value can be found on MSDN and MDC, which are commands we create in various formats, for example, we want to bold the font, execute Document.execcommand (' bold ', false). It's easy, isn't it? However, it is important to note that text is usually selected before the command is executed and the selected text is formatted. For the unchecked text to this command, the browser has a different way of processing, such as IE may be located in the cursor of the label content to format, and other browsers do not do any processing, this is beyond the content of this article, not detailed. It is also important to note that the Uiflag parameter is set to True to indicate that display any user interface triggered by the command (if any) is false in our tutorial today, and value Also Only in some commandName, specific reference to the above-mentioned two links.

To not affect the current document, it is common practice to embed an IFRAME element in the page and then manipulate the document within the IFRAME (obtained through iframe.contentWindow.document).

It's very simple, right? Let's do one of these.

Collapse edit this paragraph simple edit

This example uses the Yui. Even if you're not familiar with it, I've only used some of its DOM and Event's cross-platform basic methods here.

Folding Frame

I would like to emphasize the unobtrusive which has not been mentioned for a long time. Our editor is an enhancement to the TEXTAREA element (enhencement), meaning that even if JavaScript is disabled, the user can edit the content textarea.

In this case, we will have only textarea one of the numbers. We use an instance variable to save each item of the toolbar. The instance initialization is placed in a method called Render. This step of the page and code is shown in step 1th.

Collapse create IFRAME and replace textarea

Put on a shelf, as I said earlier, to create an IFRAME, all of the editor's operations are performed within the document of the IFRAME. and hide the textarea. As can be seen from the 2nd step, we have an IFRAME, but can not enter anything, it is normal, we do not open its designMode.

Folding Open DesignMode

This step involves a lot of things and is also key. We will create a method to get the document for the IFRAME and write the empty page to the IFRAME programmatically, instead of using an external blank.html. We use a class property YAHOO.realazy.RTE.htmlContent to save the HTML for the empty page. After you have prepared everything, you can open the DesignMode. The page and code are described in step 3rd. Look, we can already enter something in the IFRAME.

Collapse Build Toolbar

We need to manipulate the toolbar! So that you can control the contents of the IFRAME in order to call it an editor. I'm not going to implement too many features here, just choose Glyph, Bold, italic, underline, left, center, right, hyperlink and illustration as an example. For cross-platform, Mozilla Midas specification is a good reference. OK, please look at the 4th step, our tool bar came out, although very ugly. I also used CSS to make some adjustments to the width of the IFRAME.

Fold to tool strip add-on

Well, the toolbar comes out, and the editor looks "stinking", and you're excited to point it out. It's a surprise. We then bind some events to the toolbar so that the editor content responds to the toolbar. In this step, we put execcommand again lunar layer, said before, we on Uiflag, let it forever is false good. Well, there's the truth about the code, see step 5th. If you are using IE, please temporarily transfer to another browser. See, the tool bar is in effect!

Folding the problem of solving IE

Well, if you don't listen to my advice, still use IE, you will find that except font and font size of the other can not be used. What's the reason? You look at the discovery, other browsers select the text, then click on the toolbar items, the selected text is still selected? and IE, when the toolbar is clicked, the selected text immediately loses its selected state, so they fail. So, if we can make sure that clicking on the toolbar text remains selected, it can be IE's problem.

Microsoft gives HTML tags a very strange property unselectable, as long as the set to on is not transferred to the clicked element, thus guaranteeing the text's selected state.

Take a look at the 6th step. This is also the key to solve the IE headache problem. I used to have a lot of brains on this.

Collapse edit this paragraph topic outlook

Good, take a look at our code, 224 lines. You might find it inconceivable compared to other editors with tens of thousands of rows. Because we are the most basic Editor, even the selection is not used. A lot of cool effects, such as the ability to dynamically change the link text in Google Doc, using the inside of the page instead of pop-up prompt to operate the advanced features, basically use the TextRange (IE) or Range. What's deadly is that these two things are incompatible, just similar. See PPK's introduction to Range for introductory recommendations.

C1richtextbox

The RichTextBox for Silverlight control enables you to view, edit, and save documents in THML or RTF format. You can implement rich formatting, wrap, HTML and RTF file import, insert tables, pictures, and annotations.

C1richtextbox provides a rich text editor with the most complete functionality for Silverlight applications. You can load, edit, and save RTF or HTML-formatted documents, and support rich formatting, automatic wrapping, import/export of HTML or RTF documents, tables, pictures, and annotations.

Collapse edit this paragraph js

The JavaScript Rich Text editor makes it easier and easier for us to add and edit articles in our website. These rich text editors provide WYSIWYG (what are you see are GET-WYSIWYG) features that make it easy to edit articles in a Web site, like editing Word documents, often used in content management systems and blog systems. Here are a few recommended free:

Folding Markitup-jquery

A lightweight, customizable and flexible rich text editor, commonly used in CMS, blogs, forums and other websites. Markitup is not a WYSIWYG editor that supports some of the most popular fast keys and popular browsers.

Folding Jwysiwyg-jquery

JWYSIWYG is a commonly used jquery WYSIWYG editor that provides HTML code editing, text editing, and image linking to ensure the simplicity of JWYSIWYG features.

Folding Lightweightrte-jquery

Lightweight RTE is a very simple jquery Rich Text editor with a volume of only 7kb. Provides a number of basic text formatting operation functions.

Folding Htmlbox-jquery

Htmlbox cross-browser, interactive, open source jquery Rich Text editor, in Mozilla Firefox, Inrernet Explorer, Opera, Netscape and Safari and other popular browsers under test. This editor user's manual can help you easily integrate this editor into your web system.

Small Rich Text Editor-jquery

D Small Rich Text Editor uses the Ajaxfileupload plugin to implement image upload functionality.

Rich Text Editor