kindeditor编辑器？KindEditor编辑器的使用方法 KindEditor怎么用

大家好，如果您还对kindeditor编辑器不太了解，没有关系，今天就由本站为大家分享kindeditor编辑器的知识，包括KindEditor编辑器的使用方法 KindEditor怎么用的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

KindEditor编辑器的使用方法 KindEditor怎么用

KindEditor是一款用Javascript编写的开源在线HTML编辑器，主要用户是让用户在网站上获得可见即可得的编辑效果，开发人员可以用 KindEditor把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。你可以在其官网了解更多信息，包括演示、文档、下载等。

KindEditor的使用方法也非常简单，下面言小鱼就简单介绍一下其用法，这些内容你可以在KindEditor官网找到。

KindEditor编辑器的使用方法 KindEditor怎么用

工具/原料

KindEditor编辑器

电脑

方法/步骤

1

你要把所需的文件下载下来，下载地址去上面的官网找吧。

2

你要把所需要的文件上传到你的网站，接下来就是引用了。在需要显示编辑器的位置添加textarea输入框，注意ID在页面中应该是唯一的，不说你也知道。

KindEditor编辑器的使用方法 KindEditor怎么用

3

在该HTML页面添加以下脚本，第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考编辑器初始化参数(官网有详细介绍)。

KindEditor编辑器的使用方法 KindEditor怎么用

KindEditor编辑器的使用方法 KindEditor怎么用

4

如果你想获得编辑器中的数据，可以用下面的代码。

KindEditor编辑器的使用方法 KindEditor怎么用

5

KindEditor的使用方法就介绍到这里了，如果您还有不明白的地方可以去官网查找详细资料，相信一定能找到您想要的答案!

END

注意事项

本文由言小鱼原创，转载请注明，也可以去小鱼的博客看原文。

kindeditor 编辑器php的详细配置方法

通过使用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",//编辑器的高度为100px

filterMode: false,//不会过滤HTML代码

resizeMode: 1//编辑器只能调整高度

});

配置参数

1、id

TEXTAREA输入框的ID，必须设置。

数据类型：String

2、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。

默认值：200

6、minHeight

数据类型：Int

指定编辑器最小高度，单位为px。

默认值：100

7、filterMode

数据类型：Boolean

true时过滤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、resizeMode

2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。

数据类型：Int

默认值：2

10、skinType

风格类型，default或tinymce。

数据类型：String

默认值：default

注：3.4以前版本和3.4.1版本开始默认值为default，3.4版本的默认值为oxygen。

11、wyswygMode

可视化模式或代码模式

数据类型：Boolean

默认值：true

12、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、minChangeSize

undo/redo文字输入最小变化长度，当输入的文字变化小于这个长度时不会添加到undo堆栈里。

数据类型：Int

默认值：5

16、loadStyleMode

true时自动加载编辑器的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、allowUpload

true或false，true时显示上传图片标签。

数据类型：Boolean

默认值：true

注: 3.4版本开始支持。

22、allowFileManager

true或false，true时显示浏览服务器图片功能。

数据类型：Boolean

默认值：false

注: 3.4版本开始支持。

23、referMethod

设置referMethod后上传图片的POST参数里有referMethod。

数据类型：String

默认值：空

注: 3.4版本开始支持。

24、dialogAlignType

设置弹出框(dialog)的对齐类型，可设置page和空。

指定page时按当前页面居中，指定空时按编辑器居中。

数据类型：String

默认值：page

注: 3.4.1版本开始支持。

25、imageUploadJson

指定上传图片的服务器端程序。

数据类型：String

默认值：../../php/upload_json.php

注: 3.4.1版本开始支持。

26、fileManagerJson

指定浏览远程图片的服务器端程序。

数据类型：String

默认值：../../php/file_manager_json.php

注: 3.4.1版本开始支持。

27、autoSetDataMode

true或false。

true时自动将编辑器内容设置到原来的textarea，也就是每次输入内容就执行KE.util.setData函数。

数据类型：Boolean

默认值：true

注: 3.5版本开始支持。打开autoSetDataMode模式后会降低输入性能，理想的做法是关闭autoSetDataMode，提交数据前执行KE.util.setData。

28、afterSetData

自动执行KE.util.setData后执行的回调函数，autoSetDataMode为true时有效。

数据类型：Function

默认值：无

注: 3.5版本开始支持。

29、shadowMode

true或false，true时弹出层显示阴影。

数据类型：Boolean

默认值：true

注: 3.5版本开始支持。

30、allowPreviewEmoticons

true或false，true时鼠标放在表情上可以预览表情。

数据类型：Boolean

默认值：true

注: 3.5版本开始支持。

几种知名开源富文本编辑器

以下是几种知名开源富文本编辑器的介绍：

1. UEditor（百度编辑器）

简介：UEditor是由百度开源的一款所见即所得的富文本编辑器，插件多，基本满足各种需求，界面类似贴吧中的回复界面。优点：功能丰富，插件多样。缺点：不再维护，文档极少，使用并不普遍；图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，较为难办；加载速度慢。2. Kindeditor

简介：Kindeditor是一款轻量级的、开源的在线HTML编辑器，界面类似百度编辑器，效果很像，支持自定义风格。优点：文档齐全，使用还算方便。缺点：界面风格较为老式，没有现代感，还是传统的图标样式。3. Simditor

简介：Simditor是一个基于浏览器的所见即所得富文本编辑器，样式简洁，插件不多，但基本满足需求。优点：维护较好，github上面开源。缺点：文档阅读起来较为吃力。4. bootstrap-wysiwyg

简介：bootstrap-wysiwyg是利用Bootstrap实现的富文本编辑器，简洁大方，移动端兼容较好。优点：轻量、好看、开源、使用方便；在Mac和Wndows平台上能够自动针对常用操作绑定标准热键；可以通过拖拽插入图片，支持图片上传（也可以获取移动设备上的照片）；语音识别输入（仅限Chrome浏览器）。缺点：需要一定的浏览器支持，毕竟需要bootstrap框架。5. WangEditor

简介：WangEditor是一款使用js和css实现的富文本编辑器，轻量简洁，最重要的是开源且中文文档齐全。优点：设计的UI漂亮，插件基本能满足需求；中文文档齐全，易于上手。缺点：目前未发现明显缺点。6. CKEditor

简介：CKEditor是一款功能强大的富文本编辑器，使用较多，编辑能力极强，基本和word差不多了。优点：编辑能力极强，界面优秀。缺点：网站访问速度一般；文档为英文，需要花时间开发。7. Tinymce

简介：Tinymce是一款支持图片在线处理、插件多、功能强的富文本编辑器，编辑能力优秀，界面好看，支持手机端和移动端切换。优点：编辑能力强，界面美观，支持多终端切换。缺点：文档为英文，开发需要花时间。以上是几种知名开源富文本编辑器的介绍，每种编辑器都有其独特的优点和缺点，用户可以根据自己的需求选择合适的编辑器。

END，本文到此结束，如果可以帮助到大家，还望关注本站哦！