Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
风雨兼程620
unidocs-zh
提交
4be12db1
unidocs-zh
项目概览
风雨兼程620
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
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 @@
相关 api:
[
editorContext
](
/api/media/editor-context
)
**平台差异说明**
## 平台差异说明
|App |H5 |微信小程序 |支付宝小程序|百度小程序 |抖音小程序、飞书小程序|QQ小程序 |快应用 |360小程序|快手小程序 |
|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
...
...
@@ -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富文本编辑器
## 属性说明
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| --- | --- | --- | --- | --- |
| read-only | boolean | false | 否 | 设置编辑器为只读 |
...
...
@@ -35,18 +37,21 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
| @input | eventhandle | | 否 | 编辑器内容改变时触发,detail = {html, text, delta} |
| @statuschange | eventhandle | | 否 | 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式 |
## HTML 标签和 style 内联样式支持情况
编辑器内支持部分 HTML 标签和内联样式,不支持
**class**
和
**id**
#### 支持的标签
### 支持的标签
不满足的标签会被忽略,
`<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>`
百度小程序不支持|
###
#
支持的内联样式
### 支持的内联样式
内联样式仅能设置在行内元素或块级元素上,不能同时设置。例如 font-size
` 归类为行内元素属性,在 p 标签上设置是无效的。
...
...
@@ -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
`|
| 行内样式 | `
font
` `
font-size
` `
font-style
` `
font-variant
` `
font-weight
` `
font-family
` `
letter-spacing
` `
text-decoration
` `
color
` `
background-color
` |百度小程序仅支持`
color、background-color
`|
**注意事项**
## 注意事项
* 插入的 html 中事件绑定会被移除
* formats 中的 color 属性会统一以 hex 格式返回
* 粘贴时仅纯文本内容会被拷贝进编辑器
* 插入 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)
::: 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
``` vue
<template>
...
...
@@ -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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录