KindEditor-编辑器配置参数属性
kindEditor编辑器使用方法
kindeditor的使用方法asp例子<script>KindEditor.ready(function(K) {//全局配置var serverScriptPath='/editor/asp/';//服务端文件文件夹URL绝对路径,最后要有/var editorPluginsPath="/editor/plugins/";//编辑器的插件文件夹URL绝对路径,最后要有///全局配置结束var editor1 = K.create('textarea[name="editor_id"]', {//指定textarea //不要改动uploadJson : serverScriptPath+'upload_json.asp',fileManagerJson : serverScriptPath+'file_manager_json.asp',cssPath :editorPluginsPath+'code/prettify.css',emoticonsPath:editorPluginsPath+"/emoticons/images/",//不要改动结束allowFileManager : true});});</script>记得要引入二个JS文件，下载包里有，自己找一下。
<script charset="utf-8" src="../editor/kindeditor.js"></script><script charset="utf-8" src="../editor/lang/zh_CN.js"></script>需要在调用的地方放一个文本框，就可以显示出编辑器了。
详细介绍如何使用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 取值和赋值应用版本：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中。
ASP-NET-MVC-5-应用-KindEditor--UIHint
在 MVC 5 中应用KindEditor第一步将 KindEditor 的源文件添加到工程中，建议放到 /Scripts/kindeditor 目录中，其中只需要有 lang目录、plugis目录、themes目录和kindeditor-min.js文件即可。
第二步在 /Views/Shared/EditorTemplates 目录中添加一个分部视图“kindeditor.cshtml〞(文件名可任意)。
代码如下：@Scripts.Render("~/Scripts/kindeditor/kindeditor-min.js")@Html.TextArea(string.Empty, ViewData.TemplateInfo.FormattedModelValue)<script type="text/javascript">// <![CDATA[(function () {KindEditor.ready(function (k) {k.create("#@ViewData.TemplateInfo.GetFullHtmlFieldNa me(string.Empty)", {themeType: 'default',width: '690px',height: '400px',uploadJson: '/KindEditorHandler/Upload',fileManagerJson:'/KindEditorHandler/FileManager',allowFileManager : true});});})();// ]]></script>第三步在需要应用编辑器的Model属性中设置 DataAnnotations，比方：public class Movie{public int ID { get; set; }public string Title { get; set; }public DateTime ReleaseDate { get; set; }public string Genre { get; set; }public decimal Price { get; set; }[AllowHtml][UIHint("kindeditor")] // EditorTemplates 目录中添加的视图名称public String Content { get; set; }}第四步在视图中使用 @Html.EditorFor(model => model.Content) 即可加载编辑器。
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-编辑器配置参数属性
KindEditor-编辑器配置参数属性KindEditor编辑器的使用方法，通过使用KE.show(config)方法即可将编辑器添加到文档中。
下面是一段源码：KE.show = function(args) {KE.init(args);KE.event.ready(function() { KE.create(args.id); });};从源码中可以看出，有两种使用编辑器的方法：法一：KE.show(config);法二：KE.init(config);KE.create(id);·无论使用哪种方式使用KindEditor编辑器，都必须进行参数配置；·可以在KE.show()和KE.init()方法中传递配置参数config；·配置参数config是一个对象，一般使用字面量对象；·其中，id参数是唯一必须进行配置的，其他参数可以省略。
参数设置例子KE.show({id : "content_1",width : "70%", //编辑器的宽度为70%height : "200px", //编辑器的高度为100pxfilterMode : false, //不会过滤HTML代码resizeMode : 1 //编辑器只能调整高度});配置参数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输入框样式表宽度优先度高。
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编写，因此两个都会分享。
<!--more-->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文件，建议不要调整目录结构。
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就可以了。
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 的各个属性的配置更改。
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。
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的使用方法就介绍到这里了，如果您还有不明白的地方可以去官网查找详细资料，相信一定能找到您想要的答案！。
彻底解决asp中KindEditor编辑器无法获得提交的数据
彻底解决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控件实现文本编辑器使用详解(含代码)
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文件，显示自己需要的效果在相应的位置编辑即可希望能对你有所帮助。
KingEditor 常用变量及函数
7. KE.g[id].range 当前选中信息的浏览器原生 range 对象，id 为编辑器 ID。 数据类型：Object
二、函数
1. KE.show(config) 初始化并创建编辑器。执行本函数时先调用 KE.init 设置初始化参数，然后在 DOM 加载完成后执行 KE.create。 参数： config：Object，编辑器属性集合，具体请参考编辑器属性 返回值：无
String，HTML 字符串 注: 3.5 版本开始支持。 10. KE.count(id, mode) 取得编辑器内容的文字数量。 参数： id：String，编辑器的 ID mode：String，可选参数，默认值也"html"，mode 为"html"时取得字数包含 HTML 代码，mode 为 "text"时只包含纯文本、IMG、EMBED。 返回值： Int，文字数量 注: 3.5 版本开始支持。 11. KE.isEmpty(id) 判断编辑器是否有可见内容，比如文本、图片、视频。 参数： id：String，编辑器的 ID 返回值：Boolean 注: 3.5 版本开始支持，旧版本可以使用 KE.util.isEmpty(id)。 12. KE.insertHtml(id, val) 将指定的 HTML 内容插入到编辑区域里的光标处。 参数： id：String，编辑器的 ID val: String，HTML 字符串 返回值：无 注: 3.5 版本开始支持，旧版本可以使用 KE.util.insertHtml(id, val)。 13. KE.appendHtml(id, val) 将指定的 HTML 内容添加到编辑区域最后位置。 参数： id：String，编辑器的 ID val: String，HTML 字符串 返回值：无 注: 3.5 版本开始支持。 14. KE.util.setData(id) 把编辑器的内容设置到原 TEXTAREA 控件里。 参数： id：String，编辑器的 ID 返回值：无
kindeditor图片上传后生成带域名绝对路径配置及提交空格无法保存解决方法
kindeditor图片上传后生成带域名绝对路径配置方法kindeditor默认上传图是不带域名域名绝对路径了，如果我们希望生成之后带上域名就需要进入urlType进行设置了，我们kindeditor中的urlType有几个参数默认这空值”“、”relative”、”absolute”、”domain”了。
关键在于初始化kindeditor时指定以下参数：urlType”“ 空为不修改URL”relative”相对路径”absolute”绝对路径”domain”带域名的绝对路径。
============================================================================== 关于kindeditor提交空格问题的解决办法版本4.1.10问题反馈：后台编辑器段首空格无法正常保存到数据库。
变通办法：早期，通知用户使用全角空格，但后面发现提交后显示正常，再次编辑时未出现空格。
最终解决办法：修改kindeditor.js 725行部分我公司调整后的js行数为752行将本行修改为：var re =/([ \f\n\r\t\v]*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\-:]+)|(?:\s+[\w\-:]+=[^\ s"'<>]+)|(?:\s+[\w\-:"]+="[^"]*")|(?:\s+[\w\-:"]+='[^']*'))*)(\/)?>([ \f\n\ r\t\v]*)/g;就是把第一个和最后一个\s 替换成[ \f\n\r\t\v]修改前请注意备份。
几种常用网页文本编辑器总结
文本编辑器应用总结一．lhgeditor文本编辑器lhgeditor组件文件结构：1. lhgeditor.js：组件的核心JS文件2. lhgeditor.css：组件的样式表文件3. images：组件所需的图片都在此文件夹中以上三个文件为组件所必须的三个文件，组件包中其它以“_”开头的文件为示例的演示文件，实际使用中不需要这些文件。
当然框架核心文件lhgcore.js是每个组件都必须用到的文件，记得加载组件前先要加载此文件。
lhgeditor组件使用说明：1. 在调用组件的页面加载lhgcore.j s和lhgeditor.js两个文件。
2. 在window.onload函数里加入J.editor.add(编辑器的id).init();例：<script type="text/javascript">window.onload = function(){J.editor.add('elm1').init();}</script><form action="_postdate.asp" method="post" target="_blank"><div><textarea name="elm1" id="elm style="width:600px;height:300px;">lhgeditor小型在线编辑器</textarea></div><input type="submit" value="Submit" /></form>二．nicEdit文本编辑器<script type="text/javascript">bkLib.onDomLoaded(function() {new nicEditor().panelInstance('area1');new nicEditor({fullPanel : true}).panelInstance('area2');new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');new nicEditor({buttonList :['fontSize','bold','italic','underline','strikeThrough','subscript',' superscript','html','image']}).panelInstance('area4');new nicEditor({maxHeight : 100}).panelInstance('area5');});</script>//默认模式//new nicEditor().panelInstance('area1');<textarea cols="50" id="area1"></textarea>//All A vailable Buttons//new nicEditor({fullPanel : true}).panelInstance('area2');<textarea cols="60" id="area2">Some Initial Content was in this textarea</textarea>//new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');<textarea cols="50" id="area3"></textarea>//自定义按钮//new nicEditor({buttonList :['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}).panelInstance('area4');<textarea cols="50" id="area4">HTML <b>content</b> <i>default</i> in textarea</textarea>//设置文本编辑器的最大高度//new nicEditor({maxHeight : 100}).panelInstance('area5');<textarea style="height: 100px;" cols="50" id="area5">HTML <b>content</b> <i>default</i> in textarea</textarea>三．kindeditor文本编辑器(1) 支持多种语言php、asp(2) 功能强大默认模式<script charset="utf-8" src="../kindeditor-min.js"></script><script charset="utf-8" src="../lang/zh_CN.js"></script><script>var editor;KindEditor.ready(function(K) {editor = K.create('textarea[name="content"]', {resizeType : 1,allowPreviewEmoticons : false,allowImageUpload : false,items : ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic','underline','removeformat', '|', 'justifyleft','justifycenter', 'justifyright', 'insertorderedlist','insertunorderedlist', '|', 'emoticons', 'image', 'link']});});</script><textarea name="content" style="width:700px;height:200px;visibility:hidden;">KindEditor</textarea>Multi Language Examples(多语言)<script charset="utf-8" src="../kindeditor-min.js"></script><script>var editor;KindEditor.ready(function(K) {K('select[name=lang]').change(function() {if (editor) {editor.remove();editor = null;}editor = K.create('textarea[name="content"]', {langType : this.value});});K('select[name=lang]').change();});</script><form><p><select name="lang"><option value="en">English</option><option value="zh_CN">简体中文</option><option value="zh_TW">繁體中文</option><option value="ar">Arabic</option></select></p><textarea name="content" style="width:800px;height:200px;"></textarea> </form>粘贴设置：<script charset="utf-8" src="../kindeditor-min.js"></script><script charset="utf-8" src="../lang/zh_CN.js"></script><script>KindEditor.ready(function(K) {K.create('#content1', {pasteType : 0});K.create('#content2', {pasteType : 1});K.create('#content3', {pasteType : 2});});</script>禁止粘贴<textarea id="content1" name="content" style="width:700px;height:200px; visibility:hidden;"></textarea>纯文本粘贴<textarea id="content2" name="content" style="width:700px;height:200px; visibility:hidden;"></textarea>HTML粘贴<textarea id="content3" name="content" style="width:700px;height:200px; visibility:hidden;"></textarea>自定义插件<script charset="utf-8" src="../kindeditor-min.js"></script> <script charset="utf-8" src="../lang/zh_CN.js"></script> <script>// 自定义插件#1ng({example1 : '插入HTML'});KindEditor.plugin('example1', function(K) {var self = this, name = 'example1';self.clickToolbar(name, function() {self.insertHtml('<strong>测试内容</strong>');});});// 自定义插件#2ng({example2 : 'CLASS样式'});KindEditor.plugin('example2', function(K) {var self = this, name = 'example2';function click(value) {var cmd = self.cmd;if (value === 'adv_strikethrough') {cmd.wrap('<span style="background-color:#e53333;text-decoration:line-through;"></span>');} else {cmd.wrap('<span class="' + value + '"></span>');}cmd.select();self.hideMenu();}self.clickToolbar(name, function() {var menu = self.createMenu({name : name,width : 150});menu.addItem({title : '红底白字',click : function() {click('red');}});menu.addItem({title : '绿底白字',click : function() {click('green');}});menu.addItem({title : '黄底白字',click : function() {click('yellow');}});menu.addItem({title : '自定义删除线',click : function() {click('adv_strikethrough');}});});});KindEditor.ready(function(K) {K.create('#content1', {cssPath : ['../plugins/code/prettify.css', 'index.css'],items : ['source', 'removeformat', 'example1', 'example2', 'code']});});</script><textarea id="content1" name="content" style="width:700px;height:200px; visibility:hidden;"></textarea>单独调用组件上传图片弹出框<script src="../kindeditor.js"></script><script src="../lang/zh_CN.js"></script><script>KindEditor.ready(function(K) {var editor = K.editor({allowFileManager : true});K('#image').click(function() {editor.loadPlugin('image', function() {editor.plugin.imageDialog({imageUrl : K('#url').val(),clickFn : function(url, title, width, height, border, align) {K('#url').val(url);editor.hideDialog();}});});});});</script><input type="text" id="url" value="" /> <input type="button" id="image" value="选择图片" />取色器<script src="../kindeditor-min.js"></script><script>KindEditor.ready(function(K) {var colorpicker;K('#colorpicker').bind('click', function(e) {if (colorpicker) {colorpicker.remove();colorpicker = null;}var colorpickerPos = K('#colorpicker').pos();colorpicker = K.colorpicker({x : colorpickerPos.x,y : colorpickerPos.y + K('#colorpicker').height(),z : 19811214,selectedColor : 'default',noColor : '无颜色',click : function(color) {K('#color').val(color);colorpicker.remove();colorpicker = null;}});});});</script><input type="text" id="color" value="" /> <input type="button" id="colorpicker" value="打开取色器" />四．jsp基本编辑器使用步骤：1.把edit.htm 修改为edit.jsp2.把想要使用的地方包含edit.jsp就行了代码：<!--富文本编辑器--><%@ include file="edit.jsp"%>注意事项：在需要引入编辑器的页面中的onload事件，要结合edit.jsp中的事件五．Xheditor(1) 解压压缩文件，将其中的xheditor-zh-cn.min.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹上传到网站相应目录注：如果您网站中没有使用jQuery框架，也请一并上传jquery文件夹中的jquery-1.4.4.min.js (2) 在相应html文件的</head>之前添加<script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript" src="/js/xheditor.js"></script>注：如果jQuery之前已经在项目页面中使用，请勿重复添加引用代码(3).方法1：在textarea上添加属性：class="xheditor"例如：<textarea name="content" class="xheditor">test</textarea>方法2：在您的页面初始JS代码里加上：$('#elm1').xheditor();$('#elm1').xheditor()；例如：$({$('#elm1').xheditor()；});相应的卸载编辑器的代码为$('#elm1').xheditor(false)；例：自定义按钮<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script><script type="text/javascript" src="../xheditor-1.1.12-zh-cn.min.js"></script><script type="text/javascript">$(pageInit);function pageInit(){$.extend(xheditor.settings,{shortcuts:{'ctrl+enter':submitForm}});$('#elm1').xheditor({tools:'full'});$('#elm2').xheditor({tools:'mfull'});$('#elm3').xheditor({tools:'simple'});$('#elm4').xheditor({tools:'mini'});$('#elm5').xheditor({tools:'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About'});$('#elm6').xheditor({tools:'Cut,Copy,Paste,Pastetext,/,Source,Fullscreen,About'});}function submitForm(){$('#frmDemo').submit();}</script>1,full(完全):<br /><textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为：</textarea>2,mfull(多行完全):<br /><textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%"> 当前实例调用的Javascript源代码为：</textarea>3,simple(简单):<br /><textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为：</textarea>4,mini(迷你):<br /><textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%"> 当前实例调用的Javascript源代码为：</textarea>5,custom(自定义):<br /><textarea id="elm5" name="elm5" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为：</textarea>6,自定义多行模式:<br /><textarea id="elm6" name="elm6" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为</textarea>皮肤选择注：为了保持项目精简，同一个页面只能调用一个皮肤，当同一界面同时调用多个皮肤时，最后一个皮肤的按钮面板样式会影响之前的<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script><script type="text/javascript" src="../xheditor-1.1.12-zh-cn.min.js"></script><script type="text/javascript">$(pageInit);function pageInit(){$.extend(xheditor.settings,{shortcuts:{'ctrl+enter':submitForm}});$('#elm1').xheditor({skin:'default'});$('#elm2').xheditor({skin:'o2007blue'});$('#elm3').xheditor({skin:'o2007silver'});$('#elm4').xheditor({skin:'vista'});$('#elm5').xheditor({skin:'nostyle'});}function submitForm(){$('#frmDemo').submit();}</script>1,默认皮肤:<br/><textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为：</textarea>2,Office 2007 蓝色:<br /><textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为：</textarea>3,Office 2007 银白色:<br /><textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为</textarea>4,Vista:<br /><textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为</textarea>5,NoStyle:<br /><textarea id="elm5" name="elm5" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为</textarea>六．Tinymce使用：tinyMCE.init({mode : "textareas",theme : "simple" //模式skin : "o2k7",//word});默认模式<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript">tinyMCE.init({mode : "textareas",theme : "simple"});</script><textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">This is some example text that you can edit inside the <strong>TinyMCE editor</textarea>皮肤设置<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script type="text/javascript">tinyMCE.init({// General optionsmode : "exact",elements : "elm1",theme : "advanced",plugins :"autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreple,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosa",// Theme optionstheme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|, justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist, numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,prevw, |,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|, charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|, styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,no,template,pagebreak,restoredraft",theme_advanced_toolbar_location : "top",//工具栏位置theme_advanced_toolbar_align : "left",//工具栏对齐方式theme_advanced_statusbar_location : "bottom",//状态显示栏的位置theme_advanced_resizing : true,// Example content CSS (should be your site CSS)content_css : "css/content.css",// Drop lists for link/image/media/template dialogstemplate_external_list_url : "lists/template_list.js",external_link_list_url : "lists/link_list.js",external_image_list_url : "lists/image_list.js",media_external_list_url : "lists/media_list.js",// Replace values for the template plugintemplate_replace_values : {username : "Some User",staffid : "991234"}});</scritp><textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%"><script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script type="text/javascript">// O2k7 skintinyMCE.init({// General optionsmode : "exact",elements : "elm2",theme : "advanced",skin : "o2k7",plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink, emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreg, xhtmlxtras,template,inlinepopups,autosave",// Theme optionstheme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|, justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime, preview,|,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|, charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|, styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",theme_advanced_toolbar_location : "top",theme_advanced_toolbar_align : "left",theme_advanced_statusbar_location : "bottom",theme_advanced_resizing : true,// Example content CSS (should be your site CSS)content_css : "css/content.css",// Drop lists for link/image/media/template dialogstemplate_external_list_url : "lists/template_list.js",external_link_list_url : "lists/link_list.js",external_image_list_url : "lists/image_list.js",media_external_list_url : "lists/media_list.js",// Replace values for the template plugintemplate_replace_values : {username : "Some User",staffid : "991234"}});</script><textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">This is some example text that you can edit inside the <strong>TinyMCE editor;.</textarea><script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script type="text/javascript">// O2k7 skin (silver)tinyMCE.init({// General optionsmode : "exact",elements : "elm3",theme : "advanced",skin : "o2k7",skin_variant : "silver",plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave",// Theme optionstheme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect, formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|, ltr,rtl,|,fullscreen",theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|, styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchas,nonbreaking,template,pagebreak,restoredraft",theme_advanced_toolbar_location : "top",theme_advanced_toolbar_align : "left",theme_advanced_statusbar_location : "bottom",theme_advanced_resizing : true,// Example content CSS (should be your site CSS)content_css : "css/content.css",// Drop lists for link/image/media/template dialogstemplate_external_list_url : "lists/template_list.js",external_link_list_url : "lists/link_list.js",external_image_list_url : "lists/image_list.js",media_external_list_url : "lists/media_list.js",// Replace values for the template plugintemplate_replace_values : {username : "Some User",staffid : "991234"}});</script><textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">This is some example text that you can edit inside the <strong>TinyMCE</textarea><script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script type="text/javascript">// O2k7 skin (silver)tinyMCE.init({// General optionsmode : "exact",elements : "elm4",theme : "advanced",skin : "o2k7",skin_variant : "black",plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave",// Theme optionstheme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect, formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|, ltr,rtl,|,fullscreen",theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",theme_advanced_toolbar_location : "top",theme_advanced_toolbar_align : "left",theme_advanced_statusbar_location : "bottom",theme_advanced_resizing : true,// Example content CSS (should be your site CSS)content_css : "css/content.css",// Drop lists for link/image/media/template dialogstemplate_external_list_url : "lists/template_list.js",external_link_list_url : "lists/link_list.js",external_image_list_url : "lists/image_list.js",media_external_list_url : "lists/media_list.js",// Replace values for the template plugintemplate_replace_values : {username : "Some User",staffid : "991234"}});</script><textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">This is some example text that you can edit inside the ;</textarea>七．ueditor11.避免了重复加载源码高亮的核心代码2.修复了word粘贴table过滤出错问题3.修复插入地图会出现style="undefined"的问题4.优化了list，多个相邻的属性一直的list会合并5.可以在列表中的一行里产生多行的效果（通过回车再回退操作），类似office的效果6.添加自定义样式功能7.修了在chrome下右键删除td里的图片会把整个td删除的问题8.改进了不同的页面调用一个editor，URL问题9.增加了颜色选择器的颜色10.改进了提供的后台程序的安全性11.代码高亮支持折行12.改进了源码编辑模式下的性能(ie下),并且支持自动换行13.修改了在destroy之后会在ie下报错的问题14.给初始化容器name值，那么在后台取值的键值就是name给定的值，方便多实例在一个form下提交15.支持插入script/style这样的标签16.修复了列表里插入浮动图片，图片不占位问题17.源码模式下,去掉了pre中的18.完善了_example下的demo例子19.base64的图片被过滤掉了使用方法：var editorOption = {//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],//focus时自动清空初始化时的内容autoClearinitialContent:true,//关闭字数统计wordCount:false,//关闭elementPathelementPathEnabled:false//更多其他参数，请参考editor_config.js中的配置项};var editor_a = new baidu.editor.ui.Editor(editorOption);editor_a.render( ' textarea的Id ' );例：简单应用<script type="text/javascript">var UEDITOR_HOME_URL = "../"; //指向dialogs，themes等目录的父目录，推荐使用/开头的绝对路径</script><script type="text/javascript" charset="utf-8" src="../editor_config.js"></script><!--使用版--><!--<script type="text/javascript" charset="utf-8" src="../editor_all.js"></script>--><!--开发版--><script type="text/javascript" charset="utf-8" src="editor_api.js">paths = ['editor.js','core/browser.js','core/utils.js','core/EventBase.js','core/dom/dom.js','core/dom/dtd.js','core/dom/domUtils.js','core/dom/Range.js','core/dom/Selection.js','core/Editor.js','commands/inserthtml.js','commands/image.js','commands/justify.js','commands/font.js','commands/link.js','commands/map.js','commands/iframe.js','commands/removeformat.js','commands/blockquote.js','commands/indent.js','commands/print.js','commands/preview.js','commands/spechars.js','commands/emotion.js','commands/selectall.js','commands/paragraph.js','commands/directionality.js','commands/horizontal.js','commands/time.js','commands/rowspacing.js','commands/lineheight.js','commands/cleardoc.js','commands/anchor.js','commands/delete.js','commands/wordcount.js','plugins/pagebreak/pagebreak.js','plugins/checkimage/checkimage.js','plugins/undo/undo.js','plugins/paste/paste.js', //粘贴时候的提示依赖了UI'plugins/list/list.js','plugins/source/source.js','plugins/shortcutkeys/shortcutkeys.js','plugins/enterkey/enterkey.js','plugins/keystrokes/keystrokes.js','plugins/fiximgclick/fiximgclick.js','plugins/autolink/autolink.js','plugins/autoheight/autoheight.js','plugins/autofloat/autofloat.js', //依赖UEditor UI,在IE6中，会覆盖掉body的背景图属性'plugins/highlight/highlight.js','plugins/serialize/serialize.js','plugins/video/video.js','plugins/table/table.js','plugins/contextmenu/contextmenu.js','plugins/pagebreak/pagebreak.js','plugins/basestyle/basestyle.js','plugins/elementpath/elementpath.js','plugins/formatmatch/formatmatch.js','plugins/searchreplace/searchreplace.js','plugins/customstyle/customstyle.js','ui/ui.js','ui/uiutils.js',。
Kindeditor中实用的编辑器api详解和实例用法（一）
Kindeditor中实⽤的编辑器api详解和实例⽤法（⼀）K.create(expr [, options])创建编辑器，返回第⼀个KEditor对象。
4.1版本开始expr⽀持多个textarea，之前版本只在第⼀个textarea上创建。
创建编辑器后可以⽤ KindEditor.instances 数组取得已创建的所有KEditor对象。
参数:mixed expr: element或选择器返回: KEditor⽰例:01// 102// editor 等于 KindEditor.instances[0]03editor = K.create('textarea[name="content"]');04editor.html('HTML code');050607// 208editor = K.create('#editor_id', {09 filterMode : true,10 langType : 'en'11});remove()移除编辑器。
参数: ⽆返回: KEditor⽰例:1editor.remove();html()取得编辑器的HTML内容。
参数: ⽆返回: string⽰例:1var html = editor.html();html(val)设置编辑器的HTML内容。
参数:string val: HTML返回: KEditor⽰例:1editor.html('<strong>HTML</strong> code');fullHtml()取得完整的HTML内容，HTML包含<html>标签。
参数: ⽆返回: string⽰例:1var fullHtml = editor.fullHtml();text()取得编辑器的纯⽂本内容。
(包含img和embed)参数: ⽆返回: string⽰例:1var text = editor.text();text(val)设置编辑器的内容，直接显⽰HTML代码。
tinymce富文本设置固定值行间距的方法
tinymce富文本设置固定值行间距的方法TinyMCE是一款开源的网页文本编辑器，支持HTML、纯文本等格式的编辑，且可自定义编辑器样式。
关于设置固定值行间距，可以参考以下步骤：1. 首先，需要在TinyMCE的初始化配置中设置style_formats选项，其中可以设置字体、字号、字间距、行间距等样式。
例如：```({selector: 'mytextarea',style_formats: [{title: '固定行间距', items: [{title: '固定值', block: 'p', styles: {'line-height': '20px'}}]},// 添加其他样式...]});```上述代码中，我们定义了一个名为“固定行间距”的样式，该样式的行高设置为20px。
2. 其次，需要确保在TinyMCE的初始化配置中启用了style_formats选项。
例如：```({selector: 'mytextarea',style_formats: true, // 启用style_formats选项...});```这样就能启用style_formats选项，并应用我们之前定义的样式。
3. 最后，可以在TinyMCE的编辑器中选中需要设置行间距的段落，然后在样式下拉菜单中选择“固定行间距”样式即可。
注意：以上代码仅为示例，实际使用时需要根据自己的需求进行修改。
同时，TinyMCE的配置项和选项可能会随着版本的更新而发生变化，建议查阅TinyMCE的官方文档以获取最新和最准确的信息。
tinymce 语法规则
tinymce 语法规则
TinyMCE是一个流行的富文本编辑器，其语法规则主要涉及编辑器内部的命令和功能。
以下是TinyMCE的一些语法规则：
1.基本语法：TinyMCE通过使用特定的命令来执行编辑操作。
这些命令通常以
"commandName"的形式出现，例如"Bold"、"Italic"等。
要调用这些命令，可以使用TinyMCE提供的execCommand方法。
2.插入链接：TinyMCE提供了一个用于插入链接的命令。
要使用这个命令，需要提供
链接的URL和可选的目标框架。
例如，可以使用TinyMCE的insertLink方法来插入一个链接。
3.插入图像：TinyMCE还提供了一个用于插入图像的命令。
要使用这个命令，需要提
供图像的源路径、替代文本、宽度和高度等参数。
例如，可以使用TinyMCE的insertImage方法来插入一个图像。
4.设置编辑器属性：TinyMCE允许通过设置编辑器的属性来配置其行为。
例如，可以
设置编辑器的语言、高度、菜单栏、工具栏等属性。
这些属性可以在初始化编辑器时进行设置。
5.自定义插件和扩展：TinyMCE支持通过插件和扩展来扩展其功能。
可以使用
TinyMCE提供的API来创建自定义插件和扩展，并使用TinyMCE提供的机制将其集成到编辑器中。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
KindEditor-编辑器配置参数属性KindEditor编辑器的使用方法，通过使用KE.show(config)方法即可将编辑器添加到文档中。
下面是一段源码：KE.show = function(args) {KE.init(args);KE.event.ready(function() { KE.create(args.id); });};从源码中可以看出，有两种使用编辑器的方法：法一：KE.show(config);法二：KE.init(config);KE.create(id);·无论使用哪种方式使用KindEditor编辑器，都必须进行参数配置；·可以在KE.show()和KE.init()方法中传递配置参数config；·配置参数config是一个对象，一般使用字面量对象；·其中，id参数是唯一必须进行配置的，其他参数可以省略。
参数设置例子KE.show({id : "content_1",width : "70%", //编辑器的宽度为70%height : "200px", //编辑器的高度为100pxfilterMode : false, //不会过滤HTML代码resizeMode : 1 //编辑器只能调整高度});配置参数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输入框样式表宽度优先度高。
数据类型：String默认值：TEXTAREA输入框的宽度注: 3.2版本开始支持。
4、height编辑器的高度，只能设置px，比TEXTAREA输入框样式表高度优先度高。
数据类型：String默认值：TEXTAREA输入框的高度注: 3.2版本开始支持。
5、minWidth数据类型：Int指定编辑器最小宽度，单位为px。
默认值：2006、minHeight数据类型：Int指定编辑器最小高度，单位为px。
默认值：1007、filterMode数据类型：Booleantrue时过滤HTML代码，false时允许输入任何代码。
默认值：false注: 3.4以前版本的filterMode默认值为true。
8、htmlTags指定要保留的HTML标记和属性。
哈希数组的key为HTML标签名，value为HTML属性数组，"."开始的属性表示style属性。
数据类型：Object默认值：{font: ['color', 'size', 'face', '.background-color'],span: ['style'],div: ['class', 'align', 'style'],table:['class', 'border', 'cellspacing','cellpadding', 'width', 'height', 'align', 'style'], 'td,th':['class', 'align', 'valign', 'width','height','colspan', 'rowspan', 'bgcolor','style'],a: ['class', 'href', 'target', 'name', 'style'],embed: ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality','style', 'align','allowscriptaccess', '/'],img: ['src', 'width', 'height', 'border', 'alt','title', 'align', 'style', '/'],hr: ['class', '/'],br: ['/'],'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : ['align', 'style'],'tbody,tr,strong,b,sub,sup,em,i,u,strike' : []}注：filterMode为true时有效。
3.4版本开始属性可设置style，保留所有inline样式。
9、resizeMode2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。
数据类型：Int默认值：210、skinType风格类型，default或tinymce。
数据类型：String默认值：default注：3.4以前版本和3.4.1版本开始默认值为default，3.4版本的默认值为oxygen。
11、wyswygMode可视化模式或代码模式数据类型：Boolean默认值：true12、cssPath指定编辑器iframe document的CSS，用于设置可视化区域的样式。
数据类型：String或Array默认值：空注：3.4.1版本开始可指定多个CSS文件。
例如：cssPath : ['a.css', 'b.css']13、skinsPath指定编辑器的skins目录，skins目录存放风格的css文件和gif图片。
数据类型：String默认值：KE.scriptPath + 'skins/'14、pluginsPath指定编辑器的plugins目录。
数据类型：String默认值：KE.scriptPath + 'plugins/'15、minChangeSizeundo/redo文字输入最小变化长度，当输入的文字变化小于这个长度时不会添加到undo堆栈里。
数据类型：Int默认值：516、loadStyleModetrue时自动加载编辑器的CSS。
数据类型：Boolean默认值：true注: 3.4版本开始支持。
17、urlType改变站内本地URL，可设置空、relative、absolute、domain。
空为不修改URL，relative为相对路径，absolute为绝对路径，domain 为带域名的绝对路径。
数据类型：String默认值：空注: 3.4版本开始支持，3.4.1版本开始默认值为空。
18、newlineTag设置回车换行标签，可设置p、br。
数据类型：String默认值：br注: 3.4版本开始支持。
19、afterCreate设置编辑器创建后执行的回调函数。
数据类型：Function默认值：无20、afterDialogCreate设置弹出浮动框创建后执行的回调函数。
数据类型：Function默认值：无注: 3.4.3版本开始支持。
21、allowUploadtrue或false，true时显示上传图片标签。
数据类型：Boolean默认值：true注: 3.4版本开始支持。
22、allowFileManagertrue或false，true时显示浏览服务器图片功能。
数据类型：Boolean默认值：false注: 3.4版本开始支持。
23、referMethod设置referMethod后上传图片的POST参数里有referMethod。
数据类型：String默认值：空注: 3.4版本开始支持。