kindeditor線上編輯器的使用心得
阿新 • • 發佈：2018-10-31
轉自 http://blog.csdn.net/chongxin1/article/details/53615354
1、 如何宣告引用？
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>kindeditor線上編輯器的使用心得</title><!-- 新增kindeditor的引用 --><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>
2、設定簡單編輯器模式
- 不知道為什麼被官方遮蔽了，有需要的可以下載最後的《KindEditor例子》
3、如何獲取kindeditor中的值？
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>03如何獲取kindeditor中的值</title><!-- 新增kindeditor的引用 --><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 onclick="showKindeditor()">顯示kindeditor中的值</button></div><textarea id="content" style="width:60%;height: 500px;"></textarea></body></html>
4、如何設定kindeditor的值？
- //不知道為什麼被官方遮蔽了，有需要的可以下載最後的《KindEditor例子》
5、如何監聽編輯器內容發生改變的事件
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>05如何監聽編輯器內容發生改變的事件</title>
- <!-- 新增kindeditor的引用 -->
- <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>
- <!--overflow:auto;溢位時自動顯示滾動條-->
- <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>
6、設定kindeditor為不可編輯狀態
//不知道 為什麼被官方遮蔽了，有需要的可以下載最後的《 KindEditor例子》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']);
然後就可以在只讀模式下進行全屏展現了：
全屏之後又會變成可編輯模式，解決辦法：