zoukankan      html  css  js  c++  java

  • 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
    

     
    
              
    


    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  jquery autocomplete
                    
    hibernate 数据缓存
                    
    Python变量类型
                    
    Python基础语法
                    
    Python环境搭建
                    
    Python简介
                    
    python下载地址
                    
    第十、十一章，软件测试和软件演化
                    
    第九章，软件实现
                    
    第八章，面向对象设计
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/yangcx666/p/8723878.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看