KindEditor 4.x 在线编辑器常用方法小结

KindEditor和jQuery的配合其实相当直接，一句`KindEditor.create('#nr')`就能完成绑定。需要留意的是，`create`方法里的参数，就是页面上那个`textarea`的ID，只要对应上，编辑器就能正常工作。

HTML部分的结构也很标准，就是下面这个`textarea`标签，宽度和高度可以直接在`style`属性里设定，方便布局。

HTML部分

--------------

接下来，我们聊聊几个关键的配置项，它们决定了编辑器的功能边界。

核心配置选项

allowFileManager：这个选项控制是否允许用户浏览服务器上已经上传过的文件。默认值是`false`，意味着上传后自己都看不到历史文件——这显然不是大多数场景想要的结果。通常建议开启。

allowImageUpload：是否允许用户上传本地图片。默认是`true`，这个一般保持开启就好。

allowFlashUpload 与 allowMediaUpload：这两个选项分别控制是否允许上传Flash文件和多媒体文件，默认值也都是`true`。

pasteType：这是关于粘贴行为的设置，分为三种情况：0代表禁止粘贴，1代表只粘贴纯文本，2代表粘贴HTML格式（也是默认值）。对于大多数内容编辑场景，保持HTML粘贴是比较方便的。

resizeType：控制编辑器能否被用户拖拽改变大小。0是不能改变，1是只能改变高度，2是宽度和高度都可以改变（默认值）。

themeType：主题风格，可以设置成`default`或`simple`。如果选择`simple`，别忘了额外引入对应的样式文件。

designMode：这个选项决定了编辑器是可视化模式还是代码模式。数据类型是布尔值，默认是`true`（可视化模式）。

afterCreate：这是一个回调函数，在编辑器创建完成后触发。可以在这里执行一些初始化操作，比如弹个提示框，或者绑定其他事件。

fontSizeTable：用来定义字号下拉菜单里的选项，默认提供了从9px到32px的序列。

colorTable：定义取色器面板里的颜色列表，默认有一套从红色到黑色的渐变颜色组。

------

说完了配置，再来看一些常用的交互方法，这些在开发中会频繁用到。

常用方法调用

Ctrl+Enter提交：一个很实用的功能，可以通过`afterCreate`回调来绑定。核心逻辑是监听`Ctrl+Enter`键，先将编辑器内容同步到`textarea`，然后再执行提交操作。

------

假设我们把编辑器实例赋值给了一个变量`editor`，那么下面的操作就变得非常灵活：

编辑器获取焦点：调用`editor.focus()`方法就可以让光标定位到编辑器中。

取得编辑器HTML内容：使用`editor.html()`方法，可以拿到编辑器里包含所有格式的完整内容。

取得编辑器纯文本内容：使用`editor.text()`方法，它会剥离所有HTML标签，只返回纯文本。

移除编辑器：调用`editor.remove()`方法，可以销毁编辑器实例，清理掉它占用的DOM元素和事件。

设置编辑器HTML：使用`editor.html('编辑器内容')`，可以动态地向编辑器里写入带格式的内容。

设置编辑器纯文本内容：使用`editor.text('编辑器内容')`，它会将字符串作为纯文本显示，也就是把HTML标签原样显示出来。

判断编辑器内容是否为空：`editor.isEmpty()`方法会返回一个布尔值，可以据此来判断内容是否为空，并进行相应的提示。

在光标处插入内容：`editor.insertHtml('插入内容')`可以将指定的HTML代码插入到当前光标所在位置。

在编辑器末尾追加内容：`editor.appendHtml('追加内容')`可以将HTML内容添加到编辑器内容的最后。

切换全屏模式：`editor.fullscreen()`方法可以让编辑器立即进入或退出全屏模式。

设置只读状态：`editor.readonly(false)`方法，传入`true`开启只读，传入`false`则取消只读。

------

接下来是比较进阶的功能，涉及到与服务器的交互：文件管理和上传。

浏览服务器文件与上传

浏览服务器已上传文件

要实现这个功能，需要提前准备好几个资源：

1. 首先，必须引入编辑器的默认样式文件`default.css`。

2. 其次，必须引入两个Ja vaScript文件：`kindeditor-min.js`和`lang/zh_CN.js`。

3. 最后，通过Ja vaScript代码来触发。核心思路是使用`KindEditor.editor()`创建一个对话框实例，然后通过`loadPlugin`方法加载`filemanager`插件。在`filemanagerDialog`的配置中，`viewType`可以设置成`VIEW`（缩略图）或`LIST`（列表）来展示文件。`dirName`参数则指定了要浏览的文件夹类型，默认支持`image`、`flash`、`media`、`file`四种。点击文件后，`clickFn`回调函数会被触发，你可以在这里获取到文件的URL和标题，并做后续处理，比如将URL填入某个输入框。

上传本地文件到服务器

这个功能同样需要引入样式文件和Ja vaScript文件。实现方式是通过`KindEditor.uploadbutton`方法创建一个上传按钮。你需要指定按钮的DOM元素、上传文件字段名（通常是`imgFile`）、以及服务器端的上传处理程序URL。在`afterUpload`回调中，可以处理上传成功后的逻辑，比如获取返回的URL；`afterError`则用于处理上传失败的情况。

上传图片（包含选择已上传图片）

这个功能可以看作是前两个功能的组合。它需要引用`default.css`、`kindeditor-min.js`和`lang/zh_CN.js`三个文件。通过`KindEditor.editor`实例，并设置`allowFileManager : true`来开启浏览服务器文件的功能。点击按钮后，加载`image`插件，调用`imageDialog`方法。在对话框中，用户既可以上传新图片，也可以切换到“网络图片”或“服务器图片”标签页，选择已上传的文件。`clickFn`回调函数会返回图片的URL、标题、宽度、高度、边框和对齐方式等信息，方便你将这些信息应用到页面中。