How to customize the Kindeditor Editor's toolbar items to remove unnecessary toolbars or to keep some toolbars

The Kindeditor Editor's toolbar refers to the menu that can be manipulated above the editor's input box, which is given all toolbars by default. For different users, different projects, different environments, you may need to keep some of the toolbars. So how do we customize the toolbars we want? How to edit the toolbar? We will elaborate on several situations: first: Modify the original file kindeditor.js the toolbar for uniform adjustment There is a kindeditor.js or kindeditor-min.js file in the Kindeditor editor package that contains the entire basic configuration of the editor as well as some basic functional methods. By looking for the basic configuration properties of the Kindeditor editor, you can then see that there is one items item: items: [Source, ' | ', ' undo ', ' Redo ', ' | ', ' preview ', ' print ', ...

The Kindeditor Editor's toolbar refers to the menu that can be manipulated above the editor's input box, which is given all toolbars by default. For different users, different projects, different environments, you may need to keep some of the toolbars. So how do we customize the toolbars we want? How to edit the toolbar? We will elaborate on several situations:

First: Modify the original file kindeditor.js the toolbar for a uniform adjustment

There is a kindeditor.js or kindeditor-min.js file in the Kindeditor editor package that contains the entire basic configuration of the editor as well as some basic functional methods. By looking for the basic configuration Properties options for locating the Kindeditor editor, you can then see that there is a items item in it:

View Source print? 1. Items: ["source", "|", "undo", "Redo", "|", "preview", "print", "template", "code", "Cut", "copy", "Paste", "plainpaste "," Wordpaste ", 2" | "," justifyleft "," Justifycenter "," Justifyright "," Justifyfull "," Insertorderedlist "," Insertunorderedlist "," Indent "," outdent "," Subscript "," superscript "," clearhtml "," Quickformat "," SelectAll "," | "," Fullscreen ","/"," Formatblock "," FontName "," FontSize "," | "," ForeColor "," Hilitecolor "," bold "," Italic "," Underline ", "Strikethrough", "Lineheight", "Removeformat", "|", "image", "Multiimage", "flash", "Media", "InsertFile", "Table", "HR" , "emoticons", "Baidumap", "PageBreak", "anchor", "link", "unlink", "|", "about"]

This item is configured with all the toolbar menu items for the Kindeditor editor. We can make a unified change here to keep the few menus we want. In addition, this is a description of what each menu code means:

Source: Indicates that the edit mode of the editor can be switched into the source code HTML viewing mode;

undo: To show back, which is our common Ctrl+z shortcut key function;

Redo: The forward, that is, our common ctrl+y shortcut key functions;

Preview: For preview, click to preview the effect shown in the contents of the editor in advance.

Print: Represents the content within the print editor.

Template: Represents a template form that can be inserted into an editor;

Code: Indicates that a snippet can be inserted;

cut: means shearing;

copy: Means duplicate, as CTRL + C;

paste: Paste, like Ctrl + V;

plainpaste: To Paste as unformatted text, mainly used for example, to assign value to other HTML-formatted plain text into the editor, you can first in this area to filter HTML tags;

wordpaste: means pasting from word;

Justifyleft: Indicates that the selected text occupies the left;

Justifycenter: Indicates that the selected text is centered;

justifyright: Indicates that the selected text occupies the right;

justifyfull: means justified;

insertorderedlist: Number of representations (1, 2, 3);

insertunorderedlist: denotes a project symbol;

indent: Increase indent;

outdent: to reduce indentation;

subscript: to denote subscript; as: X2

superscript: to denote a superscript; as: X2.

clearhtml: means to clear HTML tags;

Quickformat: Express typesetting;

SelectAll: To express the whole election;

fullscreen: means full screen;

Formatblock: denotes a paragraph;

fontname: denotes a font;

fontsize: Indicates the text size;

ForeColor: Indicates the color of the text;

Hilitecolor: Indicates text background color;

Bold: represents bold text;

Italic: denotes text italic;

underline: To append underline to the text;

strikethrough: means to append strikethrough to text;

lineheight: Indicates the adjustment of line spacing;

Removeformat: Indicates that the format of the selected segment is deleted;

Image: Represents a single upload picture;

multiimage: bulk upload pictures;

Flash: indicates inserting flash;

Media: Insert audio and video files;

insertfile: means inserting a file;

table: Insert table;

hr: Insert horizontal line;

Emoticons: expression of insertion;

baidumap: Insert map;

PageBreak: Inserts a page break;

anchor: means inserting an anchor point;

link: indicates inserting a hyperlink;

unlink: means to cancel the hyperlink;

about: Represents information about the Kindeditor editor;

Second: Configure the toolbar menu in a page using the Kindeditor editor

We will write a Kindeditor.ready method in the page if we want to use the Kindeditor editor

View Source print?     1. Kindeditor.ready (function (K) {2.                  Editor = k.create (' textarea[name= ' content "] ', {3. 4.}); 5.});

If you do not specify any of its items within the Create method, the configuration of the items within the Kindeditor.js is inherited by default, which is the entire menu. When we specify the items property within the Create method, the value displays the toolbar menu that is configured here, such as:

View Source print?     1. Kindeditor.ready (function (K) {2.                Editor = k.create (' textarea[name= ' content "] ', {3.          items:["image", "multiimage"]//Configure toolbar menu item 4 of the Kindeditor editor. }); 5.});

The above only configured a single picture upload and bulk upload two menu items, the final display page Kindeditor editor when the toolbar can only upload pictures.