思享工具箱

kindeditor在线编辑器的使用心得

摘要：
DOCTYPE html˃在线使用kindeditor的经验vareditor；KindEditor。准备就绪；3.如何在kindeditor中获取值--添加对kindedit的引用--
1、如何声明引用？ 
  1. <!DOCTYPEhtml>
  2. <html>
  4. <head>
  5. <metacharset="utf-8"/>
  6. <title>kindeditor在线编辑器的使用心得</title>
  7. <!--添加kindeditor的引用-->
  8. <scripttype="text/javascript"charset="utf-8"src="js/kindeditor/kindeditor.js"></script>
  9. <scripttype="text/javascript"charset="utf-8"src="js/kindeditor/lang/zh_CN.js"></script>
  10. </head>
  12. <script>
  13. vareditor;
  14. KindEditor.ready(function(K){
  15. editor=K.create('textarea[id="content"]',{
  16. allowFileManager:true
  17. });
  18. });
  19. </script>
  21. <body>
  22. <textareaid="content"style="width:100%;height:500px;"></textarea>
  23. </body>
  25. </html>
 2、设置简单编辑器模式 
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>02设置简单编辑器模式</title>
  6. <!--添加kindeditor的引用-->
  7. <scripttype="text/javascript"charset="utf-8"src="js/kindeditor/kindeditor.js"></script>
  8. <scripttype="text/javascript"charset="utf-8"src="js/kindeditor/lang/zh_CN.js"></script>
  9. </head>
  11. <script>
  12. vareditor;
  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. });
  23. });
  24. </script>
  26. <body>
  27. <textareaid="content"style="width:100%;height:500px;"></textarea>
  28. </body>
  29. </html>
 3、如何获取kindeditor中的值？ 
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>03如何获取kindeditor中的值</title>
  6. <!--添加kindeditor的引用-->
  7. <scripttype="text/javascript"charset="utf-8"src="js/kindeditor/kindeditor.js"></script>
  8. <scripttype="text/javascript"charset="utf-8"src="js/kindeditor/lang/zh_CN.js"></script>
  9. </head>
  11. <script>
  12. vareditor;
  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. functionshowKindeditor(){
  30. //获取textarea中的值并在div中展示
  31. document.getElementById("showKindeditor").innerHTML=document.getElementById("content").value;
  32. }
  33. </script>
  35. <body>
  36. <divstyle="width:38%;height:500px;border:1pxsolidblack;float:left;display:inline-block;">
  37. <divid="showKindeditor"style="width:100%;height:70%;"></div>
  38. <buttononclick="showKindeditor()">显示kindeditor中的值</button>
  39. </div>
  40. <textareaid="content"style="width:60%;height:500px;"></textarea>
  41. </body>
  42. </html>
 4、如何设置kindeditor的值？ 
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>04如何设置kindeditor的值</title>
  6. <!--添加kindeditor的引用-->
  7. <scripttype="text/javascript"charset="utf-8"src="js/kindeditor/kindeditor.js"></script>
  8. <scripttype="text/javascript"charset="utf-8"src="js/kindeditor/lang/zh_CN.js"></script>
  9. </head>
  11. <script>
  12. vareditor;
  13. KindEditor.ready(function(K){
  14. editor=K.create('textarea[id="content"]',{
  15. allowFileManager:true
  16. });
  17. });
  18. //设置kindeditor中的值
  19. functionsetKindeditor(){
  20. //kindeditor支持html的解析
  21. editor.html("<em><strong>jkdfh</strong></em>");
  22. }
  23. </script>
  25. <body>
  26. <textareaid="content"style="width:60%;height:500px;"></textarea>
  27. <buttononclick="setKindeditor();">设置kindeditor的值</button>
  28. </body>
  29. </html>
 5、如何监听编辑器内容发生改变的事件 
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>05如何监听编辑器内容发生改变的事件</title>
  6. <!--添加kindeditor的引用-->
  7. <scripttype="text/javascript"charset="utf-8"src="js/kindeditor/kindeditor.js"></script>
  8. <scripttype="text/javascript"charset="utf-8"src="js/kindeditor/lang/zh_CN.js"></script>
  9. </head>
  11. <script>
  12. varindex=1;
  13. vareditor;
  14. KindEditor.ready(function(K){
  15. editor=K.create('textarea[id="content"]',{
  16. allowFileManager:true,
  17. afterChange:function(){
  18. document.getElementById("showKindeditor").innerHTML+="编辑器内容发生改变"+(index++)+"<br/>";
  19. }
  20. });
  21. });
  22. </script>
  24. <body>
  25. <!--overflow:auto;溢出时自动显示滚动条-->
  26. <divid="showKindeditor"style="overflow:auto;width:38%;height:500px;border:1pxsolidblack;float:left;display:inline-block;">
  27. <h3>用于打印日志</h3>
  28. </div>
  29. <textareaid="content"style="width:60%;height:500px;"></textarea>
  30. </body>
  31. </html>
 6、设置kindeditor为不可编辑状态 
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>06设置kindeditor为不可编辑状态</title>
  6. <!--添加kindeditor的引用-->
  7. <scripttype="text/javascript"charset="utf-8"src="js/kindeditor/kindeditor.js"></script>
  8. <scripttype="text/javascript"charset="utf-8"src="js/kindeditor/lang/zh_CN.js"></script>
  9. </head>
  11. <script>
  12. vareditor;
  13. KindEditor.ready(function(K){
  14. editor=K.create('textarea[id="content"]',{
  15. allowFileManager:true
  16. });
  17. //设置kindeditor为不可编辑状态
  18. editor.readonly(true);
  19. });
  20. </script>
  22. <body>
  23. <textareaid="content"style="width:60%;height:500px;"></textarea>
  24. </body>
  25. </html>
 7、如何修改预览（preview）点击之后弹出框的大小？ 
kindeditor在线编辑器的使用心得第1张
找到preview.js文件，修改里面的宽度和高度即可。
kindeditor在线编辑器的使用心得第2张
 8、kindeditor-4.1.10只读模式下可以全屏 
kindeditor-4.1.10只读模式下不可以全屏，
对此KindEditor的作者Roddy给出的解决方案是，需要修改源码：
kindeditor在线编辑器的使用心得第3张
在kindeditor.js里搜索
self.toolbar.disableAll(isReadonly, []);
改为
self.toolbar.disableAll(isReadonly, ['fullscreen']);
然后就可以在只读模式下进行全屏展现了：
kindeditor在线编辑器的使用心得第4张
全屏之后又会变成可编辑模式，解决办法：
afterFocus :function(){//设置为不可编辑，只是内容
this.blur();
}
 9、附上源码 
下载地址 ：https://gitee.com/KingXin666/KindEditor
 标签：#编辑器#textarea#js代码#html代码#charset#editor#js | 浏览：128 | 发布日期：
免责声明：文章转载自《kindeditor在线编辑器的使用心得》仅用于学习参考。如对内容有疑问，请及时联系本站处理。 
上篇Autoit 使用MongoDB 查询总结下篇
宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=
 相关文章 
Spring MVC重定向和转发及异常处理
SpringMVC核心技术---转发和重定向 当处理器对请求处理完毕后，向其他资源进行跳转时，有两种跳转方式：请求转发与重定向。而根据要跳转的资源类型，又可分为两类：跳转到页面与跳转到其他处理器。对于请求转发的页面，也可以是WEB-INF中页面；对于重定向的页面，不能为WEB-INF中的页面。因为重定向相当于用户再次发出一次请求，而用户是不能直接访问WEB...
js获取7天之前的日期或者7天之后的日期
js获取7天之前的日期或者7天之后的日期（网上摘取的，记录自己使用） function fun_date(num) { var date1 = new Date(); //今天时间 var time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date...
Java getBytes字符集问题
今天工作中又一次遇到了java字符集问题，这次是由getBytes方法导致的。      以前的时候，曾经很多次的解决过java字符集以及乱码的问题，以为对这块很了解了，至到今天的又一次深入的学习，才发现以前的认识当中存在的问题，下次就getBytes方法在应用级别进行比较实际的解释。    1、Unicode是一种编码规范，是为解决全球字符通用编码而设计...
第二章：Android Studio概述（一）[学习Android Studio汉化教程]
Android Studio是一个视窗化的开发环境。为了充分利用有限的屏幕空间，不让你束手束脚，Android Studio 在特定的时间仅仅显示一小部分可用窗口。　　除了一些上下文敏感的窗口和上下文相关的窗口显示出来外，其他的仍旧隐藏，除非你主动打开它们。　　或者相反，一些可见的窗口直到你主动隐藏它们。　　为了充分利用Android Studio，你就需...
js给input赋值，后台获取的问题
JS中获取dropdownlist的值 var ddl = document.getElementById("DropDownList_ParkName") var index = ddl.selectedIndex; var Value = ddl.options[index].value; var Text = ddl.options[index].t...
sublime text 2 前端编码神器-快捷键与使用技巧介绍
前言 代码编辑器或者文本编辑器，对于程序员来说，就像剑与战士一样，谁都想拥有一把可以随心驾驭且锋利无比的宝剑，而每一位程序员，同样会去追求最适合自己的强大、灵活的编辑器，相信你和我一样，都不会例外。 如果说“神器”是我能给予一款软件最高的评价，那么我很乐意为它封上这么一个称号。sublime text 2（以下简称ST2）小巧绿色且速度非常快，跨平台支持W...
最新文章
随机推荐
 思享工具箱导航