Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
4be12db1
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3172
Star
105
Fork
804
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
93
列表
看板
标记
里程碑
合并请求
67
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
93
Issue
93
列表
看板
标记
里程碑
合并请求
67
合并请求
67
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
4be12db1
编写于
12月 15, 2023
作者:
辛宝Otto
🥊
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(editor): 整理 toc,调整 editor 资源加载失败的情况
上级
0350c395
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
13 addition
and
9 deletion
+13
-9
docs/component/editor.md
docs/component/editor.md
+13
-9
未找到文件。
docs/component/editor.md
浏览文件 @
4be12db1
#
### editor
#
editor 组件
富文本编辑器,可以对图片、文字格式进行编辑和混排。
富文本编辑器,可以对图片、文字格式进行编辑和混排。
...
@@ -14,7 +14,7 @@
...
@@ -14,7 +14,7 @@
相关 api:
[
editorContext
](
/api/media/editor-context
)
相关 api:
[
editorContext
](
/api/media/editor-context
)
**平台差异说明**
## 平台差异说明
|App |H5 |微信小程序 |支付宝小程序|百度小程序 |抖音小程序、飞书小程序|QQ小程序 |快应用 |360小程序|快手小程序 |
|App |H5 |微信小程序 |支付宝小程序|百度小程序 |抖音小程序、飞书小程序|QQ小程序 |快应用 |360小程序|快手小程序 |
|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
...
@@ -22,6 +22,8 @@
...
@@ -22,6 +22,8 @@
editor组件目前只有H5、App的vue页面、微信小程序、百度小程序支持,其他端平台自身未提供editor组件,只能使用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富文本编辑器
editor组件目前只有H5、App的vue页面、微信小程序、百度小程序支持,其他端平台自身未提供editor组件,只能使用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 | 否 | 设置编辑器为只读 |
| read-only | boolean | false | 否 | 设置编辑器为只读 |
...
@@ -35,18 +37,21 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
...
@@ -35,18 +37,21 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
| @input | eventhandle | | 否 | 编辑器内容改变时触发,detail = {html, text, delta} |
| @input | eventhandle | | 否 | 编辑器内容改变时触发,detail = {html, text, delta} |
| @statuschange | eventhandle | | 否 | 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式 |
| @statuschange | eventhandle | | 否 | 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式 |
## HTML 标签和 style 内联样式支持情况
编辑器内支持部分 HTML 标签和内联样式,不支持
**class**
和
**id**
编辑器内支持部分 HTML 标签和内联样式,不支持
**class**
和
**id**
#### 支持的标签
### 支持的标签
不满足的标签会被忽略,
`<div>`
会被转行为
`<p>`
储存。
不满足的标签会被忽略,
`<div>`
会被转行为
`<p>`
储存。
| 类型 | 节点 |平台差异说明 |
| 类型 | 节点 |平台差异说明 |
| --- | --- |--- |
| --- | --- |--- |
| 行内元素 |
`<span> <strong> <b> <ins> <em> <i> <u> <a> <del> <s> <sub> <sup> <img>`
|其中
`<ins>
<del> `
百度小程序不支持 |
| 行内元素 |
`<span> <strong> <b> <ins> <em> <i> <u> <a> <del> <s> <sub> <sup> <img>`
|其中
`<ins>
<del>`
百度小程序不支持 |
| 块级元素 |
`<br> <p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>`
|其中
`<br>`
仅百度小程序支持、
`<p>`
百度小程序不支持|
| 块级元素 |
`<br> <p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>`
|其中
`<br>`
仅百度小程序支持、
`<p>`
百度小程序不支持|
###
#
支持的内联样式
### 支持的内联样式
内联样式仅能设置在行内元素或块级元素上,不能同时设置。例如 font-size
` 归类为行内元素属性,在 p 标签上设置是无效的。
内联样式仅能设置在行内元素或块级元素上,不能同时设置。例如 font-size
` 归类为行内元素属性,在 p 标签上设置是无效的。
...
@@ -55,21 +60,20 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
...
@@ -55,21 +60,20 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
| 块级样式 | `
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
` |百度小程序仅支持`
text-align、direction
`|
| 块级样式 | `
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
` |百度小程序仅支持`
text-align、direction
`|
| 行内样式 | `
font
` `
font-size
` `
font-style
` `
font-variant
` `
font-weight
` `
font-family
` `
letter-spacing
` `
text-decoration
` `
color
` `
background-color
` |百度小程序仅支持`
color、background-color
`|
| 行内样式 | `
font
` `
font-size
` `
font-style
` `
font-variant
` `
font-weight
` `
font-family
` `
letter-spacing
` `
text-decoration
` `
color
` `
background-color
` |百度小程序仅支持`
color、background-color
`|
**注意事项**
## 注意事项
* 插入的 html 中事件绑定会被移除
* 插入的 html 中事件绑定会被移除
* formats 中的 color 属性会统一以 hex 格式返回
* formats 中的 color 属性会统一以 hex 格式返回
* 粘贴时仅纯文本内容会被拷贝进编辑器
* 粘贴时仅纯文本内容会被拷贝进编辑器
* 插入 html 到编辑器内时,编辑器会删除一些不必要的标签,以保证内容的统一。例如`
<p><span>
xxx
</span></p>
`会改写为`
<p>
xxx
</p>
`
* 插入 html 到编辑器内时,编辑器会删除一些不必要的标签,以保证内容的统一。例如`
<p><span>
xxx
</span></p>
`会改写为`
<p>
xxx
</p>
`
* 编辑器聚焦时页面会被上推,系统行为以保证编辑区可见
* 编辑器聚焦时页面会被上推,系统行为以保证编辑区可见
* H5
端会动态引入依赖 [quill.min.js](https://unpkg.com/quill@1.3.7/dist/quill.min.js)、[image-resize.min.js](https://unpkg.com/quill-image-resize-mp@3.0.1/image-resize.min.js),依赖从 [unpkg.com](https://unpkg.com) 加载,如过依赖加载较慢或失败,可以从 [github.com](https://github.com/dcloudio/uni-app/tree/dev/src/core/view/components/editor/quill) 或者 [gitee.com](https://gitee.com/dcloud/uni-app/tree/dev/src/core/view/components/editor/quill) 下载下来放在自己的服务器或 CDN 服务商,相比自己的服务器或者其他 CDN 服务商更推荐的做法是开发者将将所有前端资源托管在 [uniCloud 前端网页托管](https://doc.dcloud.net.cn/uniCloud/hosting.html) ,然后在 [自定义模板](../collocation/manifest?id=h5-template) 的 `
head
` 标签内引入
。
* H5
端需要动态引入 [quill.min.js](https://unpkg.com/quill@1.3.7/dist/quill.min.js)、[image-resize.min.js](https://unpkg.com/quill-image-resize-mp@3.0.1/image-resize.min.js) 依赖,默认情况下浏览器会从 [unpkg.com](https://unpkg.com) 加载。如果依赖加载较慢或失败,uni-app 建议使用通过测试的 js 依赖保证效果一致,访问 [github.com](https://github.com/dcloudio/uni-app/tree/dev/src/core/view/components/editor/quill) 或者 [gitee.com](https://gitee.com/dcloud/uni-app/tree/dev/src/core/view/components/editor/quill) 选择下载。可以放入 `
static
` 目录进行托管,或者使用 CDN 服务商。为了保证服务的稳定性,推荐开发者将所有前端资源使用 [uniCloud 前端网页托管](https://uniapp.dcloud.net.cn/uniCloud/hosting.html) 服务进行托管,然后在 [自定义模板](../collocation/manifest?id=h5-template) 的 `
head
` 标签内引入相关 js 依赖
。
* 不能直接插入视频或者其他文件,编辑时可以采用视频封面或者文件缩略图占位,并在图片属性中保存视频信息,预览时读取附加信息再还原为视频或者其他文件操作。
* 不能直接插入视频或者其他文件,编辑时可以采用视频封面或者文件缩略图占位,并在图片属性中保存视频信息,预览时读取附加信息再还原为视频或者其他文件操作。
**示例代码** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/editor/editor)
**示例代码** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/editor/editor)
::: preview https://hellouniapp.dcloud.net.cn/pages/component/editor/editor
::: preview https://hellouniapp.dcloud.net.cn/pages/component/editor/editor
示例中css文件地址https://github.com/dcloudio/hello-uniapp/blob/master/pages/component/editor/editor-icon.css
> Template
> Template
``` vue
``` vue
<template>
<template>
...
@@ -308,4 +312,4 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
...
@@ -308,4 +312,4 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
```
```
:::
:::
一个完整的内容管理系统
比较复杂,DCloud已提供好了现成的`
uni-cms
`
,开源、免费、全端可用、功能完善,包括管理端和用户端。还内置了ai生成文章和广告变现功能。详见:
[
https://doc.dcloud.net.cn/uniCloud/uni-cms.html
](
https://doc
.dcloud.net.cn/uniCloud/uni-cms.html
)
一个完整的内容管理系统
`
Content Management System
` 比较复杂,DCloud已提供好了现成的 `
uni-cms
`
,开源、免费、全端可用、功能完善,包括管理端和用户端。还内置了 AI 生成文章和广告变现功能。详见:
[
https://uniapp.dcloud.net.cn/uniCloud/uni-cms.html
](
https://uniapp
.dcloud.net.cn/uniCloud/uni-cms.html
)
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录