kindeditor编辑器的使用

1.官方下载kindeditor，http://kindeditor.net/down.php，我下载的是kindeditor-4.1.11-en.zip，解压文件夹，将整个文件夹添加到项目中去，我这里是添加到项目的plugins文件夹下的，如图：

2.在html页面中，引入相关js、css，如下图所示：

3.在页面中添加textarea控件：

<textarea id="textarea_id" style="width:700px;height:300px;visibility:hidden;"></textarea>

4.编辑javascript代码：

<script type="text/javascript"> 
    KindEditor.ready(function(K) {
        window.editor1 = K.create("#textarea_id"); });
</script>

效果图如下：但是这时编辑器的上传文件功能还不能用！如果需要此功能还需做进一步操作。

5.上传文件功能操作：

 选择程序语言：我这里使用的是ASP.NET，注意这里的路径问题，根据你当前页面所处的位置来适当调整。

// ASP
KindEditor.ready(function(K) {
        window.editor1 = K.create('#textarea_id', {
                uploadJson : '../asp/upload_json.asp',//注意确认你的文件路径是否正确
                fileManagerJson : '../asp/file_manager_json.asp',
                allowFileManager : true
        });
});
// ASP.NET
KindEditor.ready(function(K) {
        window.editor1 = K.create('#textarea_id', {
                uploadJson : '../asp.net/upload_json.ashx',//注意确认你的文件路径是否正确
                fileManagerJson : '../asp.net/file_manager_json.ashx',
                allowFileManager : true
        });
});
// JSP
KindEditor.ready(function(K) {
        window.editor1 = K.create('#textarea_id', {
                uploadJson : '../jsp/upload_json.jsp',//注意确认你的文件路径是否正确
                fileManagerJson : '../jsp/file_manager_json.jsp',
                allowFileManager : true
        });
});

6.本以为到第五步就可以轻轻松松上传图片咯。结果发现还是不行，出现“目录不存在”的问题。原来打开asp.net/upload_json.ashx和asp.net/file_manager_json.ashx两个文件，发现文件保存路径如下：

      

噢，恍然大悟，原来下载的工具包里面没有包含attached这个目录，所以这需要我们手动添加attached目录，如下所示：

7.大功告成，点击图片上传，选择本地上传，效果如下：

8.获得编辑器的html内容:    editor1.html();

9.工具栏的自定义：

默认情况下，工具栏中显示了所有操作项。如果你觉得工具栏中有些项是你不需要用到的，那么可以自定义显示项。通过items来设置显示项。

KindEditor.ready(function(K) {
        window.editor1 = K.create("#content_1", {
            uploadJson: '../../../plugins/kindeditor-4.1.11/asp.net/upload_json.ashx',
            fileManagerJson: '../../../plugins/kindeditor-4.1.11/asp.net/file_manager_json.ashx',
            allowFileManager: true,
            items: ["source", "|", "undo", "redo", "|", "preview", "print", "template", "code", "cut", "copy", "paste", "plainpaste", "wordpaste","|", "justifyleft", "justifycenter", "justifyright", "justifyfull", "insertorderedlist", "insertunorderedlist", "indent", "outdent", "subscript", "superscript", "clearhtml", "quickformat", "selectall", "|", "fullscreen", "/","formatblock", "fontname", "fontsize", "|", "forecolor", "hilitecolor", "bold", "italic", "underline", "strikethrough",  "lineheight", "removeformat", "|", "image", "multiimage","flash", "media", "insertfile", "table", "hr", "emoticons", "baidumap",   "pagebreak", "anchor", "link", "unlink", "|", "about"],
        });
    });

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 暂时先写到这里，后续再补充啦~~~~~~~