修改kindeditor,增加公式输入和图片粘贴功能
kindeditor使用方法==
kindeditor详细使用说明1.下载KindEditor 最新版本。
打开下载页面2. 解压zip文件，将所有文件上传到您的网站程序目录下。
例如：http://您的域名/editor/3.在需要显示编辑器的位置添加TEXTAREA输入框。
id在当前页面必须是唯一的值，还有，在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。
宽度和高度可用inline样式设置，也可用编辑器初始化参数设置。
在TEXTAREA里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、等)直接显示内容，则必须转换HTML特殊字符(>,<,&,")。
具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、、PHP、JSP。
<textarea id="editor_id" name="content" style="width:700px;height:300px;"><strong>HTML内容</strong></textarea>4.在该HTML页面添加以下脚本。
<script charset="utf-8" src="/editor/kindeditor.js"></script><script> KE.show({ id : 'editor_id' });</script>注：KE.show的原理是先执行KE.init设置一些变量，等DOM 全部创建以后才开始执行KE.create创建编辑器。
如果浏览器不触发DOMContentLoaded事件（例如：jQuery的$.ready，点击某个按钮，通过innerHTML 插入HTML等），则不能使用KE.show，需要直接调用KE.init和KE.create。
详细介绍如何使用kindEditor编辑器
详细介绍如何使用kindEditor 编辑器今天群里的朋友问我能不能写个kindEditor 编辑器的使用教程，说是弄了半天没有搞定。
由于PHP 啦后台正好用了这个编辑器，我有写经验，正好教他的同时写出来分享给大家kindEditor 编辑器是一个由JS 写成的在线编辑器，很多网站或CMS 等都有用它，口碑不错，目前最新版本是4.1.10。
其实它的用法非常简单，我是在下载了它的安装包后看了一些demo 然后就把它放到PHP 啦的后台上去了。
好了教程正式开始一、下载下载最新版本的kindEditor （官方网站 ），下载后打开examples/index.html 就可以看到一排例子。
二、部署将解压后的文件包kindeditor-4.1.10里的asp jsp php 这几个带有服务端脚本的文件夹删除，然后上传到你网站的相应目录中，在这里我假设放到了plugin 目录。
三、嵌入在需要加入编辑器的页面的HTML 中倒入1 <link rel="stylesheet" href="/plugin/kindeditor-4.1.10/themes/default/default.css" /> 2 <script charset="utf-8" src="/plugin/kindeditor-4.1.10/kindeditor-min.js"></script>3 <script charset="utf-8" src="/plugin/kindeditor-4.1.10/lang/zh_CN.js"></script> 然后添加一个输入框1 <textarea id="editor_id" name="content"></textarea>最后在加入一段JS1 KindEditor.ready(function(K) {2 window.editor = K.create('#editor_id',{3 cssPath:'/public/plugin/editor/plugins/code/prettif y.css',4 uploadJson:'/upload/image.php',5 resizeType :1,6 allowPreviewEmoticons : true,7 allowImageUpload : true,8 });9 });好了。
kindeditor用法
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的官方文档或示例代码来了解更多用法。
KindEditor 3.5.1添加内容分页
下载KindEditor 3.5.1 官方地址：/files/kindeditor-3.5.1-zh_CN.zip解压后打开目录下kindeditor.js文件1，找到items : ['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'],这个Array为编辑器的工具栏，其中"-"表示换行，"|"表示分隔符。
kindeditor使用方法
∙ 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就可以了。
js控件Kindeditor实现图片自动上传功能
js控件Kindeditor实现图⽚⾃动上传功能Kindeditor本⾝提供了许多⾮常实⽤的插件，由于代码开源，开发⼈员可以根据需要对其进⾏任意扩展和修改。
在使⽤Kindeditor编辑⽹站内容时考虑这样⼀个场景：编辑⼈员往往会从其它页⾯或者Word⽂档将内容复制到Kindeditor编辑器中，⽽不会从⼀张⽩纸开始编写内容。
如果所复制的内容中包含图⽚，则需要⾸先将图⽚从源地址下载到本地，然后将其上传到本⽹站所在的服务器，否则图⽚仍然会指向你所复制的页⾯或者⽂档，这会导致图⽚可能在页⾯中⽆法正确打开。
编辑⼈员往往要处理许多的⽂档，这样的操作⽆疑⾮常繁琐。
能否让Kindeditor⾃动识别粘贴到其中的内容，并将图⽚⾃动上传到服务器呢？下⾯的代码实现了这⼀功能。
有关如何在页⾯中使⽤Kindeditor可以去查看官⽅⽹站的⽂档，这⾥不再详细介绍。
实现该功能的基本思路：在Kindeditor编辑器的keyup事件中添加代码，以检查编辑器的内容中是否包含图⽚；找出需要⾃动上传到服务器的图⽚，通过Ajax⽅式调⽤图⽚上传程序将图⽚上传到服务器；在Ajax的回调函数中将对应图⽚的src地址修改为本地相对地址。
该功能不⽀持将Word中的图⽚复制出来并上传到服务器。
上图是最终实现效果。
程序会⾃动识别编辑器中的内容，如果有图⽚需要上传，则会在编辑器的顶部显⽰⼀条提⽰信息。
⽤户点击“上传”链接，程序会通过Ajax请求调⽤图⽚上传程序，并在回调函数中将对应图⽚的src地址修改为本地相对地址。
具体实现步骤及相关代码：1. Kindeditor编辑器修改找到kindeditor.js⽂件，在keyup()事件中添加⾃定义代码。
不同版本的Kindeditor所提供的代码差别可能会⽐较⼤，需要借助于官⽅⽂档进⾏查找。
本⽂基于Kindeditor 4.1.10版本。
2. auto.js⽂件代码function df() {var haspicContainer = document.getElementById("has_pic");if (haspicContainer == null) {haspicContainer = document.createElement("div");haspicContainer.id = "has_pic";haspicContainer.innerHTML = "<input type='text' id='piclist' value='' style='display:none;'/><div id='upload'><b>您有图⽚需要上传到服务器</b> <a href='javascript:uploadpic();' >上传</a></div><div id='confirm'></div>"; $(".ke-toolbar").after(haspicContainer);}var img = $(".ke-edit-iframe").contents().find("img");var piccount = 0;var sstr = "";$(img).each(function (i) {var that = $(this);if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {piccount++;if (i == $(img).length - 1)sstr += that.attr("src");elsesstr += that.attr("src") + "|";}});$("#piclist").val(sstr);document.getElementById("has_pic").style.display = (piccount > 0) ? "block" : "none";}function closeupload() {$("#has_pic").hide();$("#upload").show();}function uploadpic() {var piclist = encodeURI($("#piclist").val());if (piclist.length == 0) return false;$.ajax({url: "/uploadpic.ashx",data: "pic=" + piclist,type: "GET",beforeSend: function () {$("#upload").hide();$("#confirm").text("正在上传中...");},success: function (msg) {if (msg !== "") {var str = new Array();str = msg.split('|');var img = $(".ke-edit-iframe").contents().find("img");$(img).each(function (i) {var that = $(this);if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {that.attr("src", "/uploads/image/" + str[i]);that.attr("data-ke-src", "/uploads/image/" + str[i]);}});$("#confirm").html(img.length + "张图⽚已经上传成功！ <a href='javascript:closeupload();'>关闭</a>");}else $("#confirm").text("上传失败！");}});}其中的$(".ke-edit-iframe").contents().find("img")⽤来查找编辑器内容中的所有图⽚。
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()函数。
KindEditor在线HTML编辑器的使用方法
KindEditor是一款用Javascript编写的开源在线HTML编辑器，主要用户是让用户在网站上获得可见即可得的编辑效果，开发人员可以用KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。
你可以在其官网了解更多信息，包括演示、文档、下载等。
KindEditor的使用方法也非常简单，下面言小鱼就简单介绍一下其用法，这些内容你可以在KindEditor官网找到。
1、你要把所需的文件下载下来，下载地址去官网找。
2、你要把所需要的文件上传到你的网站，接下来就是引用了。
在需要显示编辑器的位置添加textarea输入框，注意ID在页面中应该是唯一的，不说你也知道。
3、在该HTML页面添加以下脚本：
TIP：第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考编辑器初始化参数（官网有详细介绍）。
4、如果你想获得编辑器中的数据，可以用下面的代码：
KindEditor的使用方法就介绍到这里了，如果您还有不明白的地方可以去官网查找详细资料，相信一定能找到您想要的答案！。
kindeditor 正文格式
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 标签清除浮动样式。
以上是一些常用的正文格式，可以根据具体的需求进行拓展和调整。
kindeditor 用法
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的使用
kindeditor的使用一、KindEditor介绍KindEditor是一款开源的web编辑器，由Javascript开发而成。
它支持网页编辑、图片上传和flash播放，也支持表情符号等特殊功能，使用起来非常方便，大大提高了文章的编辑效率。
二、KindEditor的功能1、支持多种文件上传格式：支持jpg、jpeg、png、gif、bmp等多种格式的图片上传，也支持doc、txt、xls等office文档的上传；2、支持Flash播放：支持swf格式的flash文件的播放，可以将flash文件插入到文章中；3、支持表情：支持表情符号的插入；4、支持滚动条：可以自定义滚动条的样式和速度；5、支持插入文件：可以插入html、css 、js等文件。
三、KindEditor的使用1、下载并解压KindEditor压缩包，在页面中引入kindeditor.js 文件；2、在需要使用KindEditor的地方插入一个<textarea>标签；3、实例化KindEditor：//实例化编辑器var editor;KindEditor.ready(function(K) {editor = K.create('textarea[name='content']', {tresizeType : 1,tallowPreviewEmoticons : false,tallowImageUpload : false,titems : [tt'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',tt'removeformat', '|', 'justifyleft', 'justifycenter','justifyright', 'insertorderedlist',tt'insertunorderedlist', '|', 'emoticons', 'image','link']});});4、提交表单：当提交表单时，调用 KindEditor.sync() 将编辑器中的内容同步到 textarea 中。
kindEditor4.1版修改上传图片宽高(图片自适应)
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。
PHP富文本编辑器之Kindeditor的使用一
PHP富⽂本编辑器之Kindeditor的使⽤⼀⼀、下载编辑器源码[1143KB]⼆、部署编辑器将下载⽂件解压⽬录结构如下三、修改HTML页⾯1、在需要显⽰编辑器的位置添加textarea输⼊框<textarea id="editor_id" name="content" style="width:700px;height:300px;"> 这⾥输⼊内容...</textarea>2、在该HTML页⾯添加以下脚本<script src="../kindeditor-4.1.10/kindeditor.js"></script><script src="../kindeditor-4.1.10/lang/zh_CN.js"></script><script>KindEditor.ready(function(K){window.editor = K.create('#editor_id');});</script>完整代码如下<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><script src="../kindeditor-4.1.10/kindeditor.js"></script><script src="../kindeditor-4.1.10/lang/zh_CN.js"></script><script>KindEditor.ready(function(K){window.editor = K.create('#editor_id');});</script><form method="POST" action="get_form.php"><textarea id="editor_id" name="content" sytle="width:700px;height=300px"></textarea><input type="submit" name="button" value="提交"></form>效果如图：。
网页编辑器粘贴word图片且图片文件自动上传功能
网页编辑器粘贴word图片且图片文件自动上传功能ueditor粘贴不能粘贴word中的图片是一个很头疼的问题，在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴，因为这个需求头疼了半个月，因为前端方面因为安全的原因是不允许访问本地文件的。
首先说一下，ueditor粘贴word图片的问题已经解决，但是不是纯web方法解决的，在纯浏览器的条件下是否能够解决也不确定中，但是ckeditor是可以支持word图片的富文本粘贴的接下来就是调试思路和解决方法（所有的代码都是调试ueditor源码的ueditor.all.js文件）1、首先是分析问题，这块就不上代码了，大家可以自己去调试，很清晰的就是因为是本地文件所以不能上传function filter(div) {} //大概是14611行的这个函数会把本地的图片路径过滤成一个//编辑器默认的占位图var root = UE.htmlparser(html); //罪魁祸首就是这行代码但是尝试在罪魁祸首那行代码前将地址强制替换成网络地址就会发现，所替换的地址就会正常显示，因此找到了解决方案，就是将富文本中的img标签的src想办法替换成网络地址，于是第一条解决思路出来了，在执行罪魁祸首代码之前，将本地的地址过滤出来，上传到服务器然后用服务器的地址进行替换，2、解决问题想到解决法案之后就去寻找解决方法，拿到图片的本地地址简单，var imgReg =/<img.*?(?:>|\/>)/gi;var imgArr = html.match (imgReg); // arr 为包含所有img标签的数组利用正则加一些技术基础的处理，就能把所有的图片地址过滤成为一个数组，我们（我和客户端的大神）的解决思路就是模仿input 的type=file的方式进行上传；接下来是怎么拿到本地地址的文件，怎么将本地地址搞成文件，我查阅了好久好久的资料，还请教了各路大神（骚骚的三水，和传说中的周皇），得到一个结论，单纯前端不可能通过本地地址拿到文件（这估计就是ueditor为什么不能粘贴word图片的根本原因），因为我们的页面也在内嵌到客户端内与客户端有数据交流，因此就委托我们的客户端大佬帮我抓到了文件对象function GetLocalFileObject(szPath){var objFile =null;try{objFile =new File([], szPath, {type:"mb/bin"});if (objFile !=null&& objFile.size ==0)objFile =null;}catch(err){objFile =null;}return objFile;}接下来的处理就简单了，就是利用前端的各种基础知识，上传图片，替换路径，在这儿本来以为要苦逼的自己写一个上ajax，但是突然发现了一个ueditor的函数sendMyAndInsertFile 这是ueditor用来上传拖拽图片的一个函数UE.plugin.register('autoupload', function (){} //这下面的第一个函数sendAndInsertFile（）{}但是因为与粘贴在不同的作用域内因此需要将它copy一份到我们粘贴代码这块的作用域内，当然为了严谨，我修改了一下方法名字，并且为了利于后面的html替换增加了一个回调函数// 上传文件的函数function sendMyAndInsertFile(file, editor,callback ) {var me = editor;//模拟数据var fieldName, urlPrefix, maxSize, allowFiles, ac tionUrl,loadingHtml, errorHandler, successHandler,下 filetype =/image\/\w+/i.test(file.type) ?'image':'file', loadingId ='loading_'+ (+new Date()).toString(36);fieldName = me.getOpt(filetype +'FieldName');urlPrefix = me.getOpt(filetype +'UrlPrefix');maxSize = me.getOpt(filetype +'MaxSize');allowFiles = me.getOpt(filetype +'AllowFiles');actionUrl = me.getActionUrl(me.getOpt(filetype +'ActionN ame'));errorHandler =function(title) {var loader = me.document.getElementById(loadingId);loader && domUtils.remove(loader);me.fireEvent('showmessage', {'id': loadingId,'content': title,'type':'error','timeout':4000});};if (filetype =='image') {loadingHtml ='<img class="loadingclass" id="'+ loadingId +'" src="'+me.options.themePath + me.options.theme +'/images/spacer.gif"title="'+ (me.getLang('autoupload.loading') ||'') +'" >';successHandler =function(data) {var link = urlPrefix + data.url,loader = me.document.getElementById(loadingId);if (loader) {loader.setAttribute('src', link);loader.setAttribute('_src', link);loader.setAttribute('title', data.title ||'');loader.setAttribute('alt', data.original ||'');loader.removeAttribute('id');domUtils.removeClasses(loader, 'loadingclass');}};} else {loadingHtml ='<p>'+'<img class="loadingclass" id="'+ loadingId +'" src="'+ me.options.themePath + me.options.theme +'/images/spacer.gif"title="'+ (me.getLang('autoupload.loading') ||'') +'" >'+ '</p>';successHandler =function(data) {var link = urlPrefix + data.url,loader = me.document.getElementById(loadingId);var rng = me.selection.getRange(),bk = rng.createBookmark();rng.selectNode(loader).select();me.execCommand('insertfile', {'url': link});rng.moveToBookmark(bk).select();};}/* 插入loading的占位符 */// me.execCommand('inserthtml', loadingHtml);/* 判断后端配置是否没有加载成功 */if (!me.getOpt(filetype +'ActionName')) {errorHandler(me.getLang('autoupload.errorLoadConfig'));return;}/* 判断文件大小是否超出限制 */if(file.size > maxSize) {errorHandler(me.getLang('autoupload.exceedSizeError'));return;}/* 判断文件格式是否超出允许 */var fileext = ? .substr(stIndex Of('.')):'';if ((fileext && filetype !='image') || (allowFiles && (allowFil es.join('') +'.').indexOf(fileext.toLowerCase() +'.') ==-1)) { errorHandler(me.getLang('autoupload.exceedTypeError'));return;}/* 创建Ajax并提交 */var xhr =new XMLHttpRequest(),fd =new FormData(),params = utils.serializeParam(me.queryCommandValue('ser verparam')) ||'',url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') ==-1?'?':'&') + params);fd.append(fieldName, file, || ('blob.'+ file.type.sub str('image/'.length)));fd.append('type', 'ajax');xhr.open("post", url, true);xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");xhr.addEventListener('load', function (e) {try{var json = (new Function("return"+ utils.trim(e.target.response)))();if (json.state =='SUCCESS'&& json.url) {// 将上传的文件返回 callback(json)} else {errorHandler(json.state);}}catch(er){errorHandler(me.getLang('autoupload.loadError'));}});xhr.send(fd);}ss其中还有一些需要处理的，网络图片，粘贴时没有图片怎么办，以及多张图片我就不废话了直接将整个filter代码粘贴在下方function filter(div) {var html;if (div.firstChild) {//去掉cut中添加的边界值var nodes = domUtils.getElementsByTagName(div, 'sp an');for (var i =0, ni; ni = nodes[i++];) {if (ni.id =='_baidu_cut_start'|| ni.id =='_baidu_cut_end') { domUtils.remove(ni);}if (browser.webkit) {var brs = div.querySelectorAll('div br');for (var i =0, bi; bi = brs[i++];) {var pN = bi.parentNode;if (pN.tagName =='DIV'&& pN.childNodes.length ==1) { pN.innerHTML ='<p><br/></p>';domUtils.remove(pN);}}var divs = div.querySelectorAll('#baidu_pastebin');for (var i =0, di; di = divs[i++];) {var tmpP = me.document.createElement('p');di.parentNode.insertBefore(tmpP, di);while (di.firstChild) {tmpP.appendChild(di.firstChild);}domUtils.remove(di);}var metas = div.querySelectorAll('meta');for (var i =0, ci; ci = metas[i++];) {domUtils.remove(ci);}var brs = div.querySelectorAll('br');for (i =0; ci = brs[i++];) {if (/^apple-/i.test(ci.className)) {domUtils.remove(ci);}}if (browser.gecko) {var dirtyNodes = div.querySelectorAll('[_moz_dirty]');for (i =0; ci = dirtyNodes[i++];) {ci.removeAttribute('_moz_dirty');}}if (!browser.ie) {var spans = div.querySelectorAll('span.Apple-style-span');for (var i =0, ci; ci = spans[i++];) {domUtils.remove(ci, true);}}//ie下使用innerHTML会产生多余的\r\n字符，也会产生这里过滤掉 html = div.innerHTML;//.replace(/>(?:(\s| )*?)</g,'><');//过滤word粘贴过来的冗余属性 html = UE.filterWord(html);/** * @处理word粘贴进来的图片 * @此处尝试将本地图片的路径分离并上传到服务器并拿到地址替换掉字符串中的img *///待修改之: 仅在20191221版mblink客户端支持；wzh function GetLocalFileObject(szPath){var objFile =null;try{objFile =new File([], szPath, {type:"mb/bin"});if (objFile !=null&& objFile.size ==0)objFile =null;}catch(err){objFile =null;}return objFile;}var imgReg =/<img.*?(?:>|\/>)/gi;var imgArr = html.match(imgReg); // arr 为包含所有img标签的数组var srcReg =/src=[\'\"]?([^\'\"]*)[\'\"]?/i;if(imgArr){html= html.replace(/\\/g,"\/") //将富文本中的\与/替换方便下面替换成网络路径var freauency =0//定义一个变量记录处理了几张图片for(var i=0,len=imgArr.length;i<len;i++){ var strsrc = imgArr[i].match(srcReg)[1].slice(8)var a = GetLocalFileObject(strsrc)if(!a){ //有网络图片时的处理 console.log(999)delHtml()continue}// 上传文件的函数function sendMyAndInsertFile(file, editor,callback ) {var me = editor;//模拟数据 console.log(file.type)var fieldName, urlPrefix, maxSize, allowFiles, actionUrl,loadingHtml, errorHandler, successHandler,filetype =/image\/\w+/i.test(file.type) ?'image':'file',loadingId ='loading_'+ (+new Date()).toString(36);fieldName = me.getOpt(filetype +'FieldName');urlPrefix = me.getOpt(filetype +'UrlPrefix');maxSize = me.getOpt(filetype +'MaxSize');allowFiles = me.getOpt(filetype +'AllowFiles');actionUrl = me.getActionUrl(me.getOpt(filetype +'ActionN ame'));errorHandler =function(title) {var loader = me.document.getElementById(loadingId);loader && domUtils.remove(loader);me.fireEvent('showmessage', {'id': loadingId,'content': title,'type':'error','timeout':4000});};if (filetype =='image') {loadingHtml ='<img class="loadingclass" id="'+ loadingId +'" src="'+me.options.themePath + me.options.theme +'/images/spacer.gif"title="'+ (me.getLang('autoupload.loading') ||'') +'" >';successHandler =function(data) {var link = urlPrefix + data.url,loader = me.document.getElementById(loadingId);if (loader) {loader.setAttribute('src', link);loader.setAttribute('_src', link);loader.setAttribute('title', data.title ||'');loader.setAttribute('alt', data.original ||'');loader.removeAttribute('id');domUtils.removeClasses(loader, 'loadingclass');}};} else {loadingHtml ='<p>'+'<img class="loadingclass" id="'+ loadingId +'" src="'+ me.options.themePath + me.options.theme +'/images/spacer.gif"title="'+ (me.getLang('autoupload.loading') ||'') +'" >'+ '</p>';successHandler =function(data) {var link = urlPrefix + data.url,loader = me.document.getElementById(loadingId);var rng = me.selection.getRange(),bk = rng.createBookmark();rng.selectNode(loader).select();me.execCommand('insertfile', {'url': link});rng.moveToBookmark(bk).select();};}/* 插入loading的占位符 */// me.execCommand('inserthtml', loadingHtml);/* 判断后端配置是否没有加载成功 */if (!me.getOpt(filetype +'ActionName')) {errorHandler(me.getLang('autoupload.errorLoadConfig'));return;}/* 判断文件大小是否超出限制 */if(file.size > maxSize) {errorHandler(me.getLang('autoupload.exceedSizeError'));return;}/* 判断文件格式是否超出允许 */var fileext = ? .substr(stIndex Of('.')):'';if ((fileext && filetype !='image') || (allowFiles && (allowFil es.join('') +'.').indexOf(fileext.toLowerCase() +'.') ==-1)) { errorHandler(me.getLang('autoupload.exceedTypeError'));return;}/* 创建Ajax并提交 */var xhr =new XMLHttpRequest(),fd =new FormData(),params = utils.serializeParam(me.queryCommandValue('ser verparam')) ||'',url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') ==-1?'?':'&') + params);fd.append(fieldName, file, || ('blob.'+ file.type.sub str('image/'.length)));fd.append('type', 'ajax');xhr.open("post", url, true);xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");xhr.addEventListener('load', function (e) {try{var json = (new Function("return"+ utils.trim(e.target.response)))();if (json.state =='SUCCESS'&& json.url) {// 将上传的文件返回 callback(json)} else {errorHandler(json.state);}}catch(er){errorHandler(me.getLang('autoupload.loadError'));}});xhr.send(fd);}// 上传文件函数的回调进行图片路径替换和渲染html sendMyAndInsertFile(a,me,function (res){ freauency++html = html.replace(res.original,res.url)if(freauency!=imgArr.length) {return} //多张图片粘贴时等到最后一张上传完在渲染html delHtml()})// }) }}else {delHtml()}/** * @将之前处理富文本html的代码封装成一个函数便于在有图片和没图片的两张粘贴情况进行处理 * */ function delHtml (){//取消了忽略空白的第二个参数，粘贴过来的有些是有空白的，会被套上相关的标签var root = UE.htmlparser(html); //此处过滤会把file 图片过滤掉//如果给了过滤规则就先进行过滤if (me.options.filterRules) {UE.filterNode(root, me.options.filterRules);}//执行默认的处理 me.filterInputRule(root);//针对chrome的处理if (browser.webkit) {var br = stChild();if (br && br.type =='element'&& br.tagName =='br') {root.removeChild(br)}utils.each(me.body.querySelectorAll('div'), function (node) { if (domUtils.isEmptyBlock(node)) {//domUtils.remove(node,true) }})}html = {'html': root.toHtml()};me.fireEvent('beforepaste', html, root);//抢了默认的粘贴，那后边的内容就不执行了，比如表格粘贴if(!html.html){return;}root = UE.htmlparser(html.html,true);//如果开启了纯文本模式if (me.queryCommandState('pasteplain') ===1) { me.execCommand('insertHtml', UE.filterNode(root, me.opti ons.filterTxtRules).toHtml(), true);} else {//文本模式 UE.filterNode(root, me.options.filterTxtRules);txtContent = root.toHtml();//完全模式 htmlContent = html.html;address = me.selection.getRange().createAddress(true);me.execCommand('insertHtml', me.getOpt('retainOnlyLabel Pasted') ===true? getPureHtml(htmlContent) : htmlContent, t rue);}me.fireEvent("afterpaste", html);}}}更多详细资料可以参考这篇文章：技术交流可以入群一起讨论：223813913。
kindeditor inserttext
kindeditor inserttext中括号内的内容是"[kindeditor inserttext]"，那么我将以如何使用KindEditor富文本编辑器为主题，写一篇1500-2000字的文章，逐步介绍如何使用该工具。
文章标题：使用KindEditor富文本编辑器轻松创建精美的网页内容引言：在现代互联网时代，网页内容的创建和展示变得至关重要。
为了提高用户体验，一个简洁、美观的网页编辑工具是不可或缺的。
KindEditor富文本编辑器是一个功能强大、易于使用的工具，它为网页开发人员和内容创作者提供了许多特性和功能，帮助他们创建出高质量的网页内容。
本文将一步一步解释如何使用KindEditor富文本编辑器来实现这一目标。
第一步：下载和安装KindEditor富文本编辑器首先，从KindEditor官方网站下载最新版本的编辑器。
然后，将下载的文件解压缩到您的项目文件夹中。
随后，您需要引入必要的JavaScript和CSS文件到您的网页代码中，并根据您的需求进行定制配置。
第二步：初始化KindEditor编辑器为了在您的网页中使用KindEditor富文本编辑器，您需要初始化编辑器实例。
创建一个HTML元素（如textarea或div），并为其指定一个ID作为容器。
然后，在您的JavaScript代码中，使用KindEditor.create函数来初始化编辑器。
您可以通过传递一些配置选项来自定义编辑器的外观和行为，比如设置编辑器的高度、宽度、工具栏按钮等等。
第三步：编辑网页内容一旦您成功地初始化了KindEditor编辑器，您就可以开始编辑网页内容了。
编辑器提供了丰富的功能，比如字体样式、颜色、大小、加粗、斜体、添加链接、插入图片、表格等等。
您只需单击相应的按钮或使用快捷键即可完成操作。
编辑器还支持撤销和重做功能，以及对文本的搜索和替换。
您还可以通过代码视图查看和编辑HTML代码。
为KindEditor编辑器中的内容增加样式，使得自定义前台页面显示效果与编辑器效果一致
为KindEditor编辑器中的内容增加样式，使得⾃定义前台页⾯显
⽰效果与编辑器效果⼀致
KindEditor 本⾝⾃带有⼀定的样式，且为内部样式，在使⽤过程中，难免会发现部分效果不是我们想要的，因此，KindEditor提代了两种⽅式供使⽤着调⽤
1、内部样式，通过 cssData 属性，控制内容样式，如：
K.create('textarea[name=content]', { cssData : 'body { font-size: 14px; }' });
2、外部样式，通过 cssPath 属性，控制内容样式，如：
K.create('textarea[name=content]', { cssData : 'x.css' });
这样，在写样式的时候，我们只需要关注 x.css ⽂件⾥⾯的样式是怎么写的就可以了，同时，也可以在前台页⾯中调⽤这个css⽂件，以达到前台显⽰效果与编辑器显⽰效果⼀致的⽬的。
kindeditor在线编辑器增加附件上传功能
</tr>
<tr>
<td class="left1">说明:</td>
<td class="right1">
<input type="text" id="imgTitle" name="imgTitle" value="" maxlength="100" style="width:220px;" />
//定义允许上传的文件扩展名
$ext_arr = array('doc', 'xls', 'ppt', 'pdf', 'txt', 'rar' , 'zip');
//最大文件大小
$max_size = 1000000;
//更改目录权限
@mkdir($save_path, 0777);
srand((double)microtime()*1000000);
} else {
document.getElementById('url').style.display = 'block';
document.getElementById('imgFile').style.display = 'none';
}
}
</script>
</head>
<body>
<form name="uploadForm" method="post" enctype="multipart/form-data" action="../php/uploadaccessory.php">
KindEditor在线编辑器应用文档
以纯文本(不带任何格式)的形式把内容粘贴到编辑器
从Word中粘贴
把从Word中拷贝的内容粘贴到编辑器中，并去除繁杂格式。
全部选中
选中编辑区内的所有内容
粗体
使当前选区内的文字在粗体和非粗体间变换
斜体
使当前选区内的文字在斜体和非斜体间变下划线间变换
中划线
插入一个表格
表格属性
编辑选定表格的各项属性值
插入行(在上方)
在当前选区上方插入一个表格行
插入行(在下方)
在当前选区下方插入一个表格行
删除行
删除当前鼠标或选区所在行
插入列(在左侧)
在当前鼠标所在单元格的左侧插入一列
插入列(在右侧)
在当前鼠标所在单元格的右侧插入一列
删除列
删除选区所在的表格列
代码状态
切换编辑区到代码状态模式
KindEditor在线编辑器应用文档
图标
标题
描述
撤消(Ctrl + Z)
撤消上次的操作
恢复(Ctrl + Y)
恢复最后的操作
剪切(Ctrl + X)
拷贝当前的选区到剪贴板，然后删除它
拷贝(Ctrl + C)
拷贝当前的选区到剪贴板
粘贴(Ctrl + V)
把剪贴板中的内容插入到编辑器当前光标所在位置，或替换选区
两端对齐
使当前选区所在格式块两端对齐
编号
使当前选中的文字块按数字编号排列或取消编号格式
项目符号
使当前选中的文字块按项目符号排列或取消项目符号格式
增加缩进量
增加选定文字块的缩进量
减少缩进量
减小选定文字块的缩进量
插入或修改图片
ueditor插入公式
在UEditor中插入数学公式，你可以使用UEditor提供的数学公式编辑器插件。
UEditor是一个基于JavaScript开发的所见即所得的富文本编辑器，它支持插入数学公式、图片、视频等多媒体内容。
要在UEditor中插入数学公式，你可以按照以下步骤操作：
1. 初始化UEditor编辑器，确保已经加载了UEditor的相关资源文件。
2. 在编辑器中插入数学公式的位置，点击工具栏中的"插入公式"按钮或者其他类似的功能按钮。
3. 弹出数学公式编辑器对话框，你可以在这个对话框中输入数学公式的LaTeX代码或者直接编辑数学公式。
4. 编辑完成后，点击确认或者插入按钮，UEditor会将数学公式插入到编辑器的当前位置。
在数学公式编辑器对话框中，你可以输入常见的数学公式，也可以使用LaTeX语法来输入复杂的数学公式。
UEditor会自动将输入的数学公式转换为可视化的数学公式展示在编辑器中。
需要注意的是，UEditor的具体插入数学公式的操作可能会因版本而略有不同，建议查阅UEditor的官方文档或者相关教程以获得更加详细的操作指导。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
修改kindeditor，增加公式输入和图片粘贴功能最近，需要在编辑器中增加两个功能：直接通过编辑器粘贴图片和插入分数。
由此需要对编辑器进行二次开发，打开kindeditor.js文件，发现一共有5957行代码。
真是牛人，至少我还没写过这么长代码的东西。
初步来说，在工具栏上加入一个图标是很简单的，它的官网上有详细的说明，但这样的修改方法不适合我的网站，因为我的网站有好几个编辑控件，如果采用这样的修改方式，需要逐一修改每一个控件，实在不附合程序员的风格。
所以我想修改kindeditor的核心文件，来定制我的编辑器。
首先，修改items数组，这个数组保存的是工具栏图标，items : ['fontname', 'fontsize', '|', 'undo', 'redo', '|', 'preview', 'cut', 'copy', 'paste','plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright','insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', '|','forecolor', 'hilitecolor', 'bold','italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage','table', 'hr','link', 'unlink','fullscreen','source','formula'],我在最后面加入了一个“公式”图标。
这样修改保存后，并不能在编辑器上看到这个图标，还要打开lang/zh_CN.js文件，添加formula的多国语言，formula:'数学公式'。
刷新编辑器后就可以发现多了一个图标，真是奇怪呢？我还没定义这个图标的显示样式啊。
原来在default样式中已经定义了这个名称的样式：.ke-icon-formula {background-position: 0px -576px;width: 16px;height: 16px;}看起来，编辑器的作者也是清楚“数学公式”是相当重要的，也为此作了准备，只是还未完成。
希望下一个版本可以增加这个功能，也省却了再次开发的时间。
最后，建立plugins/formula/formula.js文件，这个插件文件可以自动加载到编辑器中，请看这个代码：_loadScript(self.pluginsPath + name + '/' + name + '.js?ver=' ……也就是说插件目录和插件名字必须按这样的规则来命名，否则编辑器无法加载这外JS 文件。
插件的格式很简单：KindEditor.plugin('formula', function(K) {var editor = this, name = 'formula';// 点击图标时执行editor.clickToolbar(name, function() {editor.insertHtml('你好');});});至于在点击图标时执行一些什么代码，这完全就取决于我们的编程水平了。
我们完全可以先弹出个对话框，进行一些交互，最后再插入HTML代码。
由于，是对kindeditor的二次开发，所以对编辑器的一些内部API需要比较熟悉，这对作者之外的人就是一个考验。
很不幸我对它一点也不熟，所以制作插件很是费了一番劲。
弹出对话框可以使用它的APIvar dialog = self.createDialog({name : name,width : dialogWidth,height : dialogHeight,title : ng(name),body : html,yesBtn :{}});这个方法用于创建并显示dialog，。
我们只要在yesBtn中写入我们自己的代码即可实现自己的功能。
需要注意的是body中的HTML代码必须以<div></div>包起来，也可以使用其它标签，但必须成为一个元素，否则会产生错误（因为在创建对话框时使用了这样的代码bodyDiv.append(body);）。
但一般在对话框中会有很多文本控件，怎样得到这些控件的值呢？有这个API可供使用div = dialog.div，widthBox = K('.tab1 [name="width"]', div)；绑定了DOM后，就可以使用widthBox来操作这个文框，它和jquery很有类似之入，如widthBox.val()就可取它的值，还是很方便的。
在我们插入HTML的时候，往往需要知道当前编辑器的字号、字体之类的信息，可以用以下代码获得：var font_size=parseInt(editor.cmd.val('fontsize'));最后就可以插入html代码了：editor.insertHtml(html);完成自己的工作后，需要关闭对话框，并将焦点设置在编辑器上。
self.hideDialog().focus();至此，虽然我对于kindeditor的工作流程还不熟悉，但制作一个插件就手到擒来了。
感谢作者罗龙浩的努力，让我们可以使用如此棒的编辑器。
如果能有更多文档就好了。
另外，在编写分数插件时，我发现kindeditor的html过滤实在是厉害，把我插入的很多HTML代码都过滤掉了，这样分数就无法显示，所以我把编辑器的HTML过滤功能默认将它关闭：filterMode : false还有，在插入分数后，分子和分母都是可编辑的，本来这是个好事情，但如果还要在分数的后面再输入文本时，经常会输入到分子和分母上，而无法定位到分数的后面。
为了解决这个问题，我对分数的包围DIV进行了不可编辑的设定,contenteditable=”false”，这样就不会发生光标定位到分子和分母的情况，但缺点是分数无法再次修改。
期待有人能克服这个缺点。
最后上图，公式输入对话框生成：是不是挺厉害呢？只要您看的懂我这篇文章，改kindeditor就是小菜一碟。
网上还有一种是整合Mathquii库的（向优秀的LaTeX致敬，这个库支持LaTeX格式的公式。
），老实说，这个库真的很不错。
功能非常强大，因为是外国人写的库，我的英文水平又太差，所以没深入研究。
我觉得我的网站不需要这样强大的公式插件，而且，我只需要生成后的HTML代码即可，又不是搞学术的。
即使以后需要添加其它公式，再增加一个功能也是很快就能完成的事。
设置居中显示,原来kindeditor4.1的一个BUG，在chrome中很多时候对话框无法显示。
经过检查发现，原来是对话框的TOP没有得到正确的设置。
加入以下代码修复。
_extend(KDialog, KWidget, {init : function(options) {……其它代码var left=(window.innerWidth-self.div.width())/2;var top=(window.innerHeight-self.div.height())/2;left=Math.max(left,0);top=Math.max(top,0);self.div[0].style.left=left+'px';self.div[0].style.top=top+'px';}为kindeditor增加粘贴图片的功能相对来说比较简单，首先找到编辑器创建完成调用的方法：afterCreate : function() {在中间加入绑定粘贴事件处理的自定义方法：_bindPasteEvent(edit);这个方法传入编辑器对象，但我们只需要绑定其中的iframe对象即可，在API中，它使用edit.doc代表。
_bindEvent(edit.doc,'paste',function(e){//添加粘贴处理方法就能处理粘贴图片的事件}在图片的粘贴中，需要使用FileReader读取图片数据，然后用BASE64格式上传服务器，服务器接收数据然后解码成图片保存起来，返回图片地址，就可以编辑器中显示了。
但可惜只有支持FileReader的现代浏览器支持这个功能。
这个功能对于编辑来说是非常实用的。
只希望所有浏览器都可以支持。