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

editor百度小程序兼容说明

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