您的位置：首页 > 其它

kindeditor在线编辑器的使用心得

2017-07-24 00:00 197 查看

1、如何声明引用？

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8"/>

<title>kindeditor在线编辑器的使用心得</title>



<scripttype="text/javascript"charset="utf-8"src="js/kindeditor/kindeditor.js"></script>

<scripttype="text/javascript"charset="utf-8"src="js/kindeditor/lang/zh_CN.js"></script>

</head>

<script>

vareditor;

KindEditor.ready(function(K){

editor=K.create('textarea[id="content"]',{

allowFileManager:true

});

});

</script>

<body>

<textareaid="content"style="width:100%;height:500px;"></textarea>

</body>

</html>

2、设置简单编辑器模式

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>02设置简单编辑器模式</title>



<scripttype="text/javascript"charset="utf-8"src="js/kindeditor/kindeditor.js"></script>

<scripttype="text/javascript"charset="utf-8"src="js/kindeditor/lang/zh_CN.js"></script>

</head>

<script>

vareditor;

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>

<textareaid="content"style="width:100%;height:500px;"></textarea>

</body>

</html>

3、如何获取kindeditor中的值？

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>03如何获取kindeditor中的值</title>



<scripttype="text/javascript"charset="utf-8"src="js/kindeditor/kindeditor.js"></script>

<scripttype="text/javascript"charset="utf-8"src="js/kindeditor/lang/zh_CN.js"></script>

</head>

<script>

vareditor;

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中的值

functionshowKindeditor(){

//获取textarea中的值并在div中展示

document.getElementById("showKindeditor").innerHTML=document.getElementById("content").value;

}

</script>

<body>

<divstyle="width:38%;height:500px;border:1pxsolidblack;float:left;display:inline-block;">

<divid="showKindeditor"style="width:100%;height:70%;"></div>

<buttononclick="showKindeditor()">显示kindeditor中的值</button>

</div>

<textareaid="content"style="width:60%;height:500px;"></textarea>

</body>

</html>

4、如何设置kindeditor的值？

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>04如何设置kindeditor的值</title>



<scripttype="text/javascript"charset="utf-8"src="js/kindeditor/kindeditor.js"></script>

<scripttype="text/javascript"charset="utf-8"src="js/kindeditor/lang/zh_CN.js"></script>

</head>

<script>

vareditor;

KindEditor.ready(function(K){

editor=K.create('textarea[id="content"]',{

allowFileManager:true

});

});

//设置kindeditor中的值

functionsetKindeditor(){

//kindeditor支持html的解析

editor.html("<em><strong>jkdfh</strong></em>");

}

</script>

<body>

<textareaid="content"style="width:60%;height:500px;"></textarea>

<buttononclick="setKindeditor();">设置kindeditor的值</button>

</body>

</html>

5、如何监听编辑器内容发生改变的事件

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>05如何监听编辑器内容发生改变的事件</title>



<scripttype="text/javascript"charset="utf-8"src="js/kindeditor/kindeditor.js"></script>

<scripttype="text/javascript"charset="utf-8"src="js/kindeditor/lang/zh_CN.js"></script>

</head>

<script>

varindex=1;

vareditor;

KindEditor.ready(function(K){

editor=K.create('textarea[id="content"]',{

allowFileManager:true,

afterChange:function(){

document.getElementById("showKindeditor").innerHTML+="编辑器内容发生改变"+(index++)+"<br/>";

}

});

});

</script>

<body>



<divid="showKindeditor"style="overflow:auto;width:38%;height:500px;border:1pxsolidblack;float:left;display:inline-block;">

<h3>用于打印日志</h3>

</div>

<textareaid="content"style="width:60%;height:500px;"></textarea>

</body>

</html>

6、设置kindeditor为不可编辑状态

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>06设置kindeditor为不可编辑状态</title>



<scripttype="text/javascript"charset="utf-8"src="js/kindeditor/kindeditor.js"></script>

<scripttype="text/javascript"charset="utf-8"src="js/kindeditor/lang/zh_CN.js"></script>

</head>

<script>

vareditor;

KindEditor.ready(function(K){

editor=K.create('textarea[id="content"]',{

allowFileManager:true

});

//设置kindeditor为不可编辑状态

editor.readonly(true);

});

</script>

<body>

<textareaid="content"style="width:60%;height:500px;"></textarea>

</body>

</html>

7、如何修改预览（preview）点击之后弹出框的大小？

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

8、kindeditor-4.1.10只读模式下可以全屏

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

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

在kindeditor.js里搜索

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

改为

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

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

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

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

this.blur();

}

9、附上源码

kindeditor-4.0帮助文档.chm

kindeditor插件包.zip

KindEditor例子.zip

下载地址：'target='_blank'>http://pan.baidu.com/s/1bHPOHg

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航