自己做装修图网站,网站建设优化推广安徽,网站建设与管理好处,建行官方网站多少钱开始使用富文本组件editor时#xff0c;不知如何调用相关API设置富文本内容和获取内容#xff0c;本文将举例详解 目录
一.了解editor组件的常用属性及相关API
1.属性常用说明 2.富文本相关API说明
1#xff09;editorContext
2#xff09; editorContext.setContents… 开始使用富文本组件editor时不知如何调用相关API设置富文本内容和获取内容本文将举例详解 目录
一.了解editor组件的常用属性及相关API
1.属性常用说明 2.富文本相关API说明
1editorContext
2 editorContext.setContents(OBJECT)
3editorContext.getContents(OBJECT)
二. 使用ready属性设置富文本初始内容为后端接口内容 1.onLoad获取后端接口数据
注意这里设置了一个标示isDataLoaded默认为false) 用来确保先获得后端的数据
2.readyonEditorReady,编写onEditorReady方法富文本初始加载数据
3.inputonEditorInput,编写onEditorInput方法富文本内容改变时触发 一.了解editor组件的常用属性及相关API
editorideditorplaceholder开始输入...showImgSizeshowImgToolbarshowImgResizereadyonEditorReadyinputonEditorInput
/editor
1.属性常用说明
属性类型默认值必填说明placeholderstring否提示信息show-img-sizebooleanfalse否点击图片时显示图片大小控件show-img-toolbarbooleanfalse否点击图片时显示工具栏控件show-img-resizebooleanfalse否点击图片时显示修改尺寸控件readyeventhandle否编辑器初始化完成时触发inputeventhandle否编辑器内容改变时触发detail {html, text, delta} 2.富文本相关API说明
1editorContext
editor 组件对应的 editorContext 实例可通过 uni.createSelectorQuery 获取。 onEditorReady() {uni.createSelectorQuery().select(#editor).context((res) {this.editorCtx res.context}).exec()}2 editorContext.setContents(OBJECT)
初始化编辑器内容html和delta同时存在时仅delta生效
OBJECT 参数说明
属性类型默认值必填说明htmlString否带标签的HTML内容deltaObject否表示内容的delta对象successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
3editorContext.getContents(OBJECT)
获取编辑器内容
OBJECT 参数说明
属性类型默认值必填说明successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
object.success 回调函数
属性类型说明htmlstring带标签的 HTML 内容textstring纯文本内容deltaObject表示内容的 delta 对象 二. 使用ready属性设置富文本初始内容为后端接口内容 1.onLoad获取后端接口数据 注意这里设置了一个标示isDataLoaded默认为false) 用来确保先获得后端的数据
2.readyonEditorReady,编写onEditorReady方法富文本初始加载数据 说明①调用初始化方法目的是创建editor组件对应的 editorContext (实例上下文) ②调用设置富文本内容的方法 ③若获取了后端的数据调用setContents设置富文本内容 ④若没有获取到则使用定时器0.001s后重试
测试启动后端和前端前端运行界面如下---- 3.inputonEditorInput,编写onEditorInput方法富文本内容改变时触发 说明① 调用获取富文本内容方法getContents ②在回调函数中设置后端内容富文本的内容
