在线HTML编辑器KindEditor - 向往的生活
简介
KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序接合。
示例
1 $(function() { 2 KindEditor.ready(function(K) { 3 editor1 = K.create(\'textarea[name="menuContent"]\', { 4 allowFileManager : true,//true时显示浏览远程服务器按钮 5 allowPreviewEmoticons : false, 6 wellFormatMode:false, 7 wellFormatMode:false, 8 width:650, 9 height:350, 10 allowImageUpload : true, 11 items:["source", "preview","template","cut","copy","paste", 12 "plainpaste","wordpaste","justifyleft","justifycenter", 13 "justifyright","justifyfull","insertorderedlist","insertunorderedlist", 14 "indent","outdent","subscript","superscript","quickformat", 15 "formatblock","fontname","fontsize","forecolor","hilitecolor", 16 "bold","italic","underline","strikethrough","lineheight","removeformat", 17 "table","hr","link","unlink","image","fontsize"], 18 afterCreate : function() { 19 },afterBlur: function(){ 20 this.sync(); 21 } 22 }); 23 });
参数说明
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 | 关于 |
| 打印 | |
| 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。
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>
urlType
改变站内本地URL，可设置”“、”relative”、”absolute”、”domain”。空为不修改URL，relative为相对路径，absolute为绝对路径，domain为带域名的绝对路径。
- 数据类型: String
- 默认值: “”
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\']
]
afterUpload
上传文件后执行的回调函数。
- 数据类型: Function
- 默认值: 无
KindEditor.ready(function(K) {
K.create(\'#id\', {
afterUpload : function(url) {
alert(url);
}
});
});
fontSizeTable
指定文字大小。
- 数据类型: Array
- 默认值:
[\'9px\', \'10px\', \'12px\', \'14px\', \'16px\', \'18px\', \'24px\', \'32px\']
extraFileUploadParams
上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。
- 数据类型: Array
- 默认值: {}
KindEditor.ready(function(K) {
K.create(\'#id\', {
extraFileUploadParams : {
item_id : 1000,
category_id : 1
}
});
});
Note
4.1.1版本开始支持。
fillDescAfterUploadImage
true时图片上传成功后切换到图片编辑标签，false时插入图片后关闭弹出框。
- 数据类型: Boolean
- 默认值: false
Note
4.1.2版本开始支持。
pagebreakHtml
可指定分页符HTML。
- 数据类型: String
- 默认值: <hr style=”page-break-after: always;” class=”ke-pagebreak” />
Note
4.1.3版本开始支持。
参考链接：http://kindeditor.net/docs/option.html
版权声明：本文为jichuang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。