ueditor/Custom Configuration

In addition to the advantages of lightweight and customizable, Ueditor has always placed an important position in optimizing editing operations and improving user experience. In this regard, in addition to the editor function, performance, implementation of the details of continuous improvement and the pursuit of innovation, many flexible and humanized custom configuration also fully embodies this feature, by modifying the value of the configuration item, the user can almost completely change the appearance and behavior of the editor.

From the priority of the configuration itself, the configuration of Ueditor can be divided into two types: system default configuration and user-defined configuration. The system default configuration refers to all the configurations in the Editor_config.js, while the user-defined configuration refers to the JSON-formatted configuration that is passed in when the user instantiates the editor. The user-defined configuration takes precedence over the system default configuration, and overwrites the system default configuration if the two have the same name. If the corresponding user custom configuration is not provided, the system default configuration is used. In general, it is recommended that users use custom configuration when instantiating instead of modifying the system default configuration.

From the role of configuration to the editor, Ueditor configuration can be divided into two types of interface configuration and function configuration. The interface configuration is mainly focused on the configuration of the toolbar and the initialization configuration; Because of the relatively large number of features, the following will filter some of the students easily confusing configuration items to explain, and others simply refer to the specific configuration item corresponding to the comment.

• Interface Configuration

1. Toolbar configuration

The default configuration item contains all the buttons of the editor and needs to be changed as long as the corresponding parameters are passed in during initialization. The sample code is as follows:

    var editor = new Baidu.editor.ui.Editor ({        toolbars:[[' Paragraph ', ' rowspacing ', ' FontFamily ', ' FontSize ']    }) ;    Editor.render ("Myeditor");

This time the editor has only four tool buttons. More advanced configuration on toolbars, such as changing the layout structure, double-column and single-column mixing, etc.

2. When initializing content instantiation, you can use <textarea id= "editor" > Initial content </textarea> to assign an initial value to the editor. In PHP, for example, you can replace the "initial content" with <?= $content?> to dynamically retrieve it from the server. When some places are unsuitable for using textarea as the editor container, such as when using div as a container, how to initialize the content:

    var editor = new Baidu.editor.ui.Editor ({    initialcontent: ' <span style= "color: #ccc" > Welcome to Ueditor</span > '    });    Editor.render ("Myeditor");

3. Initialization style because the editor's edit box is in a separate IFRAME, it is not feasible to set the element style in the edit box by instantiating the page in the editor. Ueditor provides two ways to change the style of an element in an edit box: one is implemented by modifying the contents of the Initialstyle, and the other is implemented by Iframecssurl referencing an external CSS file. The specific code examples are as follows:

    var editor = new Baidu.editor.ui.Editor ({    initialstyle: ' body{margin:8px;font-family: "Arial"; font-size:16px;} ',    iframecssurl: ' Themes/default/iframe.css '    });    Editor.render ("Myeditor");

It is important to note that if both parameters are configured at the same time, the configuration in Initialstyle will take precedence over the configuration in the CSS file that Iframecssurl points to. In addition, because some functional effect implementations in the editor need to rely on the default configuration in Initialstyle, such as the blue background effect of the marquee table, it is generally not recommended to remove the default style class from the default configuration item unless you have confirmed that the corresponding feature is not required.

4, ElementPath

The path portion of the lower section of the edit box. Do not need to set elementpathenabled:false students can.

5. Word Count

Edit the Word Count section at the bottom of the box. Do not need to set wordcount:false students can. When the setting is on, you can also control the maximum number of characters allowed, the wordcountmsg parameter to control the hint text that needs to be displayed, the wordoverflowmsg parameter to control the hint text when the maximum word limit is exceeded by the Maximumwords parameter.

6, the editor minimum height and automatic length high

The minimum height of the editor is determined by the configuration item minframeheight, while the autoheightenabled:true allows the editor's edit-box portion to automatically grow as the edits increase.

7. Tool Bar Floating

Toolbar float means that when the top of the edit box is outside the top of the browser, the toolbar will always float at the top of the browser, allowing you to edit the operation. In the editor instance page with the edit box height fixed, it is recommended to turn this feature off to get the best performance and experience: Autofloatenabled:false

• Feature configuration

Ueditor because of the more functional points, but also hope to bring users more flexible personality of the editorial needs, so in the functional configuration is a bit dazzling. For most users, however, maintaining the default configuration is the best option, and it is a special requirement to consider modifying the configuration. Despite the many configurations, most configurations are straightforward and require no special explanation. Here summed up the students asked more of some of the configuration items for a simple explanation, the rest of the configuration please the students themselves to view the corresponding comments in the Editor_config.js file.

1. The domain name of the submission form

Place the editor's container in a form form, and how do you get the contents of the editor in the background? Ueditor internal automatic processing, no need for users such as creating a hidden form to place edits, and so on, only need to set textarea in the configuration item: ' Editorvalue ', backstage can be directly through the $_post[' Editorvalue ' or Request.getparameter ("Editorvalue") to get the contents of the editor.

2, black and white list Ueditor provides a powerful black-and-white list filtering mechanism, a few simple configuration can intercept any unsafe factors outside the editor. Black and white lists can be used at the same time, or separately. The tags in the blacklist will be completely filtered out by the editor, including the label itself and any content within the tag. Those that are not in the whitelist are filtered only by the label itself, and the content continues to flow through the filtering process.

Specific black-and-white list configuration examples are shown below, where $ represents the attributes of an element:

  Serialize:function () {     return {        ///blacklist, indicating that no style, script, link, object, applet, and input tags are allowed        blacklist: { Style:1,script:1,link:1,object:1,applet:1,input:1},        //Whitelist        whiteList: {            //= Allow div tag, and it can contain p, span, and BR tags , style, class attribute            div: {p:1,span:1,br:1,$:{style:1,class:1}},            //means allow IMG tag, and can only contain href, title, and ALT attribute            IMG: {$ : {Href:1,title:1,alt:1}}}}  ()

3. Facial expression Localization

Since some intranet users do not have access to the external network caused by the editor expression function is not available, starting from 1.1.7, Ueditor provides the facial localization function. Change the configuration emotionlocalization:true to turn on the local emoticons feature. Of course, the local emoticons feature must ensure that the dialogs/emotion/directory has an official Images folder and all emoji files.

ueditor/Custom Configuration