uniapp富文本编辑器之editorContext

editor 组件对应的 editorContext 实例,可通过 uni.createSelectorQuery 获取。

 onEditorReady() {
    uni.createSelectorQuery().select('#editor').context((res) => {
        this.editorCtx = res.context
    }).exec()
}

百度小程序 Editor 富文本编辑器动态库提供了 createEditorContext 的方法来获取。

 onEditorReady() {
    this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
  }

editorContext 通过 id 跟一个 <editor> 组件绑定,操作对应的 <editor> 组件。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序字节跳动小程序、飞书小程序QQ小程序
2.4.5+x需引入动态库xx

百度小程序引入动态库

  1. 在项目中引用动态库,在 manifest.json 中增添一项 dynamicLib
  "mp-baidu" : {
    "appid" : "",
    "setting" : {
      "urlCheck" : true
    },
    "dynamicLib": {//引入百度小程序动态库
      "editorLib": {
        "provider": "swan-editor"
      }
    }
  },
  1. 在每个使用到富文本编辑器组件的页面,配置 pages.json 文件如下:
{
    "pages": [ 
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "usingSwanComponents": {
                    "editor": "dynamicLib://editorLib/editor"
                }
            }
        }
    ]
}

editorContext.format(name, value)

修改样式

参数类型说明
nameString属性
valueString

支持设置的样式列表

namevalue
bold
italic
underline
strike
ins
scriptsub / super
headerH1 / H2 / h3 / H4 / h5 / H6
alignleft / center / right / justify
directionrtl
indent-1 / +1
listordered / bullet / check
colorhex color
backgroundColorhex color
margin/marginTop/marginBottom/marginLeft/marginRightcss style
padding/paddingTop/paddingBottom/paddingLeft/paddingRightcss style
font/fontSize/fontStyle/fontVariant/fontWeight/fontFamilycss style
lineHeightcss style
letterSpacingcss style
textDecorationcss style
textIndentcss style

对已经应用样式的选区设置会取消样式。css style 表示 css 中规定的允许值。

editorContext.insertDivider(OBJECT)

插入分割线

OBJECT 参数说明

属性类型默认值必填说明
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

editorContext.insertImage(OBJECT)

插入图片。

微信小程序平台地址为临时文件时,获取的编辑器html格式内容中 <img> 标签增加属性 data-local,delta 格式内容中图片 attributes 属性增加 data-local 字段,该值为传入的临时文件地址。 开发者可选择在提交阶段上传图片到服务器,获取到网络地址后进行替换。替换时对于html内容应替换掉 <img> 的 src 值,对于 delta 内容应替换掉 insert { image: abc } 值。

OBJECT 参数说明

属性类型默认值必填说明
srcString图片地址
altString图像无法显示时的替代文本
widthString图片宽度(pixels/百分比),2.6.5+ 支持
heightString图片高度 (pixels/百分比),2.6.5+ 支持
extClassString添加到图片 img 标签上的类名,2.6.5+ 支持
dataObjectdata 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上,2.6.5+ 支持
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

原创文章,作者:Uniapper,如若转载,请注明出处:https://www.uniapper.com/573.html

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 2021年11月13日 下午11:09
下一篇 2021年11月16日 上午12:32

相关推荐

发表回复

登录后才能评论
欢迎访问www.uniapper.com!交流QQ群:35429521