1、 如何声明引用？



  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

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

  5. <title>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. <script>
    11. 

  11. var editor;
    12. 

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

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

  14. allowFileManager : true
    15. 

  15. });
    16. 

  16. });
    17. 

  17. </script>
    18. 

  18. <body>
    19. 

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

  20. </body>
    21. 

  21. </html>


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. <script>
    11. 

  11. var editor;
    12. 

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

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

  14. allowFileManager : true,
    15. 

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

  16. items:[
    17. 

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

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

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

  20. ]
    21. 

  21. });
    22. 

  22. });
    23. 

  23. </script>
    24. 

  24. <body>
    25. 

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

  26. </body>
    27. 

  27. </html>


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. <script>
    11. 

  11. var editor;
    12. 

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

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

  14. allowFileManager : true,
    15. 

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

  16. items:[
    17. 

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

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

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

  20. ],
    21. 

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

  22. afterBlur : function() {
    23. 

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

  24. }
    25. 

  25. });
    26. 

  26. });
    27. 

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

  28. function showKindeditor(){
    29. 

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

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

  31. }
    32. 

  32. </script>
    33. 

  33. <body>
    34. 

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

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

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

  37. </div>
    38. 

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

  39. </body>
    40. 

  40. </html>


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. <script>
    11. 

  11. var editor;
    12. 

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

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

  14. allowFileManager : true
    15. 

  15. });
    16. 

  16. });
    17. 

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

  18. function setKindeditor(){
    19. 

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

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

  21. }
    22. 

  22. </script>
    23. 

  23. <body>
    24. 

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

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

  26. </body>
    27. 

  27. </html>


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. <script>
    11. 

  11. var index = 1;
    12. 

  12. var editor;
    13. 

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

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

  15. allowFileManager : true,
    16. 

  16. afterChange : function(){
    17. 

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

  18. }
    19. 

  19. });
    20. 

  20. });
    21. 

  21. </script>
    22. 

  22. <body>
    23. 

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

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

  25. <h3>用于打印日志</h3>
    26. 

  26. </div>
    27. 

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

  28. </body>
    29. 

  29. </html>


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. <script>
    11. 

  11. var editor;
    12. 

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

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

  14. allowFileManager : true
    15. 

  15. });
    16. 

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

  17. editor.readonly(true);
    18. 

  18. });
    19. 

  19. </script>
    20. 

  20. <body>
    21. 

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

  22. </body>
    23. 

  23. </html>


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
												


											
kindeditor在线编辑器的使用心得的更多相关文章
	

    
								
  1. 将kindeditor在线编辑器制作成smarty插件
		
    在web开发中,在线编辑器是经常要用到的功能模块,虽说配置在线编辑器没有多大难度,但是每一次编写重复的代码,总是让人感觉不爽. 本篇,就来讲解一下,如何将kindeditor制作成smarty的一个自 ...
    
		
    2. 
						
  2. jsp解决kindeditor在线编辑器struts图片上传问题
		
    1.下载 官网下载ckeditor,解压后去掉不需要的部分,仅需保留plugin,lang,theme文件夹,这三个文件夹中用不到的东西可以删除, 比如lang文件下存放所有语言文件js,仅仅 保留e ...
    
		
    3. 
						
  3. .Net在线编辑器：KindEditor及CkEditor+CkFinder配置说明
		
    Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明 一.KindEditor(免费) KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所 ...
    
		
    4. 
						
  4. 在线编辑器Ckeditor （1） - php （30）
		
    在线编辑器 在线编辑器也称之为所见即所得编辑器,是一种常见的html源码编辑器. 所见即所得:用户在输入的时候,不论是格式和是样式都能被系统原封不动的保存,最后在查看的时候,可以按照用户输入的原来的结 ...
    
		
    5. 
						
  5. 在线编辑器的使用-KindEditor
		
    第一种:KindEditor编辑器 步骤一:加载相应的核心的文件 下载地址:http://kindeditor.net/demo.php <link rel="stylesheet&q ...
    
		
    6. 
						
  6. kindeditor在线文本编辑器过滤HTML的方法
		
    在使用kindeditor文本编辑器时遇到的问题,客户直接从Excel里粘贴文本内容到文本编辑器中(能不能再懒一些),然后不调整粘贴内容直接就保存(你敢不敢再懒一些)!对于这种很无语的行径,我只能对他 ...
    
		
    7. 
						
  7. js组件在线编辑器插件、图表库插件、文件树插件
		
    在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...
    
		
    8. 
						
  8. ASP.NET配置KindEditor文本编辑器-图文实例
		
    1.什么是KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(tex ...
    
		
    9. 
						
  9. 基于thinkphp的在线编辑器kindeditor-v4.1.3
		
    首先,去官网下载最新版的kindeditor,然后把里面asp,jsp,net,example的全删除,然后改名为editor放进public(最外层目录的public)文件夹里面. 在目录lib目录 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Python 封装
			
    # 封装: # 1. 对属性的封装 # 2. 对功能的封装 # 3. 模块 # 4. 包 class Student: def __init__(self, num, name, clazz): se ...
    
			
    2. 
						
  2. Invocation of init method failed; nested exception is java.text.ParseException: '?' can only be specfied for Day-of-Month or Day-of-Week.
			
    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'cronTrigger' ...
    
			
    3. 
						
  3. 2018最新APP Android UI设计规范
			
    设计稿尺寸:从目前市场主流设备尺寸来看,我们要用 1080 x 1920 PX  来做安卓设计稿尺寸. 以1080x1920px作为设计稿标准尺寸的原由: 从中间尺寸向上和向下适配的时候界面调整的幅度 ...
    
			
    4. 
						
  4. 为什么说Java中只有值传递？
			
    一.为什么说Java中只有值传递? 对于java中的参数传递方式中是否有引用传递这个话题,很多的人都认为Java中有引用传递,但是我个人的看法是,Java中只有值传递,没有引用传递. 那么关于对象的传 ...
    
			
    5. 
						
  5. pycharm中如何安装Scrapy库
			
    先打开pycharm软件. 然后先安装pywin32和setuptools库. 安装成功后再尝试Twisted库,如果失败,就去晚上下载一个库:https://www.lfd.uci.edu/~goh ...
    
			
    6. 
						
  6. Unity 3D第三人称视角、用途广泛限定角度(视角不能360度翻转)
			
    Unity第三人称相机视角控制 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分 ...
    
			
    7. 
						
  7. C语言--第七周作业评分（5班）
			
    作业链接:https://edu.cnblogs.com/campus/hljkj/CS2017-5/homework/1304 一.评分要求 要求1 完成PTA第七周所有题,总共两次题,每次12.5 ...
    
			
    8. 
						
  8. EasyUI datagrid 格式 二
			
    单击保存,改表的状态 { field: 'ck', checkbox: true }, $("tr").each(function () { if ($(this).find(&q ...
    
			
    9. 
						
  9. 实验吧—Web——WP之 简单的sql注入之2
			
    直接打开解题连接: 既然是SQL注入,那么我们就要构造注入语句了,这个就要有耐心一个一个去尝试了 输入语句 1'and 1=1 # 和 1'and/**/1=1/**/#后 对比一下,发现是过滤掉了空 ...
    
			
    10. 
						
  10. 《DSP using MATLAB》Problem 5.7
			
    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
    
			
    11.