kindeditor在线编辑器的使用心得

其他 2018-10-31 23:21:54 阅读次数: 0

转自 http://blog.csdn.net/chongxin1/article/details/53615354

1、 如何声明引用？

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="utf-8" />
  6. <title>kindeditor在线编辑器的使用心得</title>
  7. <!-- 添加kindeditor的引用 -->
  8. <script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
  9. <script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
  10. </head>
  11.  
  12. <script>
  13. var editor;
  14. KindEditor.ready(function(K){
  15. editor = K.create('textarea[id="content"]',{
  16. allowFileManager : true
  17. });
  18. });
  19. </script>
  20.  
  21. <body>
  22. <textarea id="content" style="width:100%;height: 500px;"></textarea>
  23. </body>
  24.  
  25. </html>

 

2、设置简单编辑器模式
  1. 不知道为什么被官方屏蔽了，有需要的可以下载最后的《KindEditor例子》

3、如何获取kindeditor中的值？

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>03如何获取kindeditor中的值</title>
  6. <!-- 添加kindeditor的引用 -->
  7. <script type="text/javascript" charset="utf-8" src="js/kindeditor/kindeditor.js"></script>
  8. <script type="text/javascript" charset="utf-8" src="js/kindeditor/lang/zh_CN.js"></script>
  9. </head>
  11. <script>
  12. var editor;
  13. KindEditor.ready(function(K){
  14. editor = K.create('textarea[id="content"]',{
  15. allowFileManager : true,
  16. //设置编辑器为简单模式
  17. items:[
  18. 'fontname','fontsize','i','forecolor','hilitecolor','bold','italic','underline',
  19. 'removeformat','i','justifyleft','justifycenter','justifyright','insertorderedlist',
  20. 'insertunorderedlist','i','emoticons','image','link'
  21. ],
  22. //这行代码就是关键所在，当失去焦点时执行this.sync()
  23. afterBlur : function() {
  24. this.sync();//这个函数就是同步kindeditor的值到textarea文本框
  25. }
  26. });
  27. });
  28. //获取kindeditor中的值
  29. function showKindeditor(){
  30. //获取textarea中的值并在div中展示
  31. document.getElementById("showKindeditor").innerHTML = document.getElementById("content").value;
  32. }
  33. </script>
  35. <body>
  36. <div style="width:38%;height: 500px;border: 1px solid black;float: left;display: inline-block;">
  37. <div id="showKindeditor" style="width:100%;height: 70%;"></div>
  38. <button onclick="showKindeditor()">显示kindeditor中的值</button>
  39. </div>
  40. <textarea id="content" style="width:60%;height: 500px;"></textarea>
  41. </body>
  42. </html>

4、如何设置kindeditor的值？
  1. //不知道为什么被官方屏蔽了，有需要的可以下载最后的《KindEditor例子》

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.  
   
  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.  
   
  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为不可编辑状态
 
  
 
   //不知道 
   为什么被官方屏蔽了，有需要的可以下载最后的《 
   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']);
 
  
 然后就可以在只读模式下进行全屏展现了：
 
  
 
 
  
 全屏之后又会变成可编辑模式，解决办法：
 
  
 afterFocus : function(){//设置为不可编辑，只是内容   
 
  
      this.blur();
 
  
 }
 
  
   
 
  
  9、附上源码
 
  
  
 
  
 kindeditor-4.0帮助文档.chm
 
  
 kindeditor插件包.zip
 
  
 KindEditor例子.zip 
 
 
 
 
 
 
 

 

 
 

 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. 不知道为什么被官方屏蔽了，有需要的可以下载最后的《KindEditor例子》
    2.  

 

 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.  
 
  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.  
 
  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. //不知道为什么被官方屏蔽了，有需要的可以下载最后的《KindEditor例子》
    2.  

 

 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.  
 
  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.  
 
  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为不可编辑状态
 

 
 //不知道 
 为什么被官方屏蔽了，有需要的可以下载最后的《 
 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']);
 

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

 
 

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

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

      this.blur();
 

 }
 

   
 

  9、附上源码
 

  
 

 kindeditor-4.0帮助文档.chm
 

 kindeditor插件包.zip
 

 KindEditor例子.zip 

                    
                    
                    
                    
                    
                    
                    
                    
                    

                        
猜你喜欢

                        

                            
                            
                        

                    


                    
转载自blog.csdn.net/Baple/article/details/55806352

                    

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

                    


                

            

            


                

                    

                        
                        
                        
                        
                    


                    

                        

                            

                                今日推荐
                            


                            

                        

                    

                    

                        

                            

                                基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
                            

                        

                        

                            

                                美国拟限制 AI 大模型出口中国和俄罗斯
                            

                        

                        

                            

                                苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
                            

                        

                        

                            

                                openKylin 社区生态委员会第六次会议圆满召开
                            

                        

                        

                            

                                阿里云正式发布通义千问 2.5
                            

                        

                        

                            

                                Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
                            

                        

                        

                            

                                Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
                            

                        

                        

                            

                                Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
                            

                        

                        

                            

                                《2024 年一季度互联网投融资运行情况》研究报告
                            

                        

                        

                            

                                报告：Django 仍然是 74% 开发者的首选
                            

                        

                        

                            

                                15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
                            

                        

                        

                            

                                TIOBE 5 月榜单：Fortran “复活”进入 Top 10
                            

                        

                        
                        
                    

                


                

                    

                        

                            

                                周排行
                            

                            

                        

                    

                    

                        

                            

                                记一下去大梅沙的准备（2018-05-26）
                            

                        

                        

                            

                                Spring 注解 事务
                            

                        

                        

                            

                                基于HTTP协议的客户端缓存
                            

                        

                        

                            

                                阿里云rds 备份和还原
                            

                        

                        

                            

                                [PHP] 几个拖慢 PHP 程序/API 运行速度的点
                            

                        

                        

                            

                                python 代码风格------------PEP8规则
                            

                        

                        

                            

                                js控制json生成菜单——自制菜单（一）
                            

                        

                        

                            

                                将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
                            

                        

                        

                            

                                微信小程序转支付宝小程序
                            

                        

                        

                            

                                Qt551.窗口滚动条
                            

                        

                    

                

                

                    

                        

                            

                                每日归档
                            

                            

                                更多
                            

                            

                        

                    

                    

                        

                            2024-05-13(18)
                        

                        

                            2024-05-12(0)
                        

                        

                            2024-05-11(38)
                        

                        

                            2024-05-10(38)
                        

                        

                            2024-05-09(35)
                        

                        

                            2024-05-08(42)
                        

                        

                            2024-05-07(14)
                        

                        

                            2024-05-06(40)
                        

                        

                            2024-05-05(0)
                        

                        

                            2024-05-04(7)
                        

                    

                


            


            
        

    






















    


        

            
代码天地 © 2018 codetd.com

            境外服务器
             
            最新电视剧2022