Kindeditor 4.x Online Editor Common methods Summary _ Web Editor

jquery Way to create an editor
Kindeditor.create (' #nr '); The binding specifies the ID.
HTML Department
<textarea id= "nr" style= "width:680px;height:280px;visibility:visible" ></textarea>
----------------------------------------------------------------------------------
Allowfilemanager "Allow browsing of server uploaded files"
The default value is: false
------------------------------------------------------
Allowimageupload "Allow uploading of local pictures"
The default value is: True
----------------------------------------------
Allowflashupload "Whether to allow Flash upload"
The default value is: True
----------------------------------------------
Allowmediaupload "Allow uploading of multimedia files"
The default value is: True
------------------------------------------------
Pastetype "Set Paste Type"
0: No paste, 1: Plain text paste, 2:html paste (default)
---------------------------------------------------
Resizetype "Setting can change editor size"
0: Cannot change 1: Only change height 2: Width and height can be changed (default)
----------------------------------------------------------
Themetype "Theme Style"
You can set "default" and "simple" to specify simple when you need to introduce SIMPLE.CSS
-------------------------------------------------------------
DesignMode "visual mode or code mode"
Data type: Boolean
The default value is: True (visual)
------------------------------------------
Aftercreate:function () {} "editor created"
Aftercreate:function () {
Alert (' Create complete ');
}
------------------------------------------
Fontsizetable "Make text Size"
Data type: Array
Default value: [' 9px ', ' 10px ', ' 12px ', ' 14px ', ' 16px ', ' 18px ', ' 24px ', ' 32px ']
-----------------------------------------------------------------------
Colortable "Specify the color value in the Color Picker"
Data type: Array
[
[' #E53333 ', ' #E56600 ', ' #FF9900 ', ' #64451D ', ' #DFC5A4 ', ' #FFE500 '],
[' #009900 ', ' #006600 ', ' #99BB00 ', ' #B8D100 ', ' #60D978 ', ' #00D5FF '],
[' #337FE5 ', ' #003399 ', ' #4C33E5 ', ' #9933E5 ', ' #CC33E5 ', ' #EE33EE '],
[' #FFFFFF ', ' #CCCCCC ', ' #999999 ', ' #666666 ', ' #333333 ', ' #000000 ']
]
Above is the default value
----------------------------------------------------------------------------------
"Ctrl+enter Submit"
Aftercreate:function () {
var self=this;
Kindeditor.ctrl (Self.edit.doc, function () {
Self.sync ();
Perform other events
});
}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
var editor=kindeditor.create (' #nr ');
"Editor gets Focus"
Editor.focus ();
"Get Editor HTML content"
var html=editor.html ();
"Get editor Plain text content"
var text=editor.text ();
"Remove Editor"
Editor.remove ();
"Set editor HTML"
Editor.html (' <strong> editor Content </strong> ');
"Set editor plain text content, display HTML code directly"
Editor.text (' <strong> editor Content </strong> ');
"Determine if editor content is empty"
if (Editor.isempty ()) {
Alert (' Please enter content ');
return false;
}
"Inserts the specified HTML content into the editor area at the cursor."
editor.inserthtml (' <strong> insert content </strong> ');
"adds the specified HTML content to the last position in the editor area. 】
editor.appendhtml (' <strong> supplemental Content </strong> ');
"Editor Toggle Full-screen Mode"
Editor.fullscreen ();
"Set editor read-only status"
Editor.readonly (FALSE); True: Read-only, false: cancel Read-only
==================================================================================
Browse Server Select files that have been uploaded
① must refer to the editor's Default.css file first
<link rel= "stylesheet" type= text/css "href=". /editor/themes/default/default.css "/>
② must refer to two JavaScript files
<script type= "Text/javascript" src= ". /editor/kindeditor-min.js "></script>
<script type= "Text/javascript" src= ". /editor/lang/zh_cn.js "></script>
③ Concrete Realization Method

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
var editor = Kindeditor.editor ();
$ (' #filemanager '). Click (function () {
Editor.loadplugin (' FileManager ', function () {//Load Plugin
Editor.plugin.filemanagerDialog ({
ViewType: ' View ',//display mode, there are two different view (thumbnail) and list (details)
DirName: ' Image ',
Select the file under the specified folder to view "Include files under Subdirectories", by default only Image,flash,media,file four, and if you need to add a custom folder, you can modify the 40th line of the asp/file_manager_json.asp file, for example.
Clickfn:function (URL, title) {//Choose to execute the following code after playing the file
$ (' #url '). val (URL);
Editor.hidedialog (); Hide Browse Server dialog box
}
});
});
});
});
</script>

"Upload local files to server"
① Referencing CSS Files
<link rel= "stylesheet" type= text/css "href=". /editor/themes/default/default.css "/>
② Reference editor JavaScript file
<script type= "Text/javascript" src= ". /editor/kindeditor-min.js "></script>
③ Concrete Realization Method

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
var Uploadbutton = Kindeditor.uploadbutton ({
Button:kindeditor (' #upload '),//Note here, you cannot use jquery $
FieldName: ' Imgfile ',//Do not modify
URL: '.. /editor/asp/upload_json.asp?dir=file ',
Upload Handler page, dir parameter has four kinds: flash,media,file, other (picture), upload suffix limit can modify the program page code, such as: upload_json.asp
Afterupload:function (data) {
if (Data.error = = 0) {
var url = kindeditor.formaturl (data.url, ' absolute ');
$ (' #url '). val (URL);
} else {
alert (data.message);
}
},
Aftererror:function (str) {
Alert (' Upload send Error! ');
If you need to display an error message, set such as alert (' ERROR: ' +str '), and delete the above str if you do not need to display it
}
});
Uploadbutton.fileBox.change (function (e) {
Uploadbutton.submit ();
});
});
</script>

"Upload Picture" includes the selection of pictures that the server has uploaded
① Referencing CSS Files
<link rel= "stylesheet" type= text/css "href=". /editor/themes/default/default.css "/>
② Reference editor JavaScript file
<script type= "Text/javascript" src= ". /editor/kindeditor-min.js "></script>
③ refers to a language pack file that must be
<script type= "Text/javascript" src= ". /editor/lang/zh_cn.js "></script>
④ Concrete Realization Method

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
var editor = Kindeditor.editor ({
Allowfilemanager:true//Allow selection of uploaded pictures
});
$ (' #image '). Click (function () {
Editor.loadplugin (' Image ', function () {
Editor.plugin.imageDialog ({
IMAGEURL: $ (' #url '). Val (),
Clickfn:function (URL, title, width, height, border, align) {
$ (' #url '). val (URL); Other parameters can be used.
Editor.hidedialog ();
}
});
});
});
});
</script>

Http://www.cnblogs.com/edielei/archive/2011/11/12/2246450.html