Kindeditor is a multi-browser-compatible online HTML editor with images, file remote and local upload capabilities. First download the kindeditor3.5.5, unzip it on the project JS. http://www.kindsoft.net/down.php
1 Using Kindeditor
How to use Kindeditor in a page, the first is to introduce kindeditor.js files such as:
<script type= "Text/javascript" charset= "Utf-8" src= "${ctx}/js/kindeditor/kindeditor.js" ></script>
Then call its method after the page loads, the following ID: ' Content1 ' corresponds to a <textarea id= "Content1" ></textarea> element in the page, so that you can see the editor in the page, if < The text content already exists in the textarea> element, and when the page is loaded, Kindeditor automatically puts the contents of the <textarea> element into the editor.
$ (document). Ready (function () {
Ke.show ({
ID: ' Content1 ',
Imageuploadjson: ' ${pagecontext.request.contextpath}/manage/news/upload_json.jsp ',
Filemanagerjson: ' ${pagecontext.request.contextpath}/manage/news/file_manager_json.jsp ',
Allowfilemanager:true
});
});
The width and height of the textarea also identify the width, height of the generated editor.
<textarea id= "Content1" name= "Content1" style= "width:700px;height:400px" ></textarea>
<input id= "Content" name= "content" type= "hidden" value= ""/>
When we submit the form, we first get the contents of the editor at the time of submission:
function Funsave ()
{
var s = KE.util.getData ("Content1");
s = KE.util.escape (s); /* Generally do not need to convert special characters */
document.getElementById ("Content"). Value = S;
$ ("#addNewsForm"). Submit ();
}
Configuration Properties for Kindeditor:
Id,textarea the ID of the input box must be set.
Width of the editor, which can be set PX or%, is higher than the width of the TextArea input box style sheet.
Height, editor, can only set PX.
Minwidth,minheight, specifies the minimum width and height of the editor.
FilterMode, which evaluates to True when the HTML code is filtered, false allows any code to be entered.
ResizeMode, the value of 0 can not be dragged to change the size, 1 o'clock to specify the height of change, 2 o'clock to drag change width and height.
Wyswygmode, visual mode or code mode.
Aftercreate, sets the callback function that is executed after the editor is created.
Allowupload,true Displays the upload picture label, false when it is not displayed.
The Browse Server picture feature is displayed when Allowfilemananger,true. The server picture is the directory where we upload the image.
Imageuploadjson, specifies the server-side program that uploads the image. You can refer to the UPLOAD_JSON.JSP program under Kindeditor's JSP directory.
Filemanagerjson, specifies the server-side program that browses the remote picture. You can refer to the FILE_MANAGER_JSON.JSP program under Kindeditor's JSP directory.
Autosetdatamode, True, automatically sets the editor content to the original textarea, which is the KE.util.setData function that executes each time the input is executed.
Aftersetdata, the callback function that executes after the KE.util.setData is executed automatically. Valid when the Autosetdatamode is true.
Shadowmode, the default is true, and the popup layer displays shadows.
Allowpreviewemoticons, the default is true, the mouse on the expression can preview the expression.
Kindeditor in the upload file, is loaded in the pop-up layer kindeditor\plugins\image\image.html This file, which has the file type file domain, and the form uses enctype= "multipart/ Form-data "Upload the file, and then submit the form to ${pagecontext.request.contextpath}/manage/news/upload_json.jsp to complete the upload.
2 several modes:
Simple mode:
Ke.show ({
ID: ' Content2 ',
Resizemode:1,
Allowpreviewemoticons:false,
Allowupload:false,
Items: [
' FontName ', ' fontsize ', ' | ', ' textcolor ', ' bgcolor ', ' bold ', ' italic ', ' underline ',
' Removeformat ', ' | ', ' justifyleft ', ' justifycenter ', ' justifyright ', ' insertorderedlist ',
' Insertunorderedlist ', ' | ', ' emoticons ', ' image ', ' link '
});
Manual load Mode:
<meta charset= "Utf-8"/>
<title>KindEditor</title>
<style>
TEXTAREA {
Display:block;
}
</style>
<script charset= "Utf-8" src= ". /kindeditor.js "></script>
<script>
Ke.init ({
ID: ' Content3 ',
Aftercreate:function (ID) {
KE.util.focus (ID);
}
});
</script>
<body>
<textarea id= "Content3" name= "Content1" style= "width:700px;height:300px;" ></textarea>
<br/>
<input type= "button" name= "button" value= "Load Editor" onclick= "javascript:KE.create (' Content3 ');"/>
<input type= "button" name= "button" value= "Unload editor" onclick= "Javascript:KE.remove (' Content3 ');"/>
</body>
Read-only mode:
Ke.show ({
ID: ' Content1 ',
resizemode:0,
Aftercreate:function (ID) {
KE.toolbar.disable (ID, []);
Ke.readonly (ID);
Ke.g[id].newtextarea.disabled = true;
}
});
Count words:
AfterChange means that statistics are counted every time the user enters the
Ke.show ({
ID: ' Content11 ',
Afterchange:function (ID) {
ke.$ (' Word_count1 '). InnerHTML = Ke.count (ID);
ke.$ (' Word_count2 '). InnerHTML = Ke.count (id, ' text ');
}
});
You have currently entered <span id= "word_count1" >0</span> text. (Word count contains HTML code.) )
You have currently entered <span id= "Word_count2" >0</span> text. (Word count contains plain text, IMG, EMBED, no newline characters, IMG and EMBED are counted as one text.) )
Disable height adjustment:
Ke.show ({//can adjust height, but cannot adjust width
ID: ' Content6 ',
Width: ' 80% ',
Resizemode:1
});
Ke.show ({//height and width cannot be adjusted
ID: ' Content7 ',
resizemode:0
});
Full Screen mode:
Ke.init ({
ID: ' Content1 ',
Aftercreate:function (ID) {
KE.util.focus (ID);
}
});
KE.event.ready (function () {
Ke.create (' Content1 ');
SetTimeout (function () {
ke.plugin[' fullscreen '].click (' content1 ');
}, 1);
});
callback function:
Ke.show ({
ID: ' Content1 ',
Beforecreate:function (ID) {alert (' Start Create editor. ID: ' + id '); },
Aftercreate:function (ID) {alert (' Editor created successfully. ID: ' + id '); },
Afterdialogcreate:function (ID) {Alert (' dialog box created successfully. ID: ' + id '); }
});
JavaScript Dynamic Creation Editor:
<meta charset= "Utf-8"/>
<title>KindEditor</title>
<style>
TEXTAREA {
Display:block;
}
</style>
<script charset= "Utf-8" src= ". /kindeditor.js "></script>
<script>
var editor_id = ' demo_12_id ';
Ke.init ({
ID:EDITOR_ID,
Width: ' 700px ',
Height: ' 300px '
});
KE.event.ready (function () {
var textarea = document.createelement (' textarea ');
Textarea.id = editor_id;
Textarea.name = "Content";
document.getElementById (' Editor_area '). appendchild (textarea);
Ke.create (editor_id);
});
</script>
<body>
<div id= "Editor_area" ></div>
</body>
3 Common functions
Ke.show (config)
Initialize and create the editor, in this function, call Ke.init initialization, and execute the Ke.create creation editor after the DOM is documented.
Ke.init (config)
Sets the initialization parameters for the editor.
Ke.create (ID, mode)
Create an editor, ID, indicating the ID of the <textarea> that corresponds to the editor. mode, optional parameter, specify 1 o'clock Create editor under body, 0 or unspecified when creating editor in front of textarea.
Ke.remove (ID, mode)
Remove the editor with the same parameter meaning as create.
Ke.html (ID)
Get the HTML content of the editor
KE.util.getData (ID)
Gets the HTML content of the editor. function Ibid.
Ke.html (ID, Val)
Sets the HTML content of the editor. Id:string, the id;val:string,html string for the editor.
Ke.text (ID)
Gets the plain text content of the editor.
Ke.text (ID, Val)
Sets the contents of the editor and displays the HTML code directly. Id:string, Editor's id;val:string, text
Ke.selectedhtml (ID)
Gets the currently selected HTML content.
Ke.count (ID, mode)
Gets the number of text in the editor's content. ：
Id:string, Editor's ID
mode:string, optional parameters, the default value is also "HTML", Mode is "HTML" when the number of words to include HTML code, mode "text" contains only plain text, IMG, EMBED.
Ke.isempty (ID)
Determine if the editor has visible content, such as text, pictures, or videos.
Ke.inserthtml (ID, Val)
Inserts the specified HTML content into the editing area at the cursor.
Id:string, Editor's ID
val:string,html string
Ke.appendhtml (ID, Val)
Adds the specified HTML content to the last location in the editing area.
Id:string, Editor's ID
val:string,html string
KE.util.setData (ID)
Set the contents of the editor to the original textarea control.
KE.util.escape (HTML)
Converts special characters in HTML. For example, convert < to <,> convert to >.
Escape:function (str) {
str = str.replace (/&/g, ' & ');
str = str.replace (/</g, ' < ');
str = str.replace (/>/g, ' > ');
str = str.replace (/"/g, ' " ');
return str;
}
4 Upgrading kindeditor3.x to version 4.x
Remove the 3.x version file.
<script charset= "Utf-8" src= "/ke3/kindeditor.js" ></script>
Add a 4.x version file.
<script charset= "Utf-8" src= "/ke4/kindeditor.js" ></script>
<script charset= "Utf-8" src= "/ke4/lang/zh_cn.js" ></script>
Replace JavaScript code
Remove the 3.x version code.
<script>
Ke.show ({
ID: ' editor_id ',
Resizemode:2,
Imageuploadjson: '. /.. /php/upload_json.php '//path relative to plugins/image/image.html
});
</script>
Add the 4.x version code.
<script>
var editor;
Kindeditor.ready (function (K) {
Editor = k.create (' #editor_id ', {
Resizetype:2,
Uploadjson: '. /php/upload_json.php '//relative to the current page path
});
});
</script>
How to use 5kindeditor4
First add the TextArea input box to the location of the editor
<textarea id= "editor_id" name= "Content" style= "width:700px;height:300px;" >
<strong> HTML content </strong>
</textarea>
D must be a unique value on the current page.
The HTML content in the textarea can be achieved by editing, where it is important to note that if you are from a server-side program (ASP, PHP, ASP. NET, etc.), you must convert the HTML special characters (>,<,&, "). For details, please refer to the DEMO.XXX program under each language directory, currently support ASP, ASP, PHP, JSP.
There may be problems with not setting the width and height on some browsers, so it's a good idea to set the width and height. The width and height are available inline style settings, and the parameter settings can be initialized using the editor.
Add the following script to the HTML page.
<script charset= "Utf-8" src= "/editor/kindeditor.js" ></script>
<script charset= "Utf-8" src= "/editor/lang/zh_cn.js" ></script>
<script>
var editor;
Kindeditor.ready (function (K) {
Editor = k.create (' #editor_id ');
});
</script>
The first parameter can be used with other CSS selectors, which only load the editor on the first element when matching multiple textarea
The editor can be configured with the second parameter of the K.create function:
var options = {
Csspath: '/css/index.css ',
Filtermode:true
};
var editor = k.create (' textarea[name= ' content "] ', options);
Get HTML Data
Get HTML content
html = editor.html ();
The value of textarea can be obtained directly after synchronizing the data
Editor.sync ();
html = document.getElementById (' editor_id '). Value; Native API
html = K (' #editor_id '). Val (); Kindeditor Node API
html = $ (' #editor_id '). Val (); Jquery
Set HTML content
editor.html (' HTML content ');
4.x set read-only mode
The property Readonlymode to True is read-only and the default is False.
Uploading files
Kindeditor Default provides ASP, ASP, PHP, JSP uploader, these programs are demo programs, it is recommended not to be used directly in the actual project. If you are sure to use this program directly, please carefully confirm the relevant security settings before use.
Jsp
Kindeditor.ready (function (K) {
K.create (' #textarea_id ', {
Uploadjson: '. /jsp/upload_json.jsp ',
Filemanagerjson: '. /jsp/file_manager_json.jsp ',
Allowfilemanager:true
});
});
Post parameters
Imgfile: File Form name
Dir: Upload type, image, Flash, media, file, respectively
return format (JSON) after uploading
When successful
{
"Error": 0,
"url": "Http://www.example.com/path/to/file.ext"
}
When failed
{
"Error": 1,
"Message": "Error Message"
}
For example:
var editor;
Kindeditor.ready (function (K) {
Editor = k.create (' #content ', {
Resizetype:2,
Uploadjson: ' ${ctx}/page/office/useremail/upload_json.jsp ',
Filemanagerjson: ' ${ctx}/page/office/useremail/file_manager_json.jsp ',
Items: [' fontname ', ' fontsize ', ' | ', ' textcolor ', ' bgcolor ', ' bold ', ' Italic ',
' Underline ', ' removeformat ', ' | ', ' justifyleft ', ' justifycenter ', ' justifyright ', ' insertorderedlist ', ' Insertunorderedlist ', ' | ', ' emoticons ', ' image ', ' link '
});
var huifu= ' ${huifu} ';
if (huifu!= ")
Editor.html (' ${data.content} ');
});
function Geteditordata () {
return editor.html ();
}
*******************
Kindeditor in Firefox and Google Chrome each time the following content is appended to the textarea, we need to delete it:
<div style= "position:absolute;display:none;z-index:9999;" id= "Livemargins_control" ></div>
We need to modify the KE.Util.getData method, because the content of textarea is obtained through this method, so we delete the above Livemargins_control element in this method.
Getdata:function (ID, wyswygmode) {
var g = Ke.g[id];
Wyswygmode = (Wyswygmode = = = undefined)? G.wyswygmode:wyswygmode;
if (!wyswygmode) {
This.innerhtml (G.iframedoc.body, KE.util.execSetHtmlHooks (ID, g.newtextarea.value));
}
Start, this is what I added.
var cl=g.iframedoc.body.childnodes.length;
for (Var i=0;i<cl;i++) {
if (g.iframedoc.body.childnodes[i].id== "Livemargins_control") {
G.iframedoc.body.removechild (G.iframedoc.body.childnodes[i]);
}
}
End
return This.todata (ID, g.iframedoc.body.innerhtml);
}
15 Text Editor
