kindEditor富文本框简介及常见问题处理

kindEditor的简介及一些问题处理
一、简介：
KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera 等主流浏览器。

KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序接合。

KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用，2006年7月首次发布 2.0以来，KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率，目前在国内已经成为最受欢迎的编辑器之一。

二、资产监督管理系统中的应用：
2.1 在资产监督管理系统中的具体界面：
在资产监督管理系统中，信息发布中具体信息的信息内容就使用了kindEditor来实现，具体界面如下图：
界面中主要应用了字体，文字颜色，字体背景，字体大小等通用的字体编辑方法和排版格式，还应用了发送表情的方法。

2.2具体的实现方法：
资产质量监督管理系统前台界面主要是通过jsp实现，信息发布也不例外。

调用时需要将lang，themes，plugins三个文件夹都拷贝在jsp文件的目录下。

具体的方法调用如下，
其中，items后的内容为具体的编辑功能引用，items之前的为kindEditor 的调用及一些属性的设置。

相关jsp界面中对js的调用有以下两条：
kindeditor-min.js主要是kindEditor调用的具体方法。

其中：
_version可以看到当前kindEditor的版本信息；k.opitons中包含了该kindEditor所有的默认配置及属性。

Items中为所提供的所有编辑功能。

langType 为各功能的语言显示类型，minWidth，minHeight为编辑器的大小配置，fullScreenMode为是否全屏显示，colorTable中可添加具体字体颜色，fontSizeTable中可添加所需要的字体大小，htmlTags下可进行tags 的各个属性的配置更改。

这些是目前开发任务中能用到的具体参数配置。

kindEditor中还有很多参数可以根据具体需求来进行配置。

所有编辑功能的功能代码都在这js中，可根据不同的业务需求来更改这些功能
zh_CN.js 则为编辑界面中功能显示的字体类型。

本项目中，lang包中有zh_CN.js zh_En.js zh_Tw.js 等三个js文件，分别代表简体字，英文，繁体字。

此外，编辑界面中具体一些编辑功能如字体样式等包含的具体内容也是在这个js文件中配置。

此外，这个js最重要的功能是对kindEditor提供的所有功能进行名称配置，包括各个主要编辑功能及具体功能包含的下属选项的名称配置。

2.3 项目中遇到的一些问题：
1、通过ctrl+c使用粘贴功能时一直会报错，提示console未定义
经过分析，找到两种解决该问题的方法：发达
(1)出现问题的代码如下所示：
dump :function(){
var console='';
console.log('--------------------');
console.log(this.startContainer.nodeType ==3?
this.startContainer.nodeValue :
this.startContainer,this.startOffset);
console.log(this.endContainer.nodeType ==3?
this.endContainer.nodeValue :this.endContainer,
this.endOffset);
}
定义console为空，后面的代码出现功能重复，删掉即可解决问题。

(2)尝试通过配置禁止用户使用ctrl+V的功能热键。

2、字体大小，字体颜色跟据测试组的需求不符
在K.options中的colorTable中配置所需字体颜色；在fontSizeTable中配置所需字体大小。

3、部分功能没有汉字提示，用户可能不清楚该按钮的具体功能
在zh_cn.js的ng中根据具体功能配置相应按钮的解释说明。

4、在本PC上上传的图片，信息发布后，在其他PC上图片无法显示。

经过分析，该功能只是单纯的将图片的路径保存起来，并没有将图片本身复制到相应服务器上。

该问题经过在互联网上寻找方法，发现解决起来比较复杂。

最终通过PI3000平台自带组件实现该功能。

该问题会继续在空闲时间找寻解决方法。

5、信息添加成功后，在信息发布的过程中，信息内容不能修改
解决该问题的方法很简答，在前台的变量定义中 var editor，可以通过该定义使用kindEditor的各种属性控制。

控制制度属性在本js中如下显示：editor.readonly()。

6、获取组件中的编辑内容
editor.html()
三、总结：
在信息发布中对kindEditor的应用过程中，由于组件自身的适应性及强大的编辑功能。

在原代码的基础上并没有做过多的改动。

针对该组件在信息发布中应用出现最多的问题时根据信息发布的需求重新配置了一些编辑功能。

kindEditor总体来说确实是一款功能强大的在线编辑组件。

在jsp界面中引用相当简便。

对于开发人员来说，实现该组件的调用之后，只需根据自身项目的业务需求进行一些功能配置，代码改动几乎很少。

所以，当项目需求一个在线编辑组件时，kindEditor确实是一个相当不错的选择。

合集下载

KINDEditor使用手册

KINDEditor使用手册1、编辑器调用方法2、编辑器属性3、添加自定义插件4、API文档5、常见问题编辑器调用方法1.下载KindEditor最新版本。

打开下载页面2.解压zip文件，将所有文件上传到您的网站程序目录下。

例如：http://您的域名/editor/3.要显示编辑器的位置添加TEXTAREA输入框。

注：id必须指定唯一值，还有有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。

宽度和高度可用inline样式设置，也可用编辑器属性传进去。

<textarea id="editor_id"name="content"cols="100"rows="8"style="width:700px;height:300px;"></textarea>4.该页面添加以下代码。

编辑器属性调用KE.show或KE.init时可以设置以下参数。

1.idTEXTAREA输入框的ID，必须设置。

数据类型：String2.items配置编辑器的工具栏，其中"-"表示换行，"|"表示分隔符。

数据类型：Array默认值：['source','|','fullscreen','undo','redo','print','cut','copy','paste','plainpaste','wordpaste','|','justifyleft','justifycenter','justifyright','justifyfull','insertorderedlist','insertunorderedlist','indent','outdent','subscript','superscript','|','selectall','-','title','fontname','fontsize','|','textcolor','bgcolor','bold','italic','underline','strikethrough','removeformat','|','image','flash','media','advtable','hr','emoticons','link','unlink','|','about']3.width编辑器的宽度，可以设置px或%，比TEXTAREA输入框样式表宽度优先度高。

TinyMCE（富文本编辑器）

TinyMCE（富⽂本编辑器）效果预览：[转]TinyMCE（富⽂本编辑器）在中的使⽤⽅法转⾃：TinyMCE 在中的使⽤⽅法其实挺简单的，从官⽅⽹站下载TinyMCE),然后将⾥⾯的jscripts⽬录拷到你的⽹站⽬录假设你的aspx页⾯中某⼀个地⽅需要⽤到编辑器，则加⼊<asp:TextBox ID=”brand” TextMode=”MultiLine” runat=”server” />并同时在header⾥加⼊：<script src=”../js/tiny_mce/tiny_mce_src.js” type=”text/javascript”></script><script language=”javascript” type=”text/javascript”>tinyMCE.init({mode : “textareas”,theme : “simple”});</script>运⾏页⾯，即可以看到⼀个编辑器出现了，并且你在服务端可以通过brand.Text来获取值(你可能会看到⼀个出错的提⽰，这时只需要将.aspx最开始的<%@ Page ⾥加⼊ValidateRequest=”false”,即可)当然，如果你页⾯中有多个textareas,你可能只希望某⼀个⽤编辑器代替，则上⾯的mode⼀⾏改为:mode : "exact", elements : “对应的ID”需要其它的⽤法，可以到官⽅⽹站查看----------------------------------------------------------------中⽂乱码问题：在设置好TinyMCE的语⾔包后，在中使⽤的时候却总是不正常，⽆法争取读取到语⾔包内容。

仔细研究后发现,原来是因为 2.0默认的HTTPResponse输出的编码是utf-8,⽽⾮中⽂gb2312,或是gb18030、HZ所以就会出现设置正确，但是在页⾯执⾏的时候却出现错误，不能正确读取语⾔包的配置的问题。

KindEditor文本编辑器

配置KindEditor文本编辑器时间:2012-06-16 10:23来源:/ForEvErNoME 作者:ForEvErNoME 点击:1116次我要投稿高质量的空间，完美支持1.0/2.0/3.5/4.0/MVC等之前一直使用CKEditor和CKFinder结合的文本编辑器，偶然机会看到KindEditor，感觉界面挺好看的，示例代码比较多，API文档内容清晰简单，于是下载尝试用下。

1.什么是KindEditorKindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

KindEditor 使用JavaScript 编写，可以无缝地与Java、.NET、PHP、ASP 等程序集成，比较适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

2.前期准备到官网下载最新版的KindEditor 4.11，解压文件后可得文件结构：asp：与asp结合的示例代码：与结合的示例代码attached：上传文件的根目录，可在相关的代码中修改examples：功能演示的示例代码jsp：与jsp结合的示例代码lang：语言包php：与php结合的示例代码plugins：控件的功能代码的实现kindeditor.js：配置文件kindeditor-min.js：集成文件由于使用的是，所以将不需要的文件夹删掉。

其中在中demo.aspx是参考代码，也可以删掉。

3.配置KindEditor（1）新建网站，将精简后的kindeditor文件夹放到网站根目录下下，并且引用kindeditor//bin/LitJSON.dll文件。

（2）新建index.aspx文件，引入相关文件<link href="kindeditor/plugins/code/prettify.css" rel="stylesheet" type="text/css" /> <script src="kindeditor/lang/zh_CN.js" type="text/javascript"></script><script src="kindeditor/kindeditor.js" type="text/javascript"></script><script src="kindeditor/plugins/code/prettify.js" type="text/javascript"></script> <script type="text/javascript">KindEditor.ready(function (K) {var editor = K.create('#content', {//上传管理uploadJson: 'kindeditor//upload_json.ashx',//文件管理fileManagerJson: 'kindeditor//file_manager_json.ashx',allowFileManager: true,//设置编辑器创建后执行的回调函数afterCreate: function () {var self = this;K.ctrl(document, 13, function () {self.sync();K('form[name=example]')[0].submit();});K.ctrl(self.edit.doc, 13, function () {self.sync();K('form[name=example]')[0].submit();});},//上传文件后执行的回调函数,获取上传图片的路径afterUpload : function(url) {alert(url);},//编辑器高度width: '700px',//编辑器宽度height: '450px;',//配置编辑器的工具栏items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste','plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright','justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/','formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold','italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage','flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak','anchor', 'link', 'unlink', '|', 'about' ]});prettyPrint();});</script>（3）在页面中添加一个textbox控件，将id命名为content，把属性"TextMode"属性改为Multiline。

tinymce富文本校验方法

tinymce富文本校验方法TinyMCE是一种常用的富文本编辑器，它提供了许多功能和方法，用于校验和验证用户输入的文本内容。

以下是一些常见的校验方法：1. 非空校验：可以使用`getContent()`方法获取编辑器的内容，并使用`trim()`方法去除首尾空格。

然后，检查是否为空字符串，如果字符串为空，则表示用户没有输入任何内容。

2. 最大长度校验：在配置TinyMCE时，可以通过`maxlength`选项设置编辑器的最大长度。

然后，使用`getContent()`方法获取编辑器的内容，并使用`length`属性检查内容的长度是否超过限制。

3. 敏感词过滤：可以使用正则表达式或其他方式，在`getContent()`方法中获取编辑器的内容，并使用过滤规则替换敏感词汇。

例如，可以使用`replace()`方法将敏感词替换为星号或其他符号。

4. HTML标签过滤：可以使用`getContent()`方法获取编辑器的内容，并使用正则表达式或其他方式过滤掉不允许的HTML标签。

这可以防止用户插入恶意脚本或破坏页面布局的标签。

5. 字符编码校验：可以使用`getContent()`方法获取编辑器的内容，并使用HTML实体转义函数（如`htmlspecialchars()`）将特殊字符转换为实体编码。

这样可以避免XSS攻击或字符显示错误的问题。

TinyMCE富文本校验方法可以通过获取编辑器内容并进行合适的处理来满足校验需求。

通过非空校验、最大长度校验、敏感词过滤、HTML标签过滤和字符编码校验等方法，可以确保用户输入的内容符合预期，并提供更安全和可靠的富文本编辑功能。

JS开发富文本编辑器TinyMCE详解

JS开发富⽂本编辑器TinyMCE详解⼀、题外话最近负责了⼀个cms⽹站的运维，⾥⾯存在很多和编辑器有关的问题，⽐如编辑⼀些新闻博客，论⽂模块。

系统采⽤的是FCKEditor，⾃我感觉不是很好，如下图特别是在⽤户想插⼊⼀个图⽚的话，就很⿇烦，所有⽤户共享⼀个⽂件⽬录，这样就不好了，于是便想到了TinyMCE编辑器，博客园默认的也是这个编辑器，接下来，我们开始吧⼆、TinyMCE编辑器集成步骤2.1：下载相关⽂件(1)下载TinyMCE插件包,如下图所⽰，下载开发版（2）下载其他功能包包括中⽂语⾔包zh_CN.js，图⽚上传操作需要的plugin.min.js和jquery.form.js这⼀点很重要，很重要，很重要哦下载完成后如下图所⽰2.2：操作步骤(1):复制TinyMCE到项⽬中解压下载到的tinymce_4.6.4_dev.zip,解压后会有⼀个tinymce⽂件夹，将整个⽂件夹放到WebContent⽬录下，⽬录结构如下图所⽰(2):页⾯集成TinyMCE在页⾯的JS标签中初始化TinyMCE编辑器，代码如下所⽰<script type="text/javascript">tinymce.init({selector: "textarea",upload_image_url: './upload', //配置的上传图⽚的路由height: 400,language:'zh_CN',plugins: ['advlist autolink lists link charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help'],toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',image_advtab: true,templates: [{ title: 'Test template 1', content: 'Test 1' },{ title: 'Test template 2', content: 'Test 2' }],menubar: false});</script>运⾏如下图所⽰，基本的集成已经完毕三、TinyMCE编辑器本地上传图⽚功能注：默认的TinyMCE是没有上传本地图⽚到服务器的功能的，所以这⾥我们需要⾃⼰实现，下⾯我们就说⼀说具体的实现步骤3.1：集成uploadimage插件在./tinymce/js/tinymce/plugins⽬录下新建⼀个uploadimage⽬录，放⼊下载的plugin.min.js，⽬录结构如下图所⽰3.2：在TinyMCE初始化中添加上传图⽚按钮tinymce.init({selector: "textarea",upload_image_url: './upload', //配置的上传图⽚的路由height: 400,language:'zh_CN',plugins: ['advlist autolink lists link charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help uploadimage'],toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help uploadimage',image_advtab: true,templates: [{ title: 'Test template 1', content: 'Test 1' },{ title: 'Test template 2', content: 'Test 2' }],menubar: false});再次运⾏，发现在编辑器的菜单栏多了⼀个图⽚的按钮就是上传图⽚了（TinyMCE默认有⼀个image，可以去掉，因为那个image只可以给⽹络图⽚的URL），总这⾥plugins⾥⾯已经把默认的image去掉了，如下图3.3：实现上传本地图⽚到服务器的功能前提：需要先⽤java实现⼀个upload⼯具类，此⼯具类可以完成本地图⽚上传到服务器，并返回图⽚的URL给ajax,ajax在success的⽅法中接收URL并向TinyMCE中插⼊⼀个image标签JS核⼼代码如下，已包含在plugin.min.js⽂件中，这⾥注意TinyMCE的版本不⽤命令可能会有差异success: function (data) {//alert('2222');//alert(data);if (data!=null) {//alert('4444');editor.focus();//tinyMCE 4.X版本的插⼊对象tinyMCE.activeEditor.insertContent('<img src="'+data+'"></img>');// editor.selection.setContent(dom.createHTML('img', {src: src}));// data.file_path.forEach(function (src) {// editor.selection.setContent(dom.createHTML('img', {src: src}));// })}ajax提交form表单的操作中还⽤到了form.ajaxSubmit,所以需要在编辑器的页⾯引⼊jquery.form.js 包，整体如下所⽰<script type="text/javascript" src="./tinymce/js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="./tinymce/js/tinymce/tinymce.min.js"></script><script type="text/javascript" src="./tinymce/js/tinymce/jquery.tinymce.min.js"></script><script type="text/javascript" src="./tinymce/js/jquery.form.js"></script>实现效果，点击图⽚上传可以从本地选择图⽚⽂件，确定后ajax异步上传，并且返回图⽚的URL，让TinyMCE执⾏插⼊img标签的操作四：演⽰⼀个编辑器发布⽹页内容的例⼦4.1：添加发布按钮在编辑器页⾯下⾯添加⼀个发布⽂章的按钮，定义onclick事件为GetTinyMceContent()function GetTinyMceContent(){// //alert('11');window.location.href="blog.jsp?b_content="+tinyMCE.activeEditor.getContent();}4.2：添加⽂章显⽰页⾯如下图所⽰<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>⽂章内容-HTML</title></head><body><h2 align="center">我的第⼀篇博⽂</h2><%= request.getParameter("b_content") %></body></html>4.3:运⾏效果在编辑器输⼊⼀些内容，并上传⼀个图⽚，如下图⽰点击发布⽂章的按钮，如下图所⽰，发布成功可以在⽹页查看⽂章的输出格式，⼤功已经告成！4.4：总结在真实的环境中TinyMCE的内容不会通过在Request请求的后⾯以?参数名=参数值，然后在页⾯<%= request.getParameter("b_content") %>的形式处理，这⾥只是做⼀个流程的演⽰就没涉及数据库内容。

KindEditor3.5.2最新ASP、PHP版分享及使用方法

KindEditor3.5.2最新ASP/PHP版分享及使用方法最近做web网站在找编辑器的时候在选择编辑器，分别测试了fckeditor和kindeditor这两款，下面做一个简单的说明：[1].fckeditor编辑器对于从word复制过来的格式会乱掉，另外考虑其自身的安全问题，就没用它了[2].kindeditor则是js+html的编辑器，当然另外如果你加入图片上传功能就要提供php或asp的脚本[3].比较遗憾的是kindeditor只能传图片，其他附件无法上传，不过如果加入这个功能也不难，可以参考image上传来编写因此本次的重点就是讲解kindeditor的使用，刚好这次同时使用了asp和php编写，因此两个都会分享。

1.ASP版KindEditor3.5.2使用方法及常见问题使用的时候可以参考原版里面的asp/demo.asp来操作，这里要重点说明是关于调用编辑器代码：[javascript]<script type="text/javascript" charset="utf-8" src="../keditor/kindeditor.js"></script> <script type="text/javascript">KE.show({id : 'content',// 这个是相对于/plugins/image目录而言，一般保持默认即可imageUploadJson : '../../asp/upload_json.asp',fileManagerJson : '../../asp/file_manager_json.asp',// 同上allowFileManager : true,afterCreate : function(id) {KE.event.ctrl(document, 13, function() {KE.util.setData(id);document.forms['editForm'].submit();});KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {KE.util.setData(id);document.forms['editForm'].submit();});}});</script>[/javascript]在asp要调用编辑器比较常见问题是图片上传问题，我说下我这个编辑器的配置目录问题(1).编辑器在根目录，而我调用编辑器是后台文章编辑，如下方式：|--keditor # 放在根目录防止爆后台路径|--admin/newedit.asp|--upload #上传目录放在根目录防止暴露后台地址(2).在asp的2个上传文件keditor\asp\file_manager_json.asp # 图片浏览在该文件中，涉及到上传目录的设置问题，代码如下：[vb]rootPath = "/upload/"rootUrl = "../upload/"[/vb]keditor\asp\upload_json.asp # 图片上传在该文件中，涉及到上传目录的设置问题，代码如下：[vb]'文件保存目录路径savePath = "/upload/"'文件保存目录URLsaveUrl = "../upload/"[/vb](3)同时在编辑器中加入插入代码的功能，具体不详说，查看附件代码这样子设置完目录的结构就不会出现"服务器出现故障"的提示，出现这个提示一般可能有以下几种情况：(1).上传目录设置问题(2).从官方下载的版本默认是utf-8格式，如果用到gbk中可能会出现这个错误提示(3).程序本身出错（没有修改程序是不会这个问题！）<a href='/wp-content/uploads/2011/03/keditor.zip'>点我下载:keditor 3.5.2 for asp Modify by 冷锋</a>2.PHP版KindEditor3.5.2使用方法及常见问题PHP版的和ASP原理差不多就是在目录设置有点不一样，注意下就可以了，就不多说，只说下目录结构：|--keditor # 更目录|--keditor/attached # 上传目录|--system/newedit.php # 调用编辑器页面目录在后台目录设置常见keditor/php目录下两个php文件，建议不要调整目录结构。

django的admin或者应用中使用KindEditor富文本编辑器

django的admin或者应⽤中使⽤KindEditor富⽂本编辑器由于django后台管理没有富⽂本编辑器，看着好丑，展⽰出来的页⾯不美观，⽆法做到所见即所得的编辑⽅式，所以我们需要引⼊第三⽅富⽂本编辑器。

之前找了好多⽂档已经博客才把这个功能做出来，有些博客虽然写的很好，但是毕竟不是⾃⼰写的好多地⽅要么不够全⾯，要么看不懂，整理了⼀些⼤神的博客,所以这次⾃⼰实现就决定写这篇博客记录下，以后如果有需求就不⽤到处找资料了，同时也分享给⼤家看看，提供借鉴。

这次我使⽤的是kindeditor 富⽂本编辑器。

之所以选择这个编辑器主要看是它功能齐全还美观。

下⾯这张图是kindeditor的样⼦，没错功能就是这么多，外观就是这么好看。

好了开始我们的django 使⽤kindeditor之路。

在应⽤中使⽤第⼀步：到官⽹下载下载好后删除这些没有的⽂件asp,,jsp,php.在django中这些都没⽤。

第⼆步：将删除后的⽂件引⼊⾃⼰的项⽬中。

根⽬录下的static/js/editor/第三步，将kindeditor 的js⽂件引⼊到要做富⽂本编辑器的⽹页中，<script src="/static/js/editor/kindeditor/kindeditor-all-min.js"></script><script src="/static/js/editor/kindeditor/lang/zh-CN.js"></script><script src="/static/js/editor/kindeditor/themes/default/default.css"></script><script>KindEditor.ready(function (k) {window.editor = k.create('#editor_id',{resizeType:1,allowPreviewEmoticons : false,allowImageRemote : false,{#处理url#}uploadJson : '/upload/kindeditor',});})</script>View Code我项⽬中引⼊截图，uploadJson 是上传⽂件的url地址,这个要根据⾃⼰url是怎么配置具体更改。

KindEditor使用手册

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()函数。

富文本编辑器的架构原理

富文本编辑器的架构原理富文本编辑器是一种功能强大的工具，可以用于创建和编辑具有丰富格式的文本内容。

它通常用于各种应用程序中，包括文字处理软件、博客编辑器、电子邮件客户端等。

在背后，富文本编辑器是由一系列的技术和组件组成，它们共同实现了富文本编辑的功能。

下面将介绍富文本编辑器的架构原理。

1. 前端界面：富文本编辑器的前端界面是用户与编辑器进行交互的界面。

用户可以在这个界面上进行文本输入、格式设置、插入图片等操作。

前端界面通常由HTML、CSS和JavaScript构建，使用了各种技术和库来实现用户友好的编辑体验。

2. 内容区域：富文本编辑器的内容区域是用于显示和编辑文本内容的区域。

在这个区域，用户可以输入和编辑文本，并且可以进行各种格式设置。

内容区域通常是一个可编辑的HTML元素，如div或textarea。

编辑器会监听用户的输入和操作，并实时更新内容区域的显示。

3. 格式化工具：富文本编辑器提供了丰富的格式化工具，用于设置文本的格式，如字体、字号、颜色、对齐方式等。

这些工具通常以按钮或下拉菜单的形式呈现在界面上。

当用户选择一个格式化工具时，编辑器会根据用户的选择来修改内容区域中的文本格式。

4. 插入工具：富文本编辑器还提供了插入工具，用于插入图片、链接、表格等元素。

用户可以使用插入工具来丰富文本内容。

插入工具通常以按钮或下拉菜单的形式呈现在界面上。

当用户选择一个插入工具时，编辑器会根据用户的选择在内容区域中插入相应的元素。

5. 数据模型：富文本编辑器使用数据模型来管理文本内容。

数据模型是一个抽象的表示，用于存储和操作文本内容的数据。

它可以将文本内容表示为一棵树状结构，每个节点代表一个文本块或格式化元素。

编辑器可以通过操作数据模型来实现文本的插入、删除、修改等功能。

6. 内容解析：富文本编辑器还需要进行内容解析，将用户输入的文本解析为数据模型可以理解的格式。

解析过程包括识别文本块、格式化元素和特殊符号等，并将它们转换为数据模型中的节点。