1 首先得和官网的使用步骤一致 引入css,和js
//默认样式,涵盖比较全
<link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
//简单模式,编辑操作只有部分,但是我在用的时候好像没效果,
//如果有哪位大佬无意中点进这篇文章,可否留下您的评论,在下先谢过了。
<link rel="stylesheet" href="/kindeditor/themes/simple/simple.css" />
<script charset="utf-8" src="/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
<link rel="stylesheet" href="/kindeditor/plugins/code/prettify.css" />
<script type="text/javascript" charset="utf-8" src="/kindeditor/plugins/code/prettify.js"></script>
var editor;
//全局变量,在文章内容回显的时候需要加个定时器,编辑器是同步,回显的内容是异步,
//所以说可能数据返回了,但是编辑器还没渲染出来。定时器也是异步操作,在这个短时间内编辑器
//就已经加载出来了。
KindEditor.ready(function(K) {
editor = K.create('#editor_content', {
themeType : 'simple',//我采用的是简单模式,但是没有其效果
width : '700px',
minHeight:'400px',
//items就是要用的操作
items:[
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', '|', 'image',
'hr', 'emoticons','link', 'unlink',
],
cssPath : '/kindeditor/plugins/code/prettify.css',//不是必须
/*allowFileManager : true,*/
uploadJson: '/ss/newEditerUpLoad?token='+getToken(),//对于这个接口后台代码比较特殊
afterUpload : function(url, data, name) {
//this.sync();
if(name=="image" || name=="multiimage"){ //单个和批量上传图片时
var img = new Image();
img.src = url;
img.onload = function(){
//图片必须加载完成才能获取尺寸,限制图片的大小
if(img.width>700) editor.html(editor.html().replace('<img src="' + url + '"','<img src="' + url + '" width="700"'))
}
}
},
});
});