diff --git a/docs/part/javascript-htmleditor.md b/docs/part/javascript-htmleditor.md index 82f919fc8eafc1a44949d7beda0a93d891017531..f61615a9d208a37ee2c60c65d2cb6e0c655115ff 100644 --- a/docs/part/javascript-htmleditor.md +++ b/docs/part/javascript-htmleditor.md @@ -7,31 +7,9 @@ filter: fuwenbenbianjiqi fwbbjq # 富文本编辑器 -ZUI 推荐两种富文本编辑器解决方案：UEditor 和 Kindeitor。 +ZUI 推荐两种富文本编辑器解决方案：Kindeitor 和 UEditor。 -ZUI 专为 UEditor 和 Kindeitor 定制了与 ZUI 风格一致的主题。 - -## UEditor - -
-

兼容性问题

-

在触摸屏或小屏幕上无法获取最佳体验。

-
- -### 使用 UEditor - -因为 UEditor 用到的文件比较多，ZUI 并不提供 UEditor JavaScript 文件。你需要访问 UEditor 官方网站来下载相关资源，以下为 UEditor 相关资源网站： - - - 官方定制：http://ueditor.baidu.com/website/download.html#ubuilder - - 官方下载：http://ueditor.baidu.com/website/download.html - - 官方文档：http://fex.baidu.com/ueditor/ - - 项目地址：https://github.com/fex-team/ueditor - -### 使用 ZUI 为 UEditor 定制的主题 - -使用 ZUI 为 UEditor 定制的主题可以更改 UEditor 界面外观与 ZUI 风格保持一致。 - -你需要将 ZUI `dist/lib/ueditor/ueditor.css` 和 `dist/lib/ueditor/ueditor.min.css` 文件替换在 UEditor 的 `themes/default/css/` 目录下的 CSS 文件。 +ZUI 专为 Kindeitor 和 UEditor 定制了与 ZUI 风格一致的主题。 ## Kindeitor @@ -142,3 +120,57 @@ function afterPageLoad() { }); } + +### Kindeditor 增强功能 + +相比较 Kindeditor 官方的版本，ZUI 中的 Kindeditor 功能进行了增强和优化，主要包含如下部分： + +* 重做了表格编辑功能，包含如下关键特性： + * 重做了工具栏图标，优化了插入表格交互体验，现在点击表格图标按钮，弹出行列选择面板，滑动鼠标选择要插入的表格行数和列数即可实现表格快速插入； + * 通过 Tab 键来在单元格中切换光标的功能，当光标已经处于表格中的最后一个单元格时会自动创建一个新行，并将光标移到新行的第一个单元格中； + * 实现选择多个单元格功能，允许使用如下方式来进行多选操作： + * 点击每一行的第一个单元格左侧可以快速选择整行上的所有单元格； + * 点击每一列的第一个单元格上侧可以快速选择整列上的所有单元格； + * 在一个单元格上点击并按住拖动到另一个单元格，可以选中拖放矩形区域范围内所有单元格； + * 对选中的多个单元格一并应用样式或进行操作的功能，目前支持如下操作： + * 对所有选中的单元格进行合并操作； + * 删除所有选中的单元格所在行或列； + * 对文本基础样式的操作，包括加粗、下划线、删除线、字体、文字颜色和背景色等； + * 对内容对齐方式的操作，包括居左、居中、局右等； + * 对内容类型的变更操作，包括切换列表类型等； + * 重做了表格单元格样式设置对话框样式，新增了对单元格边框大小和文字颜色的设置； + * 优化表格样式设置，现在边框和隔行变色等样式会直接应用在单元格上，而不是通过 CSS 类名，避免在 ZUI 基础样式缺失的情况下丢失样式； + * 优化了右键菜单上的项目，当一些条目在特定情况下不可用时不会显示，例如当光标处于最后一行时不会出现“向下合并单元格”菜单项； + * 修复了有时在单元格上点击鼠标右键，弹出的右键菜单上没有包含单元格相关菜单项的问题； +* 通过 `placeholder` 选项为编辑器设置并显示没有内容时的占位提示文本； +* 通过 `pasteImage` 选项实现贴图自动上传功能，使用该选项指定一个 URL 用于将用户从剪切板粘贴的图片 Base64 格式内容通过 POST 请求提交； +* 通过 `spellcheck` 选项启用（当选项的值为 `true` 时）或禁用（当选项的值为 `false` 时）拼写检查功能； +* 通过 `transferTab` 选项禁用编辑器内 Tab 键插入空格功能，转而实现激活编辑器在页面上下一个表单控件（当选项的值为 `true` 时启用该特性）； +* 通过 `syncAfterBlur` 选项实现自动在编辑器失去焦点时执行同步（`sync()`）操作（当选项的值为 `true` 时启用该特性）。 + +
+

注意

+

ZUI 中的 KIndeditor 依赖 jQuery 以及 ZUI 基础样式和 JS 插件，所以无法在没有引入 jQuery 和 ZUI 的环境中使用。

+
+ +## UEditor + +
+

兼容性问题

+

在触摸屏或小屏幕上无法获取最佳体验。

+
+ +### 使用 UEditor + +因为 UEditor 用到的文件比较多，ZUI 并不提供 UEditor JavaScript 文件。你需要访问 UEditor 官方网站来下载相关资源，以下为 UEditor 相关资源网站： + + - 官方定制：http://ueditor.baidu.com/website/download.html#ubuilder + - 官方下载：http://ueditor.baidu.com/website/download.html + - 官方文档：http://fex.baidu.com/ueditor/ + - 项目地址：https://github.com/fex-team/ueditor + +### 使用 ZUI 为 UEditor 定制的主题 + +使用 ZUI 为 UEditor 定制的主题可以更改 UEditor 界面外观与 ZUI 风格保持一致。 + +你需要将 ZUI `dist/lib/ueditor/ueditor.css` 和 `dist/lib/ueditor/ueditor.min.css` 文件替换在 UEditor 的 `themes/default/css/` 目录下的 CSS 文件。