下载文档原格式
KindEditor取值和赋值使⽤版本：4.1.7根据官⽹提⽰进⾏瘦⾝（看官⽹），配置如下：⼀，webconfig中：<configuration><system.web><compilation debug="true" targetFramework="4.0" /><httpRuntime requestValidationMode="2.0" /></system.web></configuration>⼆、页⾯头部，⼀定要加上ValidateRequest="false"：<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" ValidateRequest="false"Inherits="WebTest.WebForm2" %>以上是避免请求数据检查时，报错：传输数据有风险。
三、HTML代码：<textarea id="textContent" name="Descirpt" cols="70" rows="35" style="width: 700px;height: 400px; visibility: hidden;" enableviewstate="true"></textarea>四、初始化KindEditor并为其赋值，这⾥封装到⼀个⽅法⾥⾯，可以在AJAX请求完成后，调⽤⽅法并把数据绑定到textarea中。
KindEditor编辑器使用方法1. 下载编辑器下载KindEditor 最新版本，下载之后打开examples/index.html 就可以看到演示。
下载页面: /down.php2. 部署编辑器解压kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/Note您可以根据需求删除以下目录后上传到服务器。
∙asp - ASP程序∙ - 程序∙php - PHP程序∙jsp - JSP程序∙examples - 演示文件3. 修改HTML页面1在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id"name="content"style="width:700px;height:300px;"><strong>HTML内容</strong></textarea>Note∙id在当前页面必须是唯一的值。
∙在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。
具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、、PHP、JSP。
∙在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。
宽度和高度可用inline样式设置，也可用编辑器初始化参数设置。
2在该HTML页面添加以下脚本。
<script charset="utf-8"src="/editor/kindeditor.js"></script><script charset="utf-8"src="/editor/lang/zh_CN.js"></script><script>var editor;KindEditor.ready(function(K){editor = K.create('#editor_id');});</script>Note∙第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
kindeditor用法详解
kindeditor是一个基于JavaScript的富文本编辑器，它具有简单易用、功能强大、兼容性好等特点。
下面是对kindeditor用法的一些详细解释。
一、引入kindeditor
在使用kindeditor之前，需要先引入kindeditor的库文件。
可以通过下载kindeditor的压缩包，或者通过CDN引入kindeditor。
例如，通过CDN引入kindeditor的代码如下：
二、创建kindeditor编辑器
在HTML中创建一个textarea元素，并为其指定一个id或class，然后通过JavaScript代码将其转换为kindeditor编辑器。
例如，将id为"editor"的textarea元素转换为kindeditor编辑器的代码如下：
三、使用kindeditor编辑器
使用kindeditor编辑器非常简单，可以通过调用editor对象的方法来执行各种操作。
以下是一些常用的方法：
1.获取编辑器内容：
2.设置编辑器内容：
3.插入图片：
4.插入链接：
5.获取焦点：
6.执行其他操作：
kindeditor还提供了许多其他方法，例如删除选中内容、查找和替换文本、设置样式等。
可以参考kindeditor的官方文档或示例代码来了解更多用法。
细数几款免费好用的在线HTML编辑器先普及一下基本知识：什么叫在线HTML编辑器？说得简单点，在线HTML编辑器就是在网上发帖子、写博客的那个带编辑功能的框框，可以进行图文排版等操作。
当年本菜鸟做网站的时候，曾经自己用javascript编写过一个比较简单的在线HTML编辑器，用于文本内容的排版。
但是因为水平有限，很多功能都无法实现。
后来有了eWebEditor，功能确实强大，但这个编辑器是个收费的软件，并且正因为功能强大，也就显得过重，一些轻量的场合不是太适用。
那有没有既免费、又功能强大、还能适应轻量场合的在线HTML编辑器呢？答案肯定是有的。
这首先要感谢这些年来有一批奉献精神的程序猿们不断推进共享软件的开发，让我们得以享受他们的成果。
一、百度出品的UEditorUEditor是由百度web 前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。
特别要说的是，头条号后台发布文章的编辑器就是用的UEditor!百度UEditorUEditor还有一个轻量版的，叫做UMeditor，简称UM。
UM是为满足广大门户网站对于简单发帖框，或者回复框需求所定制的在线HTML编辑器。
主要特点是容量和加载速度上的改变，主文件的代码量为139k，而且放弃了使用传统的iframe模式，采用了div的加载方式，以达到更快的加载速度和零加载失败率。
UM的第一个使用者是百度贴吧，以经受贴吧每天几亿的pv 的考验，功能设计应当是最优化的了。
当然随着代码的减少，UM的功能对于UE来说还是有所减少，但也有增加，比如拖拽图片上传，chrome的图片拖动改变大小等。
百度UEditor界面二、xhEditor开源HTML编辑器xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。
KindEditr在miniUI中的应用系统：Win7开发环境：Java框架：OSGI前台jsp先定义一个textarea，如下：<textarea id="editor_id"name="editor_id"vtype="rangeChar:1,200"style="width: 80%; height: 370px; visibility:hidden;" runat="server"required="true"></textarea>我把它的取值和赋值都放在了js中，如下：var editorId = "editor_id";//定义变量为富文本IDvar editor = null;//定义富文本//写一个调用方法showeditorfunction showeditor() {//KindEditor.ready();方法用了之后在FireFox中无法编辑，所以用了.create试试editor = KindEditor.create('#' + editorId/*这里是富文本ID*/, {resizeType: 1,//设置只能改变高度allowPreviewEmoticons: false,allowImageUpload: true,afterBlur:function(){this.sync();},//失去焦点(blur)时执行的回调函数。
在画面编辑富文本时，同步数据，如果不写，无法用时取到最新的值，那么保存到数据库的值就是旧的afterCreate:function(){this.sync();}//当我不点击富文本直接进行其他操作时，就靠这个方法同步数据，用a fterBlur是无法同步的items: []//,//控制工具栏显示哪些按钮，不写时默认成全部显示});}新建，要将富文本设置为空时，如下：KindEditor.html("#editor_id","");有试过miniUI提供的editor.html("");，editor.html(null) ;，但是都不行，赋值不成功，在网上看到有大拿用这种写法的，试了发现好用，特别开心。
∙ 1.下载KindEditor最新版本。
打开下载页面。
∙ 2.把kindeditor放在你的网站目录下，随意目录，只要路径设置对就可以！∙ 3.要显示编辑器的位置添加TEXTAREA输入框。
如果已经有TEXTAREA，属性里添加ID即可。
∙代码∙<textarea id="content_1"name="content"style="width:700px;h eight:300px;"></textarea>∙ 4.在相应页面上添加kindeditor的引用，添加如下代码：∙∙代码∙<script type="text/javascript" charset="utf-8" src="/editor/ kindeditor.js"></script><script type="text/javascript">KE.show({id : 'content_1' //TEXTAREA输入框的ID });</script>∙∙src=..... 这里根据你的kindeditor放置位置而变化。
∙怎么获取textarea的文本内容？1.在<textarea id="content_1" name="content" style="width:700px;height: 300px;"></textarea>后面添加隐藏input和button，代码如下：∙代码∙<input id="content_1_1" type="hidden" runat="server" value=""/> <asp:Button ID="Button1" runat="server" Text="保存"OnClientClick="save();" OnClick="Button1_Click" CssClass="i_1" />∙添加事件处理代码1.首先是客户端代码，在服务器代码之前执行，代码如下：∙∙代码∙function save(){var s = KE.util.getData("content_1");s = KE.util.escape(s);document.getElementById("content_1_1").value = s;}∙∙已经在服务器控件中取到了，保存的时候保持content_1_1的value就可以了。
KindEditor 4.1上传图片宽高设置需求：需要将图片设置为自适应，让该图片在任何尺寸的页面中都能正常显示不拉伸，也就是平时使用的给宽度设置百分比，因此需要修改源码。
在网上看了很多文档，有人说要遍历得到的编辑器的内容，找到<img>标签，获取该图片的原始宽高，然后进行修改，我个人表示没有看懂，不清楚怎么实现的。
还有人说要修改kindEditor.js中第3168行附近，在下面代码：var html = '<img src="'+_escape(url)+'" data-ke-src="' + _escape(url) + '" '; 中添加width="'+width+'" height="'+height+'"，我也试了一下，不可用，经过半天时间的研究，基本上实现了图片自适应的效果，下面来分析一下kindEditor中图片部分的源码。
图片中图片相关的源码都封装在plugins/image/image.js中，该文件中主要包括了上传图片的界面，和后台处理，其他不多说，说一下图片上传之后路过的代码部分self.plugin.imageDialog({imageUrl : img ? img.attr('data-ke-src') : 'http://',imageWidth : img ? img.width() : '',imageHeight : img ? img.height() : '',imageTitle : img ? img.attr('title') : '',imageAlign : img ? img.attr('align') : '',showRemote : allowImageRemote,showLocal : allowImageUpload,tabIndex: img ? 0 : imageTabIndex,clickFn : function(url, title, width, height, border, align) { if (img) {img.attr('src', url);img.attr('data-ke-src', url);img.attr('width', width);img.attr('height', height);img.attr('title', title);img.attr('align', align);img.attr('alt', title);} else {self.exec('insertimage', url, title, width, height, border, align);}setTimeout(function() {self.hideDialog().focus();}, 0);}});},上面这段代码，在执行时，第一次上传的图片，获取不到宽和高，也就是clickFn : function(url, title, width, height, border, align) {这一行中width和height都是空值，图片上传后，右键点击图片属性，设置图片宽高，之后可以把宽和高加到HTML代码中，if (img)为图片获取到宽和高的时候，进入，获取不到的时候进入else。
KindEditor使用手册一简单使用方法1. 把所有文件上传到程序所在目录下，例如：http://你的域名/editor/。
2. 在此目录下创建attached文件夹，并把权限改成777。
3. 要添加编辑器的地方加入以下代码。
（原来的TEXTAREA或其它编辑器可以先注释。
）这里[]里的内容要根据你的实际情况修改。
-----------------------------------------------------------------------<input type="hidden" name="[原TEXTAREA名字]" value="[这里放你要编辑的内容]"><script type="text/javascript" charset="utf-8" src="[JS路径]/KindEditor.js"></script><script type="text/javascript">var editor = new KindEditor("editor"); //创建编辑器对象editor.hiddenName = "[原TEXTAREA名字]";editor.editorWidth = "[编辑器宽度,例如：700px]";editor.editorHeight = "[编辑器高度,例如：400px]";editor.show(); //显示//提交时获得最终HTML代码的函数function KindSubmit() {editor.data();}</script>-----------------------------------------------------------------------4. FORM的onsubmit属性里添加KindSubmit()函数。
常⽤HTML富⽂本编辑器常⽤的HTML富⽂本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介这篇⽂章主要介绍了常⽤的HTML富⽂本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介,需要的朋友可以参考下1、UEditorUEditor是由百度web前端研发部开发所见即所得富⽂本web编辑器，具有轻量，可定制，注重⽤户体验等特点，开源基于BSD协议，允许⾃由使⽤和修改代码...主要特点：轻量级：代码精简，加载迅速。
定制化：全新的分层理念，满⾜多元化的需求。
采⽤三层架构：1. 核⼼层：为命令层提供底层API，如range/selection/domUtils类。
2. 命令插件层：基于核⼼层开发command命令，命令之间相互独⽴。
3. 界⾯层：为命令层提供⽤户使⽤界⾯。
满⾜不同层次⽤户的需求。
浏览器兼容兼容Mozilla, MSIE, FireFox, Maxthon,Safari 和Chrome，实现浏览器⽆差别化。
注重细节统⼀不同浏览器下表格选取⽅式。
提供⿊/⽩名单的过滤机制。
更好的word⽀持，实现粘贴转换机制。
稳定性经过专业的QA团队测试，通过上千个测试⽤例，包括⾃动化⽤例和⼿动⽤例，⽬前仍然在不断完善中。
2、CKEditorCKEditor是新⼀代的，是⼀个重新开发的版本。
CKEditor是全球最优秀的⽹页在线⽂字编辑器之⼀，因其惊⼈的性能与可扩展性⽽⼴泛的被运⽤于各⼤⽹站。
可配合使⽤的扩展有在线演⽰：3、TinyMCETinyMCE是⼀个轻量级的基于浏览器的所见即所得编辑器，⽀持⽬前流⾏的各种浏览器，由JavaScript写成。
功能配置灵活简单（两⾏代码就可以将编辑器嵌⼊⽹页中），⽀持AJAX。
另⼀特点是加载速度⾮常快，如果你的服务器采⽤的脚本语⾔是 PHP，那还可以进⼀步优化。
彻底解决asp中KindEditor编辑器无法获得提交的数据问题1. 修改HTML页面1在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id"name="content"style="width:700px;height:300px;"><strong>HTML内容</strong></textarea>Note∙id在当前页面必须是唯一的值。
∙在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。
具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、、PHP、JSP。
∙在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。
宽度和高度可用inline样式设置，也可用编辑器初始化参数设置。
2在该HTML页面添加以下脚本。
<script charset="utf-8"src="/editor/kindeditor.js"></script><script charset="utf-8"src="/editor/lang/zh_CN.js"></script><script>var editor;KindEditor.ready(function(K){editor = K.create('#editor_id');});</script>Note∙第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
Kindeditor控件在PHP 中使用方法详解1、简介：KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。
KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
主要特点：快速：体积小，加载速度快开源：开放源代码，高水平，高品质底层：内置自定义 DOM 类库，精确操作 DOM扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能风格：修改编辑器风格非常容易，只需修改一个 CSS 文件兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera2、首先你需要去kindeditor官网下载目前最新版本的kindeditor文件包，官网：/down.php3、下载后解压打开，会看见如图所示的文件夹这里面包含有ASP、、JSP、php等文件夹，我们这里是在php中应用该控件，所以ASP、、JSP这三个文件夹是可以删除的，当然不删也无所谓4、接下来将所有文件拷贝到你项目的根目录下，如图所示：记得是拷贝到项目根目录下5、新建一个test.php页面，在里面对kindeditor控件进行引用和配置主要包含三部分1）引入css文件，2）定义一个textarea文本框用来显示控件，3）引入JavaScript文件，并且在HTML中嵌入一个js函数来调用控件具体代码如下，本人自己测试通过：<!doctype html><html xmlns="/1999/xhtml"><head><meta charset="UTF-8"><title>kindeditor控件使用</title><!-- 在这里引入css文件 --><link rel="stylesheet"href="kindeditor/themes/default/default.css" /> <link rel="stylesheet"href="kindeditor/plugins/code/prettify.css" /> </head><body><form action="Diary.php"name="myform"method="post"><textarea name="content"style="width:930px; height:630px;margin-top:50px;"></textarea></form></div><!-- 在这里引入JavaScript文件，这些文件都是你下载控件里面的文件，直接引用即可，注意路径一定要正确 --><script charset="utf-8"src="kindeditor/kindeditor.js"></script><script charset="utf-8"src="kindeditor/lang/zh_CN.js"></script><script charset="utf-8"src="kindeditor/plugins/code/prettify.js"></script><script>KindEditor.ready(function(K) {//kindeditor控件调用var editor1=K.create('textarea[name="content"]',{//name=form中textarea的name属性cssPath : '../../kindeditor/plugins/code/prettify.css',uploadJson : '../../kindeditor/php/upload_json.php',fileManagerJson :'../../kindeditor/php/file_manager_json.php',allowFileManager : true,afterCreate : function() {var self = this;K.ctrl(document, 13, function() {self.sync();K('form[name=myform]')[0].submit(); // name=form表单的name属性});K.ctrl(self.edit.doc, 13, function() {self.sync();K('form[name=myform]')[0].submit(); // name=form表单的name属性});}});prettyPrint();});</script></body></html>效果图：5、如果你自己向改变控件显示的效果，打开kindeditor文件目录下的themes文件，里面有一个default.css文件，在里面就可以自己编辑css文件，显示自己需要的效果在相应的位置编辑即可希望能对你有所帮助。
kindeditor 正文格式
在使用 kindeditor 进行编辑的时候，可以按照以下格式进行调整正文的样式：
1. 标题格式：可以使用 H1-H6 标签设置标题的大小和样式，例如：使用 H1 标签设置一级标题，使用 H2 标签设置二级标题，以此类推。
2. 加粗、倾斜和下划线：可以使用 B、I 和 U 标签分别给文字添加加粗、倾斜和下划线效果。
3. 文字对齐：可以使用 DIV 标签设置文字的对齐方式，如左对齐、居中对齐和右对齐等。
4. 文字颜色和背景色：可以使用 FONT 标签设置文字的颜色和背景色，通过设置相应的 CSS 属性来改变颜色。
5. 段落格式：可以使用 P 标签生成段落，在编辑器中按下"Enter"键可以生成新的段落。
6. 引用格式：可以使用 BLOCKQUOTE 标签设置文字的引用样式，将引用的文字加上这个标签来表示。
7. 列表格式：可以使用 UL 和 OL 标签分别表示无序列表和有序列表，可以使用 LI 标签表示列表项。
8. 插入图片和链接：可以使用 IMG 标签插入图片，可以使用
A 标签插入链接。
9. 清除样式：可以使用 REMOVEFORMAT 标签清除选中文字的样式，还可以使用 CLEAR 标签清除浮动样式。
以上是一些常用的正文格式，可以根据具体的需求进行拓展和调整。
在线网页编辑器使用说明使用在线网页编辑器，可以通过浏览器，直接编辑网页的内容。
以“所见即所得”的方式，实现网页图文混排。
在网站管理系统中，大部分的网页内容都可以使用网页编辑器进行图文混排编辑。
甚至可以将现成的网页内容或WORD文档的内容拖放到编辑器中，直接生成网页。
一、在线网页编辑器的基本结构如下图所示：①工具条：包括工具菜单和常用功能的图标按钮②模式切换：可以切换编辑模式、HTML代码模式、预览模式、辅助线编辑模式③编辑框：显示和编辑内容的地方④提交：编辑内容后按“提交”按钮更新内容二、在线网页编辑器工具条说明编辑复制、粘贴、全选、删除、查找功能查看切换编辑模式、HTML代码模式、预览模式、辅助线编辑模式插入插入图片、FLASH、REALPLAYER和MEDIAPLAYER音乐影像、表格、移动字幕、水平线、链接。
修改修改图片属性、FLASH属性、表格和单元格、修改链接和删除链接文本修改文本属性，包括粗体、倾斜、下划线、删除线、上标、下标及文字颜色尺寸等三、在线网页编辑器使用说明a) 如何在编辑框中输入文字？可以直接在编辑框内输入文字。
也可以在其他工具软件（如WORD）中编辑好文字后复制到编辑框中。
b）如何将WORD文档复制到编辑框？可以直接将WORD中编辑好的文章通过复制／粘贴操作，直接拷贝到编辑框中，即方便，又美观。
当然，也可以直接复制来自FrontPage，Dreameweaver等其他网页制作软件制作好的内容。
以下介绍一个复制WORD内容到编辑框的样例：上图是一篇WORD的文档，包括一些文字和表格。
首先选中需要拷贝的内容，按CTRL_C 或按下鼠标右键后选择“复制”，将内容复制到剪贴板中。
然后将光标停留在编辑框中需要插入文档的位置，按Ctrl_V或按鼠标右键选择“粘贴”，将刚才复制的内容粘贴到编辑框中。
通过这样的复制/粘贴操作，WORD文档中编辑好的文字和表格可以很容易得复制到编辑框中，即方便又美观（如左图）。
KindEditor是一个流行的开源富文本编辑器，用于Web开发。
以下是KindEditor的基本用法：1. 引入KindEditor的JS文件：在HTML页面中引入KindEditor的JS文件，可以通过下载或在线引用。
确保在引入JS文件之前已经引入了jQuery库，因为KindEditor是基于jQuery的。
html复制代码<script src="path/to/kindeditor.js"></script>2. 创建KindEditor编辑器：在HTML页面中创建一个textarea元素，然后使用KindEditor的jQuery插件将其转换为富文本编辑器。
html复制代码<textarea id="editor"></textarea>javascript复制代码$(document).ready(function() {var editor = KindEditor.create('textarea[id=editor]', {width: '100%',height: '500px',// 其他配置项...});});3. 使用KindEditor的API：通过KindEditor提供的API，可以实现各种编辑器操作，如获取和设置内容、设置配置项、监听事件等。
可以使用KindEditor的官方文档或示例代码来了解更多API的使用方法。
4. 保存和提交内容：当用户完成编辑后，可以通过KindEditor提供的API获取编辑器中的内容，并将其提交到服务器进行处理。
例如，可以使用editor.html()方法获取编辑器中的HTML内容。
javascript复制代码var content = editor.html();// 将content提交到服务器...以上是KindEditor的基本用法。
KindEditor是一款用Javascript编写的开源在线HTML编辑器，主要用户是让用户在网站上获得可见即可得的编辑效果，开发人员可以用KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。
你可以在其官网了解更多信息，包括演示、文档、下载等。
KindEditor的使用方法也非常简单，下面言小鱼就简单介绍一下其用法，这些内容你可以在KindEditor官网找到。
1、你要把所需的文件下载下来，下载地址去官网找。
2、你要把所需要的文件上传到你的网站，接下来就是引用了。
在需要显示编辑器的位置添加textarea输入框，注意ID在页面中应该是唯一的，不说你也知道。
3、在该HTML页面添加以下脚本：
TIP：第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考编辑器初始化参数（官网有详细介绍）。
4、如果你想获得编辑器中的数据，可以用下面的代码：
KindEditor的使用方法就介绍到这里了，如果您还有不明白的地方可以去官网查找详细资料，相信一定能找到您想要的答案！。
