width
编辑器的宽度,可以设置px或%,比textarea输入框样式表宽度优先度高。
- 数据类型: String
- 默认值: textarea输入框的宽度
示例:
K.create('#id', { width : '700px' });
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 | 插入锚点 |
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' : [] }
themeType
指定主题风格,可设置”default”、”simple”,指定simple时需要引入simple.css。
- 数据类型: String
- 默认值: “default”
示例:
<link rel="stylesheet" href="../themes/default/default.css" /> <linkrel="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” />
来源:http://www.kindsoft.net/docs/option.html#items
相关推荐
在使用 KindEditor 实现在线编辑的初始化工作时,我们需要理解并掌握一些关键的参数设置。 1. **idTEXTAREA**:这是初始化编辑器时最重要的参数,它定义了与 KindEditor 关联的文本区域(textarea)的 ID。确保这个...
4. **KindEditor初始化参数**: - `uploadJson`:设置上传文件时调用的服务器端程序路径。 - `filePostName`:指定上传文件的表单字段名称。 - `dir`:可选地指定上传文件的类型,例如图片、文档等。 5. **实现...
KindEditor 是一套开源的在线HTML编辑器, 后台可与 Java、.NET、PHP、ASP 等程序集成。... KindEditor 官方下载:http://kindeditor.net/down.php ... KindEditor 初始化参数配置:http://kindeditor.net/docs/opt
接着,为需要编辑的 TEXTAREA 添加特定的 ID,以便 KindEditor 初始化时找到目标元素。最后,使用 KindEditor 的 API 创建编辑器实例,并根据需求进行参数配置,如调整编辑器高度、定制工具栏等。 KindEditor 还...
2. **初始化编辑器**:在HTML中创建一个`<textarea>`元素作为编辑器的基础容器,然后通过JavaScript调用KindEditor的`create()`或`attach()`方法来初始化编辑器。例如: ```javascript KindEditor.create('...
配置编辑器的初始化参数,包括路径设置、语言选择、工具栏定制等。在HTML页面中,通过JavaScript调用KindEditor的`create()`方法来实例化编辑器。 3. **添加JMathEditor插件**:将JMathEditor的插件文件放置在...
2. 初始化编辑器:在JavaScript中,通过调用`$.initKindEditor`函数来初始化编辑器。这个函数可能已经预设了一些基本配置,如编辑器的宽高、工具栏设置等,以便在页面上即插即用。 3. 赋值与取值:封装还可能包括了...
2. **创建编辑器实例**:在HTML中创建一个`<textarea>`或`<div>`作为编辑器的容器,然后通过JavaScript初始化编辑器,例如: ```javascript KindEditor.create('#editor-id', { width: '800px', height: '400px'...
1. **配置KindEditor**:首先,你需要在初始化KindEditor时,配置图片上传的相关选项。例如,设置上传URL为包含token验证的接口,并开启自定义上传处理方式: ```javascript var editor = KindEditor.create('#...
4. **配置编辑器**:在KindEditor的初始化配置中,你需要添加关于表情插件的设置,比如指定表情目录路径、设置表情的快捷键或者弹出窗口等。这通常涉及到修改`KindEditor.create`方法中的参数,例如`plugins : '...
KindEditor提供了丰富的事件接口,如`beforeCreate`(初始化前),`afterCreate`(初始化后),`beforeChange`(内容变化前)等,方便你监听编辑器的状态变化。 6. **获取和设置内容** 可以通过`.html()`方法获取...
1. **初始化Editor** 首先需要定义一个`textarea`元素用于放置编辑器,如: ```html ;height:300px;">'д' ``` 2. **创建编辑器实例** 使用JavaScript创建编辑器实例,并配置必要的参数。 ```javascript ...
KindEditor的初始化参数非常丰富,包括但不限于: - `width`和`height`:设置编辑器的宽度和高度。 - `minWidth`和`minHeight`:设置编辑器的最小尺寸。 - `items`:定义工具栏上的按钮组合。 - `disableItems`:...
4. **初始化编辑器**:在JavaScript中,你需要对KindEditor进行初始化。例如,你可以选择预设的工具栏选项或自定义工具栏。以下是一个基础的初始化示例: ```javascript KindEditor.ready(function(K) { var ...
具体参数详情,请查阅官方文档的“编辑器初始化参数”部分。 #### 三、编辑器API与插件路径 在4.x版本中,编辑器API的调用方式也发生了变化,现在通过`K.create`返回的`editor`对象来访问。这意味着,如需执行诸如...
1. **富文本编辑器集成**:如何在ASP.NET页面中引入并初始化KindEditor,设置编辑器的参数和功能。 2. **前后端交互**:使用AJAX或者WebMethod如何实现异步提交编辑内容,以及C#如何接收和处理这些数据。 3. **数据...
对于初学者,可以参考提供的使用说明文档,了解如何初始化编辑器、如何配置参数、如何使用API等基础操作。如果需要更复杂的功能,可以深入学习KindEditor的插件开发和自定义扩展。通过熟练掌握KindEditor,可以为...
在HTML页面中引入KindEditor的脚本文件,并通过JavaScript初始化编辑器,指定编辑器的ID、宽度、高度等属性。 5. **安全与优化** 在实际应用中,需要关注上传文件的安全性,例如防止SQL注入、XSS攻击等。同时,对...
创建一个空的div元素作为KindEditor的容器,并通过JavaScript调用KindEditor的`create`方法来初始化编辑器。如: ```html <div id="editor"></div> KindEditor.create('#editor'); ``` 3. **配置选项** ...
引入后,你需要在HTML中创建一个用于承载编辑器的`<textarea>`元素,然后使用JavaScript初始化KindEditor实例,指定textarea的ID作为参数。 ```html <textarea id="myEditor"></textarea> ``` ```javascript ...