Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
MuGuiLin
uni-app
提交
55bccdad
U
uni-app
项目概览
MuGuiLin
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
55bccdad
编写于
8月 07, 2019
作者:
W
wanganxp
提交者:
GitHub
8月 07, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update editor.md
上级
6a7b13aa
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
110 addition
and
110 deletion
+110
-110
docs/component/editor.md
docs/component/editor.md
+110
-110
未找到文件。
docs/component/editor.md
浏览文件 @
55bccdad
#### editor
富文本编辑器,可以对图片、文字格式进行编辑和混排。
编辑器导出内容支持带标签的
`html`
和纯文本的
`text`
,编辑器内部采用
`delta`
格式进行存储。
通过
`setContents`
接口设置内容时,解析插入的
`html`
可能会由于一些非法标签导致解析错误,建议开发者在应用内使用时通过 delta 进行插入。
富文本组件内部引入了一些基本的样式使得内容可以正确的展示,开发时可以进行覆盖。需要注意的是,在其它组件或环境中使用富文本组件导出的html时,需要额外引入
[
这段样式
](
https://github.com/wechat-miniprogram/editor-style/blob/master/editor.css
)
,并维护
`<ql-container><ql-editor></ql-editor></ql-container>`
的结构,参考:
[
使用 editor 组件导出的 html
](
https://ask.dcloud.net.cn/article/36205
)
。
图片控件仅初始化时设置有效。
相关 api:
[
editorContext
](
/api/media/editor-context
)
**平台差异说明**
|
5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|2.0.0+
[
自定义组件编译模式
](
https://ask.dcloud.net.cn/article/35843
)
|x|基础库 2.7.0+|x|x|x|
#### editor
富文本编辑器,可以对图片、文字格式进行编辑和混排。
编辑器导出内容支持带标签的
`html`
和纯文本的
`text`
,编辑器内部采用
`delta`
格式进行存储。
通过
`setContents`
接口设置内容时,解析插入的
`html`
可能会由于一些非法标签导致解析错误,建议开发者在应用内使用时通过 delta 进行插入。
富文本组件内部引入了一些基本的样式使得内容可以正确的展示,开发时可以进行覆盖。需要注意的是,在其它组件或环境中使用富文本组件导出的html时,需要额外引入
[
这段样式
](
https://github.com/wechat-miniprogram/editor-style/blob/master/editor.css
)
,并维护
`<ql-container><ql-editor></ql-editor></ql-container>`
的结构,参考:
[
使用 editor 组件导出的 html
](
https://ask.dcloud.net.cn/article/36205
)
。
图片控件仅初始化时设置有效。
相关 api:
[
editorContext
](
/api/media/editor-context
)
**平台差异说明**
|
App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|2.0.0+
[
自定义组件编译模式
](
https://ask.dcloud.net.cn/article/35843
)
,不含nvue|x|基础库 2.7.0+|x|x|x|
本功能自HBuilderX2.0起支持。运行到微信小程序工具时,注意在微信工具里选择最新的基础库。
editor组件目前只有App和微信支持,其他端的富文本编辑解决方案,可搜索
[
插件市场
](
https://ext.dcloud.net.cn/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91
)
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| --- | --- | --- | --- | --- |
| read-only | boolean | false | 否 | 设置编辑器为只读 |
| placeholder | string | | 否 | 提示信息 |
| show-img-size | boolean | false | 否 | 点击图片时显示图片大小控件 |
| show-img-toolbar | boolean | false | 否 | 点击图片时显示工具栏控件 |
| show-img-resize | boolean | false | 否 | 点击图片时显示修改尺寸控件 |
| bindready | eventhandle | | 否 | 编辑器初始化完成时触发 |
| bindfocus | eventhandle | | 否 | 编辑器聚焦时触发,event.detail = {html, text, delta} |
| bindblur | eventhandle | | 否 | 编辑器失去焦点时触发,detail = {html, text, delta} |
| bindinput | eventhandle | | 否 | 编辑器内容改变时触发,detail = {html, text, delta} |
| bindstatuschange | eventhandle | | 否 | 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式 |
编辑器内支持部分 HTML 标签和内连样式,不支持
**class**
和
**id**
#### 支持的标签
不满足的标签会被忽略,
``会被转行为`<p>`储存。
| 类型 | 节点 |
| --- | --- |
| 行内元素 | ` <strong> <b> <ins> <em> <i> <u> <del> <s> <sub> <sup> <img>` |
| 块级元素 | `<p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>` |
#### 支持的内连样式
内联样式仅能设置在行内元素或块级元素上,不能同时设置。例如 font-size` 归类为行内元素属性,在 p 标签上设置是无效的。
| 类型 | 样式 |
| --- | --- |
| 块级样式 | `text-align` `direction` `margin` `margin-top` `margin-left` `margin-right` `margin-bottom`
`padding` `padding-top` `padding-left` `padding-right` `padding-bottom` `line-height` `text-indent` |
| 行内样式 | `font` `font-size` `font-style` `font-variant` `font-weight` `font-family`
`letter-spacing` `text-decoration` `color` `background-color` |
**注意事项**
1. 插入的 html 中事件绑定会被移除
2. formats 中的 color 属性会统一以 hex 格式返回
3. 粘贴时仅纯文本内容会被拷贝进编辑器
4. 插入 html 到编辑器内时,编辑器会删除一些不必要的标签,以保证内容的统一。例如`<p>xxx</p>`会改写为`<p>xxx</p>`
5. 编辑器聚焦时页面会被上推,系统行为以保证编辑区可见
**示例代码**
```html
<template>
<view class="container">
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
<button type="warn" @tap="undo">撤销</button>
</view>
</template>
<script>
export default {
data() {
return {
placeholder: '开始输入...'
}
},
methods: {
onEditorReady() {
uni.createSelectorQuery().select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
},
undo() {
this.editorCtx.undo()
}
}
}
</script>
<style>
.container {
padding: 10px;
}
#editor {
width: 100%;
height: 300px;
background-color: #CCCCCC;
}
button {
margin-top: 10px;
}
</style>
`
``
\ No newline at end of file
editor组件目前只有App的vue页面和微信支持,其他端的富文本编辑解决方案,可使用web-view加载web页面,也可搜索
[
插件市场
](
https://ext.dcloud.net.cn/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91
)
获取简单的markdown富文本编辑器
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| --- | --- | --- | --- | --- |
| read-only | boolean | false | 否 | 设置编辑器为只读 |
| placeholder | string | | 否 | 提示信息 |
| show-img-size | boolean | false | 否 | 点击图片时显示图片大小控件 |
| show-img-toolbar | boolean | false | 否 | 点击图片时显示工具栏控件 |
| show-img-resize | boolean | false | 否 | 点击图片时显示修改尺寸控件 |
| bindready | eventhandle | | 否 | 编辑器初始化完成时触发 |
| bindfocus | eventhandle | | 否 | 编辑器聚焦时触发,event.detail = {html, text, delta} |
| bindblur | eventhandle | | 否 | 编辑器失去焦点时触发,detail = {html, text, delta} |
| bindinput | eventhandle | | 否 | 编辑器内容改变时触发,detail = {html, text, delta} |
| bindstatuschange | eventhandle | | 否 | 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式 |
编辑器内支持部分 HTML 标签和内连样式,不支持
**class**
和
**id**
#### 支持的标签
不满足的标签会被忽略,
``会被转行为`<p>`储存。
| 类型 | 节点 |
| --- | --- |
| 行内元素 | ` <strong> <b> <ins> <em> <i> <u> <del> <s> <sub> <sup> <img>` |
| 块级元素 | `<p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>` |
#### 支持的内连样式
内联样式仅能设置在行内元素或块级元素上,不能同时设置。例如 font-size` 归类为行内元素属性,在 p 标签上设置是无效的。
| 类型 | 样式 |
| --- | --- |
| 块级样式 | `text-align` `direction` `margin` `margin-top` `margin-left` `margin-right` `margin-bottom`
`padding` `padding-top` `padding-left` `padding-right` `padding-bottom` `line-height` `text-indent` |
| 行内样式 | `font` `font-size` `font-style` `font-variant` `font-weight` `font-family`
`letter-spacing` `text-decoration` `color` `background-color` |
**注意事项**
1. 插入的 html 中事件绑定会被移除
2. formats 中的 color 属性会统一以 hex 格式返回
3. 粘贴时仅纯文本内容会被拷贝进编辑器
4. 插入 html 到编辑器内时,编辑器会删除一些不必要的标签,以保证内容的统一。例如`<p>xxx</p>`会改写为`<p>xxx</p>`
5. 编辑器聚焦时页面会被上推,系统行为以保证编辑区可见
**示例代码**
```html
<template>
<view class="container">
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
<button type="warn" @tap="undo">撤销</button>
</view>
</template>
<script>
export default {
data() {
return {
placeholder: '开始输入...'
}
},
methods: {
onEditorReady() {
uni.createSelectorQuery().select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
},
undo() {
this.editorCtx.undo()
}
}
}
</script>
<style>
.container {
padding: 10px;
}
#editor {
width: 100%;
height: 300px;
background-color: #CCCCCC;
}
button {
margin-top: 10px;
}
</style>
`
``
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录