kindeditor在线编辑器的使用心得

最新推荐文章于 2024-05-14 19:02:10 发布

chuowen140381

最新推荐文章于 2024-05-14 19:02:10 发布

阅读量381

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3616609/blog/1486347

版权

1、如何声明引用？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>kindeditor在线编辑器的使用心得</title>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
</head>
<script>
var editor;
KindEditor.ready(function(K){
editor = K.create('textarea[id="content"]',{
allowFileManager : true
});
});
</script>
<body>
<textarea id="content" style="width:100%;height: 500px;"></textarea>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02设置简单编辑器模式</title>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
</head>
<script>
var editor;
KindEditor.ready(function(K){
editor = K.create('textarea[id="content"]',{
allowFileManager : true,
//设置编辑器为简单模式
items:[
'fontname','fontsize','i','forecolor','hilitecolor','bold','italic','underline',
'removeformat','i','justifyleft','justifycenter','justifyright','insertorderedlist',
'insertunorderedlist','i','emoticons','image','link'
]
});
});
</script>
<body>
<textarea id="content" style="width:100%;height: 500px;"></textarea>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03如何获取kindeditor中的值</title>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
</head>
<script>
var editor;
KindEditor.ready(function(K){
editor = K.create('textarea[id="content"]',{
allowFileManager : true,
//设置编辑器为简单模式
items:[
'fontname','fontsize','i','forecolor','hilitecolor','bold','italic','underline',
'removeformat','i','justifyleft','justifycenter','justifyright','insertorderedlist',
'insertunorderedlist','i','emoticons','image','link'
],
//这行代码就是关键所在，当失去焦点时执行this.sync()
afterBlur : function() {
this.sync();//这个函数就是同步kindeditor的值到textarea文本框
}
});
});
//获取kindeditor中的值
function showKindeditor(){
//获取textarea中的值并在div中展示
document.getElementById("showKindeditor").innerHTML = document.getElementById("content").value;
}
</script>
<body>
<div style="width:38%;height: 500px;border: 1px solid black;float: left;display: inline-block;">
<div id="showKindeditor" style="width:100%;height: 70%;"></div>
<button οnclick="showKindeditor()">显示kindeditor中的值</button>
</div>
<textarea id="content" style="width:60%;height: 500px;"></textarea>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04如何设置kindeditor的值</title>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
</head>
<script>
var editor;
KindEditor.ready(function(K){
editor = K.create('textarea[id="content"]',{
allowFileManager : true
});
});
//设置kindeditor中的值
function setKindeditor(){
//kindeditor支持html的解析
editor.html("<em><strong>jkdfh</strong></em>");
}
</script>
<body>
<textarea id="content" style="width:60%;height: 500px;"></textarea>
<button οnclick="setKindeditor();">设置kindeditor的值</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05如何监听编辑器内容发生改变的事件</title>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
</head>
<script>
var index = 1;
var editor;
KindEditor.ready(function(K){
editor = K.create('textarea[id="content"]',{
allowFileManager : true,
afterChange : function(){
document.getElementById("showKindeditor").innerHTML += "编辑器内容发生改变"+(index++) + "<br/>";
}
});
});
</script>
<body>
<div id="showKindeditor" style="overflow:auto;width:38%;height: 500px;border: 1px solid black;float: left;display: inline-block;">
<h3>用于打印日志</h3>
</div>
<textarea id="content" style="width:60%;height: 500px;"></textarea>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06设置kindeditor为不可编辑状态</title>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
</head>
<script>
var editor;
KindEditor.ready(function(K){
editor = K.create('textarea[id="content"]',{
allowFileManager : true
});
//设置kindeditor为不可编辑状态
editor.readonly(true);
});
</script>
<body>
<textarea id="content" style="width:60%;height: 500px;"></textarea>
</body>
</html>

找到preview.js文件，修改里面的宽度和高度即可。

kindeditor-4.1.10只读模式下不可以全屏，

对此KindEditor的作者Roddy给出的解决方案是，需要修改源码：

在kindeditor.js里搜索

self.toolbar.disableAll(isReadonly, []);

改为

self.toolbar.disableAll(isReadonly, ['fullscreen']);

然后就可以在只读模式下进行全屏展现了：

全屏之后又会变成可编辑模式，解决办法：

afterFocus : function(){//设置为不可编辑，只是内容

this.blur();

}

下载地址： http://pan.baidu.com/s/1bHPOHg

转载于:https://my.oschina.net/u/3616609/blog/1486347

关注