提交 649ea468 编写于 作者: study夏羽's avatar study夏羽

editor百度小程序兼容说明

上级 34ba01c0
......@@ -3,19 +3,19 @@
editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery](/api/ui/nodes-info?id=createselectorquery) 获取。
```js
onEditorReady() {
uni.createSelectorQuery().select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
}
onEditorReady() {
uni.createSelectorQuery().select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
}
```
百度小程序 ```Editor``` 富文本编辑器动态库提供了 ```createEditorContext``` 的方法来获取。
百度小程序 `Editor` 富文本编辑器动态库提供了 `createEditorContext` 的方法来获取。
```js
onEditorReady() {
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
}
onEditorReady() {
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
}
```
......@@ -24,8 +24,6 @@ editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序、飞书小程序 |QQ小程序 |快手小程序|京东小程序|
......@@ -36,24 +34,23 @@ editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery
**百度小程序引入动态库**
1. 在项目中引用动态库,在 ```manifest.json``` 中增添一项 ```dynamicLib```
1. 在项目中引用动态库,在 `manifest.json` 中增添一项 `dynamicLib`
```js
"mp-baidu" : {
"appid" : "",
"setting" : {
"urlCheck" : true
},
"dynamicLib": {//引入百度小程序动态库
"editorLib": {
"provider": "swan-editor"
}
}
},
"mp-baidu" : {
"appid" : "",
"setting" : {
"urlCheck" : true
},
"dynamicLib": {//引入百度小程序动态库
"editorLib": {
"provider": "swan-editor"
}
}
}
```
2. 在每个使用到富文本编辑器组件的页面,配置 ```pages.json``` 文件如下:
2. 在每个使用到富文本编辑器组件的页面,配置 `pages.json` 文件如下:
``` js
{
......@@ -62,7 +59,7 @@ editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"usingSwanComponents": {
"usingComponents": {
"editor": "dynamicLib://editorLib/editor"
}
}
......@@ -86,28 +83,32 @@ editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery
**支持设置的样式列表**
| name | value |
| --- | --- |
| bold | |
| italic | |
| underline | |
| strike | |
| ins | |
| script | sub / super |
| header | H1 / H2 / h3 / H4 / h5 / H6 |
| align | left / center / right / justify |
| direction | rtl |
| indent | -1 / +1 |
| list | ordered / bullet / check |
| color | hex color |
| backgroundColor | hex color |
| margin/marginTop/marginBottom/marginLeft/marginRight | css style |
| padding/paddingTop/paddingBottom/paddingLeft/paddingRight | css style |
| font/fontSize/fontStyle/fontVariant/fontWeight/fontFamily | css style |
| lineHeight | css style |
| letterSpacing | css style |
| textDecoration | css style |
| textIndent | css style |
| name | value |平台差异说明|
| --- | --- |--- |
| bold | ||
| italic | ||
| underline | ||
| strike | ||
| ins | ||
| script | sub / super ||
| header | H1 / H2 / h3 / H4 / h5 / H6 ||
| align | left / center / right / justify |left百度小程序不支持|
| direction | rtl ||
| indent | -1 / +1 ||
| list | ordered / bullet / check ||
| color | hex color ||
| backgroundColor | hex color ||
| margin/marginTop/marginBottom/marginLeft/marginRight | css style |百度小程序不支持|
| padding/paddingTop/paddingBottom/paddingLeft/paddingRight | css style |百度小程序不支持|
| font/fontSize/fontStyle/fontVariant/fontWeight/fontFamily | css style |百度小程序不支持|
| lineHeight | css style |百度小程序不支持|
| letterSpacing | css style |百度小程序不支持|
| textDecoration | css style |百度小程序不支持|
| textIndent | css style |百度小程序不支持|
| wordWrap | css style |百度小程序不支持|
| wordBreak | css style |百度小程序不支持|
| whiteSpace | css style |百度小程序不支持|
对已经应用样式的选区设置会取消样式。css style 表示 css 中规定的允许值。
......@@ -134,10 +135,10 @@ editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| --- | --- | --- | --- | --- |
| src | String | | 是 | 图片地址 |
| src | String | | 是 | 图片地址,仅支持 http(s)、base64、本地图片|
| alt | String | | 否 | 图像无法显示时的替代文本 |
| width | String | | 否 | 图片宽度(pixels/百分比),2.6.5+ 支持 |
| height | String | | 否 | 图片高度 (pixels/百分比),2.6.5+ 支持|
| width | String | | 否 | 图片宽度(pixels/百分比),2.6.5+ 支持,百度小程序不支持 |
| height | String | | 否 | 图片高度 (pixels/百分比),2.6.5+ 支持,百度小程序不支持|
| extClass | String | | 否 | 添加到图片 img 标签上的类名,2.6.5+ 支持 |
| data | Object | | 否 | data 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上,2.6.5+ 支持 |
| success | Function | | 否 | 接口调用成功的回调函数 |
......@@ -183,6 +184,16 @@ editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery
| fail | Function | | 否 | 接口调用失败的回调函数 |
| complete | Function | | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
**object.success 回调函数**
| 属性 | 类型 | 说明 |
| --- | --- | --- |
| html | string |带标签的 HTML 内容 |
| text | string |纯文本内容 |
| delta | Object |表示内容的 delta 对象 |
## editorContext.clear(OBJECT)
清空编辑器内容
......@@ -239,7 +250,7 @@ editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√`HBuilderX 3.0.3`|√`HBuilderX 3.0.3`|√`基础库2.8.3`|x|x|x|x|x|x|
|√`HBuilderX 3.0.3`|√`HBuilderX 3.0.3`|√`基础库2.8.3`|x||x|x|x|x|
**OBJECT 参数说明**
......@@ -257,7 +268,7 @@ editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√`HBuilderX 3.0.3`|√`HBuilderX 3.0.3`|√`基础库2.8.3`|x|x|x|x|x|x|
|√`HBuilderX 3.0.3`|√`HBuilderX 3.0.3`|√`基础库2.8.3`|x||x|x|x|x|
**OBJECT 参数说明**
......@@ -275,7 +286,7 @@ editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√`HBuilderX 3.0.3`|√`HBuilderX 3.0.3`|√`基础库2.10.2`|x|x|x|x|x|x|
|√`HBuilderX 3.0.3`|√`HBuilderX 3.0.3`|√`基础库2.10.2`|x||x|x|x|x|
**OBJECT 参数说明**
......@@ -289,5 +300,5 @@ editor 组件对应的 editorContext 实例,可通过 [uni.createSelectorQuery
|参数|类型|说明|
|:-|:-|:-|
|errMsg|String|接口调用结果|
|errMsg|String|接口调用结果(百度小程序不支持)|
|text|String|纯文本内容|
\ No newline at end of file
......@@ -41,19 +41,19 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
不满足的标签会被忽略,`<div>`会被转行为`<p>`储存。
| 类型 | 节点 |
| --- | --- |
| 行内元素 | `<span> <strong> <b> <ins> <em> <i> <u> <a> <del> <s> <sub> <sup> <img>` |
| 块级元素 | `<p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>` |
| 类型 | 节点 |平台差异说明 |
| --- | --- |--- |
| 行内元素 | `<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 标签上设置是无效的。
| 类型 | 样式 |
| --- | --- |
| 块级样式 | `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` |
| 类型 | 样式 |平台差异说明 |
| --- | --- |--- |
| 块级样式 | `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`|
**注意事项**
......@@ -90,7 +90,7 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
methods: {
onEditorReady() {
// #ifdef MP-BAIDU
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
// #endif
// #ifdef APP-PLUS || H5 ||MP-WEIXIN
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册