Simple use of the HTML editor Ueditor __html

Reference from: http://ueditor.baidu.com/website/document.html

About the HTML editor, try FCKeditor, upgrade version of the CKEditor, and TinyMCE, and recently tried to use Baidu Ueditor. Contrast or feel ueditor configuration is simpler, quick to start and documents and examples are also very complete. So here the ueditor1.2.3.0php version of the UTF-8 version as an example of the use of ueditor to comb the flow.

1. First is the document structure of the Ueditor

_examples: Example pages for various versions of the editor

_src:js file

Dialogs: Pop-up dialog box corresponding to the resources and JS files

Lang: Language pack file

PHP: File upload processing, remote image capture, image online management, screen capture related documents

Themes: Style pictures and style files

Third-party: Third-party Plug-ins

Packaging files for all files in the EDITOR_ALL.JS:_SRC directory

The compressed version of the Editor_all_min.js:editor_all.js file, which can be used in a formal deployment

Editor_config.js: Editor's configuration file

2. System Configuration

The configuration of Ueditor can be divided into two types: system default configuration and user custom configuration. The system default configuration is dispersed among the corresponding core or plug-in files and is not visible to the user. Works when a user comments out a custom configuration. The user-defined configuration consists of two types, one in the Editor_config.js file with precedence over the system default configuration, and the other in the parameter passed in when the instantiation editor is the highest priority. By default, Ueditor has commented out all the configurable items that can be omitted in Editor_congfig.js, using the system default configuration, and if the annotation is canceled, the configuration entry is the same; an annotated configuration entry requires that the user be required to fill in the actual project.

The following is a simple configuration that you define:

<script type= "Text/javascript" >
//Custom editor configuration entries, the configuration items defined here will overwrite the editor_config.js with the same name configuration
 var editoroption = { //
 Here you can choose the name of the tool button you want, only the following four
 toolbars:[[' fullscreen ', ' Source ', ' Undo ', ' Redo ']
///More, please refer to Editor The configuration item in _config.js
};
</script>

The most important configuration is the 28th line on the configuration of URL parameters, related to image upload, processing and other paths, need to configure the UEDIOTR in the site's relative path or absolute path. If my project name is T and the root directory is WWW, the value of the URL is set as follows:

URL = window. ueditor_home_url| | " /t/ueditor/";

3. Introduction of configuration files, JS files and theme CSS files

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script type=" Text/javascript "src=" Ueditor/editor_config.js "></script>
<script type= "Text/javascript" src= "ueditor/editor_all.js" ></script>
<link rel= "stylesheet" href= "Ueditor/themes/default/ueditor.css" >

4. Create an editor instance and its DOM container

<form action= "" method= "Post" name= "MyForm" >
<!--Following the introduction of the Ueditor Editor interface--> <script type=
"text/ Plain "id=" editor "name=" mycontent "></script>
 //No Name is set here, the editor default name is" Editorvalue ", which can be
TextArea the configuration parameter in Editor_config.js, or set up
<input type= "Submit" name= "submit" value= "Upload"/>
</form >

5. Set options and render editor

If you need a different set of ueditor, you can define a different custom option and then render the editor separately.

<script type= "Text/plain" id= "Myeditor" style= "width:800px" ></script> <script type= "Text/plain"
Id= "MyEditor1" style= "width:800px" ><p> here I can write some input hints </p>
</script>
<script type= " Text/javascript ">
var editor_a = new Baidu.editor.ui.Editor ();
Editor_a.render (' Myeditor '); The parameter value here is the editor's ID value
var editor_a1 = new Baidu.editor.ui.Editor ({
//) Here you can select the tool button name you want, just select the following five
toolbars:[[ ' Fullscreen ', ' Source ', ' Undo ', ' Redo ', ' Bold ']
///More other parameters, refer to the configuration item in Editor_config.js
});
Editor_a1.render (' MyEditor1 ');
</script>

6. Front and back data interaction

For PHP, you can get the value of the editor directly with $_post[' Ueditorname ', where the value of Ueditorname is the name value Ueditor when the editor is initialized.

The following is a complete rendering of 2 Ueditor code

<! DOCTYPE html>