Create an editor using jQuery
KindEditor. create ('# nr'); // bind the specified ID.
HTML Department
<Textarea id = "nr" style = "width: 680px; height: 280px; visibility: visible"> </textarea>
----------------------------------------------------------------------------------
AllowFileManager [whether to allow viewing uploaded files on the server]
The default value is false.
------------------------------------------------------
AllowImageUpload: whether to allow local Image Upload]
The default value is true.
----------------------------------------------
AllowFlashUpload [whether to allow Flash upload]
The default value is true.
----------------------------------------------
AllowMediaUpload [whether to upload multimedia files]
The default value is true.
------------------------------------------------
PasteType [set the paste type]
0: Do not paste, 1: paste only text, 2: HTML paste (default)
---------------------------------------------------
ResizeType [set whether to change the editor size]
0: cannot change 1: only the height can be changed 2: the width and height can be changed (default)
----------------------------------------------------------
ThemeType [themeType style]
You can set "default" and "simple" to indicate that simple.css is used by simple ..
-------------------------------------------------------------
DesignMode [visual mode or code mode]
Data Type: Boolean
The default value is true (visualization)
------------------------------------------
AfterCreate: function () {} [after the editor is created]
AfterCreate: function (){
// Alert ('created successfully ');
}
------------------------------------------
FontSizeTable [specify the text size]
Data Type: Array
Default Value: ['9px ', '10px', '12px ', '14px', '16px ', '18px', '24px ', '32px']
-----------------------------------------------------------------------
ColorTable [specify the color value in the color READER]
Data Type: Array
[
['# E5333333',' # E56600 ',' # FF9900 ',' # 64451D ',' # DFC5A4 ',' # FFE500 '],
['#009900', '#006600', '#99BB00', '# b8d100',' #60D978 ',' # 00D5FF '],
['#337FE5', '#003399', '#4C33E5', '#9933E5', '# CC33E5', '# EE33EE'],
['# Ffff',' # cccccc', '#999999', '#666666', '#333333', '#000000']
]
Above is the default value
----------------------------------------------------------------------------------
[Ctrl + Enter submit]
AfterCreate: function (){
Var self = this;
KindEditor.ctrl(self.edit.doc, 13, function (){
Self. sync ();
// Execute other events
});
}
Please refer to the following link for more information:
Var editor = KindEditor. create ('# nr ');
[Editor obtains focus]
Editor. focus ();
Obtain the HTML content of the editor]
Var html#editor.html ();
[Retrieve the plain text content of the Editor]
Var text = editor. text ();
Remove Editor]
Editor. remove ();
Set Editor HTML]
Editor.html ('<strong> editor content </strong> ');
[Set the editor's plain text content to directly display HTML code]
Editor. text ('<strong> editor content </strong> ');
[Determine whether the editor content is empty]
If (editor. isEmpty ()){
Alert ('Enter the content ');
Return false;
}
Insert the specified HTML content to the cursor in the editor area]
Editor. insertHtml ('<strong> insert content </strong> ');
[Add the specified HTML content to the last position in the editor area .]
Editor. appendHtml ('<strong> Append content </strong> ');
[Switch the full screen mode in the editor]
Editor. fullscreen ();
[Set the editor read-only status]
Editor. readonly (false); // true: Read-only, false: Cancel read-only
========================================================== ========================================================== =
Browse server: select an uploaded file.
① First use the default.css file of the Editor
<Link rel = "stylesheet" type = "text/css" href = "../Editor/themes/default/default.css"/>
② Two JavaScript files must be referenced.
<Script type = "text/javascript" src = "../Editor/kindeditor-min.js"> </script>
<Script type = "text/javascript" src = "../Editor/lang/zh_CN.js"> </script>
③ Specific implementation method
Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
Var editor = KindEditor. editor ();
$ ('# Filemanager'). click (function (){
Editor. loadPlugin ('filemanager', function () {// load the plug-in
Editor. plugin. filemanagerDialog ({
ViewType: 'view', // display method, which can be VIEW (thumbnail) or LIST (details)
DirName: 'image ',
// Select the files in the specified folder (including files in sub-Directories) to be viewed. By default, only four types of files are available: image, flash, media, and file. To add a custom folder, you can modify the 40th line of the asp/file_manager_json.asp file.
ClickFn: function (url, title) {// select a play file and execute the following code
$ ('# Url'). val (url );
Editor. hideDialog (); // hides the Browser Server dialog box.
}
});
});
});
});
</Script>
[Upload a local file to the server]
① Reference a CSS file
<Link rel = "stylesheet" type = "text/css" href = "../Editor/themes/default/default.css"/>
② Reference the editor JavaScript file
<Script type = "text/javascript" src = "../Editor/kindeditor-min.js"> </script>
③ Specific implementation methodCopy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
Var uploadbutton = KindEditor. uploadbutton ({
Button: KindEditor ('# upload'), // note that jQuery's $
FieldName: 'imgfile', // do not modify
Url: '../Editor/asp/upload_json.asp? Dir = FILE ',
// Upload the processing program page. There are four dir parameters: flash, media, file, and others (images). You can modify the code of the program page by specifying the upload suffix, for example, 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 and sending error! ');
// If you need to display the error message, you can set it as alert ('error: '+ str); if you do not need to display it, You can delete the above str
}
});
Uploadbutton. fileBox. change (function (e ){
Uploadbutton. submit ();
});
});
</Script>
[Upload image] includes selecting uploaded images on the server.
① Reference a CSS file
<Link rel = "stylesheet" type = "text/css" href = "../Editor/themes/default/default.css"/>
② Reference the editor JavaScript file
<Script type = "text/javascript" src = "../Editor/kindeditor-min.js"> </script>
③ The language package file must be referenced.
<Script type = "text/javascript" src = "../Editor/lang/zh_CN.js"> </script>
④ Implementation MethodCopy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
Var editor = KindEditor. editor ({
AllowFileManager: true // allows you to select uploaded images.
});
$ ('# 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
