SoFunction
Updated on 2025-04-13

Summary of common methods for KindEditor online editor

jQuery way to create editor
('#nr'); //Bind the specified ID.
HTML Department
<textarea style="width:680px;height:280px;visibility:visible"></textarea>
----------------------------------------------------------------------------------
allowFileManager [Whether to browse the file uploaded by the server]
The default value is: false
------------------------------------------------------
allowImageUpload [Whether to upload local pictures are allowed]
The default value is: true
----------------------------------------------
allowFlashUpload [Is it allowed to upload Flash]
The default value is: true
----------------------------------------------
allowMediaUpload [Whether to upload multimedia files are allowed]
The default value is: true
------------------------------------------------
pasteType [Set the paste type]
0: Paste is prohibited, 1: Paste in plain text, 2: Paste in HTML (default)
---------------------------------------------------
resizeType [Can you set the editor size change]
0: Cannot change 1: Can only change the height 2: Both width and height can be changed (default)
----------------------------------------------------------
themeType 【Theme Style】
You can set "default" and "simple". You need to introduce it when specifying 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('Create Completed');
}
------------------------------------------
font Size Table 【Specify text size】
Data type: Array
Default values: ['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
-----------------------------------------------------------------------
colorTable [Specify the color value in the color collector]
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']
]
The above is the default value
----------------------------------------------------------------------------------
【Ctrl+Enter Submission】
afterCreate:function(){
var self=this;
(, 13, function() {
();
//Execute other events
});
}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
var editor=('#nr');
【Editor Get Focus】
();
【Get editor HTML content】
var html=();
【Acquiring editor plain text content】
var text=();
【Remove Editor】
();
【Set Editor HTML】
('<strong>Editor Content</strong>');
[Set the editor plain text content and directly display the HTML code]
('<strong>Editor Content</strong>');
【Direction whether the editor content is empty】
if(()){
alert('Please enter content');
return false;
}
【Insert the specified HTML content into the cursor in the editor area】
('<strong>insert content</strong>');
【Add the specified HTML content to the last position in the editor area. 】
('<strong>Add content</strong>');
【Editor toggle full screen mode】
();
【Set the editor's read-only state】
(false); //true: read-only, false: cancel read-only
==================================================================================
【Browse Server】Select uploaded files
① The editor file must be referenced first
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/" />
② Two JavaScript files must be referenced
<script type="text/javascript" src="../Editor/"></script>
<script type="text/javascript" src="../Editor/lang/zh_CN.js"></script>
③ Specific implementation method
Copy the codeThe code is as follows:

<script type="text/javascript">
$(function(){
var editor = ();
$('#filemanager').click(function() {
('filemanager', function() { //Load plugin
({
viewType: 'VIEW', //The display method is two types: VIEW (thumbnail) and LIST (details)
dirName : 'image',
//Select to view the file [including files in subdirectories]. The default is image, flash, media, and file. If you need to add a custom folder, you can modify the file for example: line 40 of the asp/file_manager_json.asp file.
clickFn : function(url, title) { //Select to play with the file and execute the following code
$('#url').val(url);
(); //Hide the browsing server dialog box
}
});
});
});
});
</script>

【Upload local files to server】
① Reference CSS file
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/" />
② Reference editor JavaScript file
<script type="text/javascript" src="../Editor/"></script>
③ Specific implementation method
Copy the codeThe code is as follows:

<script type="text/javascript">
$(function(){
var uploadbutton = ({
button : KindEditor('#upload'), //Note that here, you cannot use jQuery's $
fieldName: 'imgFile', //Don't modify
url : '../Editor/asp/upload_json.asp?dir=file',
// Upload the handler page, there are four types of dir parameters: flash, media, file, others (picture). Upload suffix restrictions can modify the program page code, such as: upload_json.asp
afterUpload : function(data) {
if ( === 0) {
var url = (, 'absolute');
$('#url').val(url);
} else {
alert();
}
},
afterError : function(str) {
alert('Upload send error!');
//If you need to display error messages, you can set such as alert('Error occurred:'+str); if you do not need to display, you can delete the above str
}
});
(function(e) {
();
});
});
</script>

【Upload pictures】Including selecting pictures uploaded by the server
① Reference CSS file
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/" />
② Reference editor JavaScript file
<script type="text/javascript" src="../Editor/"></script>
③ Quoting language package files, required
<script type="text/javascript" src="../Editor/lang/zh_CN.js"></script>
④ Specific implementation methods
Copy the codeThe code is as follows:

<script type="text/javascript">
$(function(){
var editor = ({
allowFileManager: true //Allow to select uploaded images
});
$('#image').click(function() {
('image', function() {
({
imageUrl : $('#url').val(),
clickFn : function(url, title, width, height, border, align) {
$('#url').val(url); //Other parameters can be used.
();
}
});
});
});
});
</script>

/edielei/archive/2011/11/12/