简介

　　KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序接合。

示例　

 $(function() {

         KindEditor.ready(function(K) {

                 editor1 = K.create('textarea[name="menuContent"]', {

                     allowFileManager : true,//true时显示浏览远程服务器按钮

                     allowPreviewEmoticons : false,

                     wellFormatMode:false,

                     wellFormatMode:false,

                     width:,

                     height:,

                     allowImageUpload : true,

                     items:["source", "preview","template","cut","copy","paste",

                     "plainpaste","wordpaste","justifyleft","justifycenter",

                     "justifyright","justifyfull","insertorderedlist","insertunorderedlist",

                     "indent","outdent","subscript","superscript","quickformat",

                     "formatblock","fontname","fontsize","forecolor","hilitecolor",

                     "bold","italic","underline","strikethrough","lineheight","removeformat",

                     "table","hr","link","unlink","image","fontsize"],

                     afterCreate : function() {

                     },afterBlur: function(){

                         this.sync();

                     }

                 });

         });

参数说明

　　width

　　编辑器的宽度，可以设置px或%，比textarea输入框样式表宽度优先度高。　　

  • 数据类型: String
  • 默认值: textarea输入框的宽度

　　height　　

　　编辑器的高度，只能设置px，比textarea输入框样式表高度优先度高。

  • 数据类型: String
  • 默认值: textarea输入框的高度

　　minWidth

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

  • 数据类型: Int
  • 默认值: 650

　　minHeight

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

  • 数据类型: Int
  • 默认值: 100

　　items

　　配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。

  • 数据类型: Array
  • 默认值:
[

        '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'

]
source HTML代码
preview 预览
undo 后退
redo 前进
cut 剪切
copy 复制
paste 粘贴
plainpaste 粘贴为无格式文本
wordpaste 从Word粘贴
selectall 全选
justifyleft 左对齐
justifycenter 居中
justifyright 右对齐
justifyfull 两端对齐
insertorderedlist 编号
insertunorderedlist 项目符号
indent 增加缩进
outdent 减少缩进
subscript 下标
superscript 上标
formatblock 段落
fontname 字体
fontsize 文字大小
forecolor 文字颜色
hilitecolor 文字背景
bold 粗体
italic 斜体
underline 下划线
strikethrough 删除线
removeformat 删除格式
image 图片
flash Flash
media 视音频
table 表格
hr 插入横线
emoticons 插入表情
link 超级链接
unlink 取消超级链接
fullscreen 全屏显示
about 关于
print 打印
code 插入程序代码
map Google地图
baidumap 百度地图
lineheight 行距
clearhtml 清理HTML代码
pagebreak 插入分页符
quickformat 一键排版
insertfile 插入文件
template 插入模板
anchor 插入锚点

　noDisableItems

　　designMode 为false时，要保留的工具栏图标。

  • 数据类型: Array
  • 默认值: [‘source’, ‘fullscreen’]

　filterMode

　　true时根据 htmlTags 过滤HTML代码，false时允许输入任何代码。

  • 数据类型: Boolean
  • 默认值: true

Note

4.1.1版本开始默认值为true。

 　htmlTags

　　指定要保留的HTML标记和属性。Object的key为HTML标签名，value为HTML属性数组，”.”开始的属性表示style属性。

  • 数据类型: Object
  • 默认值:
{

        font : ['color', 'size', 'face', '.background-color'],

        span : [

                '.color', '.background-color', '.font-size', '.font-family', '.background',

                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.line-height'

        ],

        div : [

                'align', '.border', '.margin', '.padding', '.text-align', '.color',

                '.background-color', '.font-size', '.font-family', '.font-weight', '.background',

                '.font-style', '.text-decoration', '.vertical-align', '.margin-left'

        ],

        table: [

                'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'bordercolor',

                '.padding', '.margin', '.border', 'bgcolor', '.text-align', '.color', '.background-color',

                '.font-size', '.font-family', '.font-weight', '.font-style', '.text-decoration', '.background',

                '.width', '.height', '.border-collapse'

        ],

        'td,th': [

                'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor',

                '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.font-weight',

                '.font-style', '.text-decoration', '.vertical-align', '.background', '.border'

        ],

        a : ['href', 'target', 'name'],

        embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],

        img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'],

        'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [

                'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background',

                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'

        ],

        pre : ['class'],

        hr : ['class', '.page-break-after'],

        'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : []

}

　wellFormatMode

　　true时美化HTML数据。

  • 数据类型: Boolean
  • 默认值: true

　resizeType

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

  • 数据类型: Int
  • 默认值: 2

　themeType

　　指定主题风格，可设置”default”、”simple”，指定simple时需要引入simple.css。

  • 数据类型: String
  • 默认值: “default”

　　示例:

<link rel="stylesheet" href="../themes/default/default.css" />

<link rel="stylesheet" href="../themes/simple/simple.css" />

<script charset="utf-8" src="../kindeditor.js"></script>

<script charset="utf-8" src="../lang/zh-CN.js"></script>

<script>

        var editor;

        KindEditor.ready(function(K) {

                editor = K.create('#editor_id', {

                        themeType : 'simple'

                });

        });

</script>

langType

指定语言，可设置”en”、”zh-CN”，需要引入lang/[langType].js。

  • 数据类型: String
  • 默认值: “zh-CN”

示例:

<link rel="stylesheet" href="../themes/default/default.css" />

<script charset="utf-8" src="../kindeditor.js"></script>

<script charset="utf-8" src="../lang/en.js"></script>

<script>

        var editor;

        KindEditor.ready(function(K) {

                editor = K.create('#editor_id', {

                        langType : 'en'

                });

        });

</script>

designMode

可视化模式或代码模式

  • 数据类型: Boolean
  • 默认值: true

fullscreenMode

true时加载编辑器后变成全屏模式。

  • 数据类型: Boolean
  • 默认值: false

basePath

指定编辑器的根目录路径。

  • 数据类型: String
  • 默认值: 根据kindeditor.js文件名自动获取

themesPath

指定编辑器的themes目录路径。

  • 数据类型: String
  • 默认值: basePath + ‘themes/’

pluginsPath

指定编辑器的plugins目录路径。

  • 数据类型: String
  • 默认值: basePath + ‘plugins/’

langPath

指定编辑器的lang目录路径。

  • 数据类型: String
  • 默认值: basePath + ‘lang/’

minChangeSize

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

  • 数据类型: String
  • 默认值: 5

urlType

改变站内本地URL，可设置”“、”relative”、”absolute”、”domain”。空为不修改URL，relative为相对路径，absolute为绝对路径，domain为带域名的绝对路径。

  • 数据类型: String
  • 默认值: “”

newlineTag

设置回车换行标签，可设置”p”、”br”。

  • 数据类型: String
  • 默认值: “p”

pasteType

设置粘贴类型，0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴

  • 数据类型: Int
  • 默认值: 2

dialogAlignType

设置弹出框(dialog)的对齐类型，可设置”“、”page”，指定page时按当前页面居中，指定空时按编辑器居中。

  • 数据类型: String
  • 默认值: “page”

shadowMode

true时弹出层(dialog)显示阴影。

  • 数据类型: Boolean
  • 默认值: true

zIndex

指定弹出层的基准z-index。

  • 数据类型: Int
  • 默认值: 811213

useContextmenu

true时使用右键菜单，false时屏蔽右键菜单。

  • 数据类型: Boolean
  • 默认值: true

syncType

同步数据的方式，可设置”“、”form”，值为form时提交form时自动同步，空时不会自动同步。

  • 数据类型: String
  • 默认值: “form”

indentChar

wellFormatMode 为true时，HTML代码缩进字符。

  • 数据类型: String
  • 默认值: “\t”

cssPath

指定编辑器iframe document的CSS文件，用于设置可视化区域的样式。

  • 数据类型: String或Array
  • 默认值: 空

cssData

指定编辑器iframe document的CSS数据，用于设置可视化区域的样式。

  • 数据类型: String
  • 默认值: 空

bodyClass

指定编辑器iframe document body的className。

  • 数据类型: String
  • 默认值: “ke-content”

colorTable

指定取色器里的颜色。

  • 数据类型: Array
  • 默认值:
[

        ['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'],

        ['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'],

        ['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'],

        ['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000']

]

afterCreate

设置编辑器创建后执行的回调函数。

  • 数据类型: Function
  • 默认值: 无

afterChange

编辑器内容发生变化后执行的回调函数。

  • 数据类型: Function
  • 默认值: 无

afterTab

按下TAB键后执行的的回调函数。

  • 数据类型: Function
  • 默认值: 插入4个空格的函数

afterFocus

编辑器聚焦(focus)时执行的回调函数。

  • 数据类型: Function
  • 默认值: 无

afterBlur

编辑器失去焦点(blur)时执行的回调函数。

  • 数据类型: Function
  • 默认值: 无

afterUpload

上传文件后执行的回调函数。

  • 数据类型: Function
  • 默认值: 无
KindEditor.ready(function(K) {

        K.create('#id', {

                afterUpload : function(url) {

                        alert(url);

                }

        });

});

uploadJson

指定上传文件的服务器端程序。

  • 数据类型: String
  • 默认值: basePath + ‘php/upload_json.php’

fileManagerJson

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

  • 数据类型: String
  • 默认值: basePath + ‘php/file_manager_json.php’

allowPreviewEmoticons

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

  • 数据类型: Boolean
  • 默认值: true

allowImageUpload

true时显示图片上传按钮。

  • 数据类型: Boolean
  • 默认值: true

allowFlashUpload

true时显示Flash上传按钮。

  • 数据类型: Boolean
  • 默认值: true

allowMediaUpload

true时显示视音频上传按钮。

  • 数据类型: Boolean
  • 默认值: true

allowFileUpload

true时显示文件上传按钮。

  • 数据类型: Boolean
  • 默认值: true

Note

4.0.6版本开始支持。

allowFileManager

true时显示浏览远程服务器按钮。

  • 数据类型: Boolean
  • 默认值: false

fontSizeTable

指定文字大小。

  • 数据类型: Array
  • 默认值:
['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']

imageTabIndex

图片弹出层的默认显示标签索引。

  • 数据类型: Int
  • 默认值: 0

Note

4.0.6版本开始支持。

formatUploadUrl

false时不会自动格式化上传后的URL。

  • 数据类型: Boolean
  • 默认值: true

Note

4.1版本开始支持。

fullscreenShortcut

false时禁用ESC全屏快捷键。

  • 数据类型: Boolean
  • 默认值: false

Note

4.1版本开始支持，从4.1.2版本开始默认值为false。

extraFileUploadParams

上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。

  • 数据类型: Array
  • 默认值: {}
KindEditor.ready(function(K) {

        K.create('#id', {

                extraFileUploadParams : {

                        item_id : 1000,

                        category_id : 1

                }

        });

});

Note

4.1.1版本开始支持。

filePostName

指定上传文件form名称。

  • 数据类型: String
  • 默认值: imgFile

Note

4.1.2版本开始支持。

fillDescAfterUploadImage

true时图片上传成功后切换到图片编辑标签，false时插入图片后关闭弹出框。

  • 数据类型: Boolean
  • 默认值: false

Note

4.1.2版本开始支持。

afterSelectFile

从图片空间选择文件后执行的回调函数。

  • 数据类型: Function
  • 默认值: 无

Note

4.1.2版本开始支持。

pagebreakHtml

可指定分页符HTML。

  • 数据类型: String
  • 默认值: <hr style=”page-break-after: always;” class=”ke-pagebreak” />

Note

4.1.3版本开始支持。

allowImageRemote

true时显示网络图片标签，false时不显示。

  • 数据类型: Boolean
  • 默认值: true

Note

4.1.6版本开始支持。

autoHeightMode

值为true，并引入autoheight.js插件时自动调整高度。

  • 数据类型: Boolean
  • 默认值: false

Note

4.1.8版本开始支持。

fixToolBar

值为true，并引入fixtoolbar.js插件时固定工具栏位置。

  • 数据类型: Boolean
  • 默认值: false

参考链接：http://kindeditor.net/docs/option.html

在线HTML编辑器KindEditor的更多相关文章

  1. 纯JS文本在线HTML编辑器KindEditor

    KindEditor(http://www.kindsoft.net)是一款比较专业,主流,好用的在线HTML编辑器. 它除了可以将文本进行编辑.将Word中的内容复制进来外,本身还可以拖动缩放(右下 ...

  2. HTML编辑器KindEditor

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

  3. $Django 在线文本编辑器skindeditor

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

  4. HTML编辑器 -- KindEditor

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

  5. Django配置富文本编辑器kindeditor

    一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...

  6. Django之富文本编辑器kindeditor 及上传

    1.什么是富文本编辑器 百度百科(https://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 ...

  7. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  8. 富文本编辑器kindeditor配置

    <!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...

  9. (视频) 《快速创建网站》 3.2 WordPress多站点及Azure在线代码编辑器 － 扔掉你的ftp工具吧，修改代码全部云端搞定

    本文是<快速创建网站>系列的第6篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...

随机推荐

  1. Hnoi-2017 滚粗记

    一路走来,OI生涯中最重要的一场比赛在10个小时的比赛后,在不止10个小时的焦急等待中,也就这么结束了呢... Day 0: 当时其实内心里面还是比较虚的,还记得在回家的路上和$DYC$大佬畅想我们省 ...

  2. Redhat中关于httpd仓库安装的简要步骤

    创建repo-server: yum install httpd yum  install  httpd  -y       < -y 表示在安装过程中与界面交互时自动答复yes >sys ...

  3. MDK编译过程

    原博文:https://blog.csdn.net/qq_33894122/article/details/83994564

  4. mongo学习笔记---1

    mongo简介 非结构化数据库,数据都是以Bson格式(json的二进制)存储的. 特点:不需要指定表结构,存在一张表里的数据其结构可以完全不同.内部执行引擎为JS解释器, 把文档存储成bson结构, ...

  5. C#反射详解

    http://blog.csdn.net/educast/article/details/2894892(转) 两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内脏 ...

  6. Struts2中 Action class not found 问题

    刚学Struts2时碰到了以下两个问题,都是没有正确配置struts.xml导致的,自己记录一下: 1.浏览器报404:The origin server did not find a current ...

  7. 『Python CoolBook』C扩展库_其一_用法讲解

    不依靠其他工具,直接使用Python的扩展API来编写一些简单的C扩展模块. 本篇参考PythonCookbook第15节和Python核心编程完成,值得注意的是,Python2.X和Python3. ...

  8. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详解

    1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  9. 读李宏毅《一天看懂深度学习》——Deep Learning Tutorial

    大牛推荐的入门用深度学习导论,刚拿到有点懵,第一次接触PPT类型的学习资料,但是耐心看下来收获还是很大的,适合我这种小白入门哈哈. 原PPT链接:http://www.slideshare.net/t ...

  10. CentOS 每个版本的区别

    当我们下载CentOS 7 时会发现有几个版本可以选择,如下: 1.CentOS-7-DVD版本:DVD是标准安装盘,一般下载这个就可以了. 2.CentOS-7-NetInstall版本:网络安装镜 ...