下载,解压
根据对应的语言,删除其他,比如我用的是java,就留下了jsp,删除了asp asp.net php examples
- 引入
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/kindeditor-4.1.10/kindeditor.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/kindeditor-4.1.10/lang/zh_CN.js">
- 创建textarea节点
<textarea id="editor_id" name="news_context"
style="width:700px;height:250px;visibility:hidden;"></textarea>
- 写一段核心的script
KindEditor.ready(function(K) {
window.editor = K.create("textarea[id='editor_id']",{
resizeType : 1,
allowPreviewEmoticons: false,
allowImageUpload:true,//允许上传图片
allowFileManager:true, //允许对上传图片进行管理
uploadJson:'${pageContext.request.contextPath}/kindeditor-4.1.10/jsp/upload_json.jsp', //上传图片的java代码,只不过放在jsp中
fileManagerJson:'${pageContext.request.contextPath}/kindeditor-4.1.10/jsp/file_manager_json.jsp',
afterUpload: function(){this.sync();}, //图片上传后,将上传内容同步到textarea中
afterBlur: function(){this.sync();}, 失去焦点时,将上传内容同步到textarea中
items : [
'fontname','fontsize', '|','forecolor', 'hilitecolor','bold', 'italic','underline',
'removeformat','|', 'justifyleft','justifycenter', 'justifyright','insertorderedlist',
'insertunorderedlist','|', 'emoticons','link','media','|','image']
});
})
tips:上面这段代码定义了文本编辑器的一些属性,这段代码写完,就可以看到一个完整的文本编辑器了(如果需要更多的工具栏工具,可以参照官方的例子)
- 上传文件的相关设置
需要设置的文件在:
kindeditor-4.1.10/jsp/file_manager_json.jsp
kindeditor-4.1.10/jsp/upload_json.jsp
至于如何设置,里面有中文注释