Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
14d905cb
Z
zui
项目概览
易企天创
/
zui
大约 1 年 前同步成功
通知
6
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
37
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
37
Issue
37
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
14d905cb
编写于
5月 09, 2019
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* change htmleditor document.
上级
0026ad3a
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
56 addition
and
24 deletion
+56
-24
docs/part/javascript-htmleditor.md
docs/part/javascript-htmleditor.md
+56
-24
未找到文件。
docs/part/javascript-htmleditor.md
浏览文件 @
14d905cb
...
...
@@ -7,31 +7,9 @@ filter: fuwenbenbianjiqi fwbbjq
# 富文本编辑器
ZUI 推荐两种富文本编辑器解决方案:
UEditor 和 Kinde
itor。
ZUI 推荐两种富文本编辑器解决方案:
Kindeitor 和 UEd
itor。
ZUI 专为 UEditor 和 Kindeitor 定制了与 ZUI 风格一致的主题。
## UEditor
<div
class=
"alert alert-danger"
>
<h4>
兼容性问题
</h4>
<p>
在触摸屏或小屏幕上无法获取最佳体验。
</p>
</div>
### 使用 UEditor
因为 UEditor 用到的文件比较多,ZUI 并不提供 UEditor JavaScript 文件。你需要访问 UEditor 官方网站来下载相关资源,以下为 UEditor 相关资源网站:
-
官方定制:
<a
target=
"_blank"
href=
"http://ueditor.baidu.com/website/download.html#ubuilder"
>
http://ueditor.baidu.com/website/download.html#ubuilder
</a>
-
官方下载:
<a
target=
"_blank"
href=
"http://ueditor.baidu.com/website/download.html"
>
http://ueditor.baidu.com/website/download.html
</a>
-
官方文档:
<a
target=
"_blank"
href=
"http://fex.baidu.com/ueditor/"
>
http://fex.baidu.com/ueditor/
</a>
-
项目地址:
<a
target=
"_blank"
href=
"https://github.com/fex-team/ueditor"
>
https://github.com/fex-team/ueditor
</a>
### 使用 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() {
});
}
</script>
### Kindeditor 增强功能
相比较 Kindeditor 官方的版本,ZUI 中的 Kindeditor 功能进行了增强和优化,主要包含如下部分:
*
重做了表格编辑功能,包含如下关键特性:
*
重做了工具栏图标,优化了插入表格交互体验,现在点击表格图标按钮,弹出行列选择面板,滑动鼠标选择要插入的表格行数和列数即可实现表格快速插入;
*
通过
<kbd>
Tab
</kbd>
键来在单元格中切换光标的功能,当光标已经处于表格中的最后一个单元格时会自动创建一个新行,并将光标移到新行的第一个单元格中;
*
实现选择多个单元格功能,允许使用如下方式来进行多选操作:
*
点击每一行的第一个单元格左侧可以快速选择整行上的所有单元格;
*
点击每一列的第一个单元格上侧可以快速选择整列上的所有单元格;
*
在一个单元格上点击并按住拖动到另一个单元格,可以选中拖放矩形区域范围内所有单元格;
*
对选中的多个单元格一并应用样式或进行操作的功能,目前支持如下操作:
*
对所有选中的单元格进行合并操作;
*
删除所有选中的单元格所在行或列;
*
对文本基础样式的操作,包括加粗、下划线、删除线、字体、文字颜色和背景色等;
*
对内容对齐方式的操作,包括居左、居中、局右等;
*
对内容类型的变更操作,包括切换列表类型等;
*
重做了表格单元格样式设置对话框样式,新增了对单元格边框大小和文字颜色的设置;
*
优化表格样式设置,现在边框和隔行变色等样式会直接应用在单元格上,而不是通过 CSS 类名,避免在 ZUI 基础样式缺失的情况下丢失样式;
*
优化了右键菜单上的项目,当一些条目在特定情况下不可用时不会显示,例如当光标处于最后一行时不会出现“向下合并单元格”菜单项;
*
修复了有时在单元格上点击鼠标右键,弹出的右键菜单上没有包含单元格相关菜单项的问题;
*
通过
`placeholder`
选项为编辑器设置并显示没有内容时的占位提示文本;
*
通过
`pasteImage`
选项实现贴图自动上传功能,使用该选项指定一个 URL 用于将用户从剪切板粘贴的图片 Base64 格式内容通过 POST 请求提交;
*
通过
`spellcheck`
选项启用(当选项的值为
`true`
时)或禁用(当选项的值为
`false`
时)拼写检查功能;
*
通过
`transferTab`
选项禁用编辑器内
<kbd>
Tab
</kbd>
键插入空格功能,转而实现激活编辑器在页面上下一个表单控件(当选项的值为
`true`
时启用该特性);
*
通过
`syncAfterBlur`
选项实现自动在编辑器失去焦点时执行同步(
`sync()`
)操作(当选项的值为
`true`
时启用该特性)。
<div
class=
"alert alert-info"
>
<h4>
注意
</h4>
<p>
ZUI 中的 KIndeditor 依赖 jQuery 以及 ZUI 基础样式和 JS 插件,所以无法在没有引入 jQuery 和 ZUI 的环境中使用。
</p>
</div>
## UEditor
<div
class=
"alert alert-danger"
>
<h4>
兼容性问题
</h4>
<p>
在触摸屏或小屏幕上无法获取最佳体验。
</p>
</div>
### 使用 UEditor
因为 UEditor 用到的文件比较多,ZUI 并不提供 UEditor JavaScript 文件。你需要访问 UEditor 官方网站来下载相关资源,以下为 UEditor 相关资源网站:
-
官方定制:
<a
target=
"_blank"
href=
"http://ueditor.baidu.com/website/download.html#ubuilder"
>
http://ueditor.baidu.com/website/download.html#ubuilder
</a>
-
官方下载:
<a
target=
"_blank"
href=
"http://ueditor.baidu.com/website/download.html"
>
http://ueditor.baidu.com/website/download.html
</a>
-
官方文档:
<a
target=
"_blank"
href=
"http://fex.baidu.com/ueditor/"
>
http://fex.baidu.com/ueditor/
</a>
-
项目地址:
<a
target=
"_blank"
href=
"https://github.com/fex-team/ueditor"
>
https://github.com/fex-team/ueditor
</a>
### 使用 ZUI 为 UEditor 定制的主题
使用 ZUI 为 UEditor 定制的主题可以更改 UEditor 界面外观与 ZUI 风格保持一致。
你需要将 ZUI
`dist/lib/ueditor/ueditor.css`
和
`dist/lib/ueditor/ueditor.min.css`
文件替换在 UEditor 的
`themes/default/css/`
目录下的 CSS 文件。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录