KindEditor编辑器使用

时间:2022-08-31 15:06:56

首先将下载的KindEditor包放到WebRoot下,该包下的文件有如下:

KindEditor编辑器使用


第二、在页面中引入相关css和js

<link rel="stylesheet" href="/KindEditor/themes/default/default.css" />
<link rel="stylesheet" href="/KindEditor/plugins/code/prettify.css" />
<script charset="utf-8" src="/KindEditor/kindeditor.js"></script>
<script charset="utf-8" src="/KindEditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="/KindEditor/plugins/code/prettify.js"></script>

第三、加载方式如下:

KindEditor.ready(function(K) {
editor1 = K.create('textarea[name="body"]', {
cssPath : '/KindEditor/plugins/code/prettify.css',
uploadJson : '/KindEditor/jsp/upload_json.jsp',
fileManagerJson : '/KindEditor/jsp/file_manager_json.jsp',
allowFileManager : true,
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'multiimage', 'link' , 'table'],
afterBlur:function(){this.sync();}
});
});

此时是KindEditor的简单模式,可以根据自己需要添加编辑器功能;若去掉items后则为复杂模式。

下图为简单模式样式:

KindEditor编辑器使用