How to add multiple different kindeditor editors and kindeditor editors to a page
Kindeditor official
Kindeditor official document: http://kindeditor.net/doc.php
Kindeditor editor initialization parameter documentation: http://kindeditor.net/docs/option.html
Maybe we need to use multiple text editors on a page. What should we do? After reading a lot of information, I finally found a method. You can use the items attribute in the toolbar of the custom editor to achieve the following:
Go directly to JS:
<Span class = "lspan"> <font color = "red"> * </font> product information: </span> <% -- <span class = "lspan"> <input id = "txtProductInfo" placeholder = "Enter product information" value = "<% = product. productInfo %> "name =" txtProductInfo "type =" text "maxlength =" 25 "style =" width: 444px "/> </span> -- %> <script type =" text/javascript "> KindEditor. ready (function (K) {editor = K. create ('# txtProductInfo', {cssPath :'.. /kindeditorx/plugins/code/prettify.css ', uploadJson :'.. /kindeditorx/asp.net/upload_json.ashx', fileManagerJson :'.. /kindeditorx/asp.net/file_manager_json.ashx', minWidth: 444, minHeight: 200, maxWidth: 444, resizeType: 1, filterMode: false, allowFileManager: true, items: ['source', '| ', 'undo ', 'redo', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent ', 'outdent ', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen ',' | ', 'forecolor ', 'hilitecolor', 'bold ', 'italic', 'underline', 'strikethangout', 'lineheight', 'removeformat']}); </script> <textarea id = "txtProductInfo" rows = "5" cols = "" style = "width: 400px;"> <% = product. productInfo %> </textarea>
Important:
The following custom display tools are the key. Other Editors only need to modify the items attributes.
items: ['source', '|', 'undo', 'redo', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '|', 'forecolor','hilitecolor','bold','italic' ,'underline','strikethrough','lineheight','removeformat' ] });
As follows:
The items parameters are described as follows:
Source |
HTML code |
Preview |
Preview |
Undo |
Back |
Redo |
Forward |
Cut |
Cut |
Copy |
Copy |
Paste |
Paste |
Plainpaste |
Paste as unformatted text |
Wordpaste |
Paste from Word |
Selectall |
Select All |
Justifyleft |
Left aligned |
Justifycenter |
Center |
Justifyright |
Right alignment |
Justifyfull |
Alignment at both ends |
Insertorderedlist |
No. |
Insertunorderedlist |
Project symbol |
Indent |
Increase indentation |
Outdent |
Reduce indentation |
Subscript |
Subscript |
Superscript |
Superscript |
Formatblock |
Section |
Fontname |
Font |
Fontsize |
Text Size |
Forecolor |
Text color |
Hilitecolor |
Text background |
Bold |
Bold |
Italic |
Italics |
Underline |
Underline |
Strikethrough |
Strikethrough |
Removeformat |
Delete format |
Image |
Image |
Flash |
Flash |
Media |
Video/audio |
Table |
Table |
Hr |
Insert a horizontal line |
Emoticons |
Insert emoticon |
Link |
Hyperlink |
Unlink |
Cancel hyperlink |
Fullscreen |
Full Screen Display |
About |
About |
Print |
Print |
Code |
Insert program code |
Map |
Google Maps |
Baidumap |
Baidu Map |
Lineheight |
Line spacing |
Clearhtml |
Clear HTML code |
Pagebreak |
Insert a paging character |
Quickformat |
One-click Layout |
Insertfile |
Insert File |
Template |
Insert Template |
Anchor |
Insert anchor |