kindeditor在线编辑器的使用心得

1、 如何声明引用？



    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3.  
    4. 

  4. <head>
    5. 

  5. <meta charset="utf-8" />
    6. 

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

  7. <!-- 添加kindeditor的引用 -->
    8. 

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

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

  10. </head>
    11. 

  11.  
    12. 

  12. <script>
    13. 

  13. var editor;
    14. 

  14. KindEditor.ready(function(K){
    15. 

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

  16.  allowFileManager : true
    17. 

  17. });
    18. 

  18. });
    19. 

  19. </script>
    20. 

  20.  
    21. 

  21. <body>
    22. 

  22. <textarea id="content" style="width:100%;height: 500px;"></textarea>
    23. 

  23. </body>
    24. 

  24.  
    25. 

  25. </html>
    26. 



 


2、设置简单编辑器模式




    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

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

  6. <!-- 添加kindeditor的引用 -->
    7. 

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

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

  9. </head>
    10. 

  10. 

  11. <script>
    12. 

  12. var editor;
    13. 

  13. KindEditor.ready(function(K){
    14. 

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

  15.  allowFileManager : true,
    16. 

  16. //设置编辑器为简单模式
    17. 

  17.  items:[
    18. 

  18. 'fontname','fontsize','i','forecolor','hilitecolor','bold','italic','underline',
    19. 

  19. 'removeformat','i','justifyleft','justifycenter','justifyright','insertorderedlist',
    20. 

  20. 'insertunorderedlist','i','emoticons','image','link'
    21. 

  21. ]
    22. 

  22. });
    23. 

  23. });
    24. 

  24. </script>
    25. 

  25. 

  26. <body>
    27. 

  27. <textarea id="content" style="width:100%;height: 500px;"></textarea>
    28. 

  28. </body>
    29. 

  29. </html>
    30. 



3、如何获取kindeditor中的值？




    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

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

  6. <!-- 添加kindeditor的引用 -->
    7. 

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

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

  9. </head>
    10. 

  10. 

  11. <script>
    12. 

  12. var editor;
    13. 

  13. KindEditor.ready(function(K){
    14. 

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

  15.  allowFileManager : true,
    16. 

  16. //设置编辑器为简单模式
    17. 

  17.  items:[
    18. 

  18. 'fontname','fontsize','i','forecolor','hilitecolor','bold','italic','underline',
    19. 

  19. 'removeformat','i','justifyleft','justifycenter','justifyright','insertorderedlist',
    20. 

  20. 'insertunorderedlist','i','emoticons','image','link'
    21. 

  21. ],
    22. 

  22. //这行代码就是关键所在，当失去焦点时执行this.sync()
    23. 

  23.  afterBlur : function() {
    24. 

  24. this.sync();//这个函数就是同步kindeditor的值到textarea文本框
    25. 

  25. }
    26. 

  26. });
    27. 

  27. });
    28. 

  28. //获取kindeditor中的值
    29. 

  29. function showKindeditor(){
    30. 

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

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

  32. }
    33. 

  33. </script>
    34. 

  34. 

  35. <body>
    36. 

  36. <div style="width:38%;height: 500px;border: 1px solid black;float: left;display: inline-block;">
    37. 

  37. <div id="showKindeditor" style="width:100%;height: 70%;"></div>
    38. 

  38. <button onclick="showKindeditor()">显示kindeditor中的值</button>
    39. 

  39. </div>
    40. 

  40. <textarea id="content" style="width:60%;height: 500px;"></textarea>
    41. 

  41. </body>
    42. 

  42. </html>
    43. 



4、如何设置kindeditor的值？




    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

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

  6. <!-- 添加kindeditor的引用 -->
    7. 

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

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

  9. </head>
    10. 

  10.  
    11. 

  11. <script>
    12. 

  12. var editor;
    13. 

  13. KindEditor.ready(function(K){
    14. 

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

  15.  allowFileManager : true
    16. 

  16. });
    17. 

  17. });
    18. 

  18. //设置kindeditor中的值
    19. 

  19. function setKindeditor(){
    20. 

  20. //kindeditor支持html的解析
    21. 

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

  22. }
    23. 

  23. </script>
    24. 

  24. 

  25. <body>
    26. 

  26. <textarea id="content" style="width:60%;height: 500px;"></textarea>
    27. 

  27. <button onclick="setKindeditor();">设置kindeditor的值</button>
    28. 

  28. </body>
    29. 

  29. </html>
    30. 



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




    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

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

  6. <!-- 添加kindeditor的引用 -->
    7. 

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

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

  9. </head>
    10. 

  10. 

  11. <script>
    12. 

  12. var index = 1;
    13. 

  13. var editor;
    14. 

  14. KindEditor.ready(function(K){
    15. 

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

  16.  allowFileManager : true,
    17. 

  17.  afterChange : function(){
    18. 

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

  19. }
    20. 

  20. });
    21. 

  21. });
    22. 

  22. </script>
    23. 

  23. 

  24. <body>
    25. 

  25. <!--overflow:auto;溢出时自动显示滚动条-->
    26. 

  26. <div id="showKindeditor" style="overflow:auto;width:38%;height: 500px;border: 1px solid black;float: left;display: inline-block;">
    27. 

  27. <h3>用于打印日志</h3>
    28. 

  28. </div>
    29. 

  29. <textarea id="content" style="width:60%;height: 500px;"></textarea>
    30. 

  30. </body>
    31. 

  31. </html>
    32. 



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




    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

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

  6. <!-- 添加kindeditor的引用 -->
    7. 

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

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

  9. </head>
    10. 

  10. 

  11. <script>
    12. 

  12. var editor;
    13. 

  13. KindEditor.ready(function(K){
    14. 

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

  15.  allowFileManager : true
    16. 

  16. });
    17. 

  17. //设置kindeditor为不可编辑状态
    18. 

  18.  editor.readonly(true);
    19. 

  19. });
    20. 

  20. </script>
    21. 

  21. 

  22. <body>
    23. 

  23. <textarea id="content" style="width:60%;height: 500px;"></textarea>
    24. 

  24. </body>
    25. 

  25. </html>
    26. 



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、附上源码


 下载地址 ：https://gitee.com/KingXin666/KindEditor


 

              


 






            

            
posted @ 
2017-08-08 14:18 
四叶草Grass 
阅读(722) 
评论(0) 
编辑 
收藏 
举报