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

4、如何设置kindeditor的值？

  1. //不知道为什么被官方屏蔽了，有需要的可以下载最后的《KindEditor例子》

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>05如何监听编辑器内容发生改变的事件</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>
  10. <script>
  11. var index = 1;
  12. var editor;
  13. KindEditor.ready(function(K){
  14. editor = K.create('textarea[id="content"]',{
  15. allowFileManager : true,
  16. afterChange : function(){
  17. document.getElementById("showKindeditor").innerHTML += "编辑器内容发生改变"+(index++) + "<br/>";
  18. }
  19. });
  20. });
  21. </script>
  22. <body>
  23. <!--overflow:auto;溢出时自动显示滚动条-->
  24. <div id="showKindeditor" style="overflow:auto;width:38%;height: 500px;border: 1px solid black;float: left;display: inline-block;">
  25. <h3>用于打印日志</h3>
  26. </div>
  27. <textarea id="content" style="width:60%;height: 500px;"></textarea>
  28. </body>
  29. </html>

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 


kindeditor在线编辑器的使用心得相关推荐

  1. KindEditor 在线编辑器

    KindEditor 在线编辑器 http://www.kindsoft.net/demo.php

  2. 解决kindeditor在线编辑器 过滤dl、dd、dt的两种方法

    <div id="operate"> <dl> <dt>数字遗产保险箱操作方式</dt> <dd>数字遗产保险箱是一个具 ...

  3. html4.0编辑器,KindEditor HTML(在线编辑器)

    KindEditor是在国内比较受欢迎的HTML在线编辑器,本次更新新增单元格编辑功能,各种按钮(确定.取消.上传等按钮)在不同浏览器上保持相同外观. KindEditor v4.0.4 更新日志: ...

  4. kindeditor在线html编辑器,kindeditor在线HTML编辑器

    kindeditor在线HTML编辑器 Think Defferent Here's to the crazy ones. The misfits. The rebels. The troublema ...

  5. 国产网页在线编辑器kindeditor的使用

    作为以前在使用fckeditor,后来浏览器更新后发现fck编辑不好用(而且是致命的问题,根本不能编辑),而且界面也做的不怎样!后来发现国产中有一款开源的网页在线编辑器,试了一下感觉效果很不错!使用也 ...

  6. 在线编辑器 上传控件

    为什么80%的码农都做不了架构师?>>>    在线编辑器 上传控件 http://kindeditor.net/demo.php 上传控件: 转载于:https://my.osch ...

  7. 基于ThinkPHP的在线编辑器调用

    开源的在线编辑器有很多,比如FCKEditor,UEditor,Kindeditor等,调用方式也都大同小异 下面列举UEditor在线编辑器插件在ThinkPHP里面的应用 1.Ueditor下载地 ...

  8. jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用

    jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...

  9. 好用在线html编辑器,求一款好用的html在线编辑器

    icefruit 下面这几款html在线编辑器推荐给你使用.有详细的介绍你可以按照你的需要选择.RenderaRendera是一个在线的HTML5编辑器,它支持设计或源码浏览同步编辑.你可以在浏览器里 ...

最新文章

  1. 如何提高增加包含大量记录的表的主键字段的效率
  2. 如何利用 C# 实现 K 最邻近算法？
  3. 树形dp ---- 2018年杭电多校第二场 H travel
  4. 《Adobe Acrobat X中文版经典教程》—第1章复 习
  5. ios获取设备信息总结
  6. 单碟1.75T 西数14TB充氦硬盘今年上
  7. 会议中的Meeting App
  8. 神州云科DCN存储管理IP_干货！DCN校园网大二层解决方案详解
  9. Verilog HDL语言设计计数器+加法器
  10. 红橙Darren视频笔记 热更新 bsdiff bspatch 在Android设备上的应用 架构篇1完结篇
  11. Faied to run MSBuild commond CmakeError
  12. 深度学习笔记_卷积神经网络参数计算
  13. WEB测试环境搭建和测试方法大全
  14. python 爬虫——模拟登录古诗文网
  15. 无线通信里的 UAV
  16. 用MinIO对象存储构建企业数据集中备份系统
  17. 【文章整理】一文看懂Cola架构和DDD
  18. C#中包含英文月份的美式日期输出格式
  19. 计算机专业可以考天文学研究生吗,报考南京大学天文系有什么要求？
  20. 【2022年第一期 CANN训练营学习笔记】进阶班应用开发课 大作业1-开发DVPP应用，输入，输出都是JPEG图片，且分辨率不同

热门文章

  1. [每日100问][2011-9-30]iphone开发笔记，今天你肿了么
  2. 物联网无线传输模块 无线通信DTU
  3. kali ifconfig没有wlan0的解决方法
  4. 2020年总结与展望
  5. matlab 稳定系统,MATLAB分析在系统稳定性的应用
  6. MySQL实战——表、索引创建与优化
  7. java编程那些事儿 pdf,科学网—《java编程那些事儿》 前面部分阅读笔记 - 马舒天的博文...
  8. 计算机网络四交换技术,计算机网络数据交换技术发展
  9. Day1-介绍、基本语法、流程控制
  10. Web2.0视觉风格进化论