使用uni-app editor富文本组件设置富文本内容及解决@Ready先于onload执行,无法获取后端接口数据的问题
开始使用富文本组件editor时,不知如何调用相关API设置富文本内容和获取内容,本文将举例详解
目录
一.了解editor组件的常用属性及相关API
1.属性常用说明
2.富文本相关API说明
1)editorContext
2) editorContext.setContents(OBJECT)
3)editorContext.getContents(OBJECT)
二. 使用@ready属性,设置富文本初始内容为后端接口内容
1.onLoad获取后端接口数据
注意:这里设置了一个标示isDataLoaded(默认为false) ,用来确保先获得后端的数据
2.@ready="onEditorReady",编写onEditorReady方法,富文本初始加载数据
3.@input="onEditorInput",编写onEditorInput方法,富文本内容改变时触发
一.了解editor组件的常用属性及相关API
<editorid="editor"placeholder="开始输入..."showImgSizeshowImgToolbarshowImgResize@ready="onEditorReady"@input="onEditorInput"
></editor>
1.属性常用说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
placeholder | string | 否 | 提示信息 | |
show-img-size | boolean | false | 否 | 点击图片时显示图片大小控件 |
show-img-toolbar | boolean | false | 否 | 点击图片时显示工具栏控件 |
show-img-resize | boolean | false | 否 | 点击图片时显示修改尺寸控件 |
@ready | eventhandle | 否 | 编辑器初始化完成时触发 | |
@input | eventhandle | 否 | 编辑器内容改变时触发,detail = {html, text, delta} |
2.富文本相关API说明
1)editorContext
editor 组件对应的 editorContext 实例,可通过 uni.createSelectorQuery 获取。
onEditorReady() {uni.createSelectorQuery().select('#editor').context((res) => {this.editorCtx = res.context}).exec()}
2) editorContext.setContents(OBJECT)
初始化编辑器内容,html和delta同时存在时仅delta生效
OBJECT 参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
html | String | 否 | 带标签的HTML内容 | |
delta | Object | 否 | 表示内容的delta对象 | |
success | Function | 否 | 接口调用成功的回调函数 | |
fail | Function | 否 | 接口调用失败的回调函数 | |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
3)editorContext.getContents(OBJECT)
获取编辑器内容
OBJECT 参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
success | Function | 否 | 接口调用成功的回调函数 | |
fail | Function | 否 | 接口调用失败的回调函数 | |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数
属性 | 类型 | 说明 |
---|---|---|
html | string | 带标签的 HTML 内容 |
text | string | 纯文本内容 |
delta | Object | 表示内容的 delta 对象 |
二. 使用@ready属性,设置富文本初始内容为后端接口内容
1.onLoad获取后端接口数据
注意:这里设置了一个标示isDataLoaded(默认为false) ,用来确保先获得后端的数据
2.@ready="onEditorReady",编写onEditorReady方法,富文本初始加载数据
说明:①调用初始化方法,目的是创建editor组件对应的 editorContext (实例上下文)
②调用设置富文本内容的方法
③若获取了后端的数据,调用setContents设置富文本内容
④若没有获取到,则使用定时器,0.001s后重试
测试:启动后端和前端,前端运行界面如下---->
3.@input="onEditorInput",编写onEditorInput方法,富文本内容改变时触发
说明:① 调用获取富文本内容方法getContents
②在回调函数中,设置后端内容=富文本的内容
相关文章:

使用uni-app editor富文本组件设置富文本内容及解决@Ready先于onload执行,无法获取后端接口数据的问题
开始使用富文本组件editor时,不知如何调用相关API设置富文本内容和获取内容,本文将举例详解 目录 一.了解editor组件的常用属性及相关API 1.属性常用说明 2.富文本相关API说明 1)editorContext 2) editorContext.setContents…...

Spring高手之路-Spring事务的传播机制(行为、特性)
目录 含义 七种事务传播机制 1.REQUIRED(默认) 2.REQUIRES_NEW 3.SUPPORTS 4.NOT_SUPPORTED 5.MANDATORY 6.NEVER 7.NESTED 含义 Spring事务的传播机制是指在多个事务方法相互调用时,如何处理这些事务的传播行为。对应七种事务传播行为…...

简易机器学习笔记(八)关于经典的图像分类问题-常见经典神经网络LeNet
前言 图像分类是根据图像的语义信息对不同类别图像进行区分,是计算机视觉的核心,是物体检测、图像分割、物体跟踪、行为分析、人脸识别等其他高层次视觉任务的基础。图像分类在许多领域都有着广泛的应用,如:安防领域的人脸识别和…...

pytest conftest通过fixture实现变量共享
conftest.py scope"module" 只对当前执行的python文件 作用 pytest.fixture(scope"module") def global_variable():my_dict {}yield my_dict test_case7.py import pytestlist1 []def test_case001(global_variable):data1 123global_variable.u…...

系列五、搭建Naco(集群版)
一、搭建Naco(集群版) 1.1、前置说明 (1)64位Red Hat7 Linux 系统; (2)64位JDK1.8;备注:如果没有安装JDK,请参考【系列二、Linux中安装JDK】 (3&…...

JavaScript中alert、prompt 和 confirm区别及使用【通俗易懂】
✨前言✨ 本篇文章主要在于,让我们看几个与用户交互的函数:alert,prompt 和confirm的使用及区别 🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍒博主将持续更新学习记录收获&…...

【GoLang入门教程】Go语言几种标准库介绍(四)
编程语言的未来? 文章目录 编程语言的未来?前言几种库fmt库 (格式化操作)关键函数:示例 Go库标准库第三方库示例 html库(HTML 转义及模板系统)主要功能:示例 总结专栏集锦写在最后 前言 上一篇,我们介绍了debug、enco…...
面试算法:快速排序
题目 快速排序是一种非常高效的算法,从其名字可以看出这种排序算法最大的特点就是快。当表现良好时,快速排序的速度比其他主要对手(如归并排序)快2~3倍。 分析 快速排序的基本思想是分治法,排序过程如下…...

航空业数字化展翅高飞,开源网安专业服务保驾护航
某知名航空公司是中国首批民营航空公司之一,运营国内外航线200多条,也是国内民航最高客座率的航空公司之一。在数字化发展中,该航空公司以数据驱动决策,通过精细化管理、数字创新和模式优化等方式,实现了精准营销和个…...

SpringBoot学习(三)-员工管理系统开发(重在理解)
注:此为笔者学习狂神说SpringBoot的笔记,其中包含个人的笔记和理解,仅做学习笔记之用,更多详细资讯请出门左拐B站:狂神说!!! 本文是基于狂神老师SpringBoot教程中的员工管理系统从0到1的实践和理解。该系统应用SpringB…...

2 Windows网络编程
1 基础概念 1.1 socket概念 Socket 的原意是“插座”,在计算机通信领域,socket 被翻译为“套接字”,它是计算机之间进行通信的一种约定或一种方式。Socket本质上是一个抽象层,它是一组用于网络通信的API,包括了一系列…...

uniapp选择android非图片文件的方案踩坑记录
这个简单的问题我遇到下面6大坑,原始需求是选择app如android的excel然后读取到页面并上传表格数据json 先看看效果 uniapp 选择app excel文件读取 1.uniapp自带不支持 uniapp选择图片和视频非常方便自带已经支持可以直接上传和读取 但是选择word excel的时候就出现…...

前端发开的性能优化 请求级:请求前(资源预加载和预读取)
预加载 预加载:是优化网页性能的重要技术,其目的就是在页面加载过程中先提前请求和获取相关的资源信息,减少用户的等待时间,提高用户的体验性。预加载的操作可以尝试去解决一些类似于减少首次内容渲染的时间,提升关键资…...

B01、类加载子系统-02
JVM架构图-英文版 中文版见下图: 1、概述类的加载器及类加载过程 1.1、类加载子系统的作用 类加载器子系统负责从文件系统或者网络中加载Class文件,class文件在文件开头有特定的文件标识。ClassLoader只负责class文件的加载,至于它是否可以运行,则由Execution Engi…...

用PHP搭建一个绘画API
【腾讯云AI绘画】用PHP搭建一个绘画API 大家好!今天我要给大家推荐的是如何用PHP搭建一个绘画API,让你的网站或应用瞬间拥有强大的绘画能力!无论你是想要让用户在网页上绘制自己的创意,还是想要实现自动绘画生成特效,这…...

西安人民检察院 | OLED翻页查询一体机
产品:55寸OLED柔性屏 项目时间:2023年12月 项目地点:西安 在2023年12月,西安人民检察院引入了OLED翻页查询一体机,为来访者提供了一种全新的信息查询方式。 这款一体机采用55寸OLED柔性屏,具有高清晰度、…...

superset利用mysql物化视图解决不同数据授权需要写好几次中文别名的问题
背景 在使用superset时,给不同的人授权不同的数据,需要不同的数据源,可视化字段希望是中文,所以导致不同的人需要都需要去改表的字段,因此引入视图,将视图中字段名称设置为中文 原表数据 select * from …...

输入输出流
1.输入输出流 输入/输出流类:iostream---------i input(输入) o output(输出) stream:流 iostream: istream类:输入流类-------------cin:输入流类的对象 ostream类…...

IOS:Safari无法播放MP4(H.264编码)
一、问题描述 MP4使用H.264编码通常具有良好的兼容性,因为H.264是一种广泛支持的视频编码标准。它可以在许多设备和平台上播放,包括电脑、移动设备和流媒体设备。 使用caniuse查询H.264兼容性,看似确实具有良好的兼容性: 然而…...

Pycharm恢复默认设置
window 系统 找到下方目录-->删除. 再重新打开Pycharm C:\Users\Administrator\.PyCharm2023.3 你的不一定和我名称一样 只要是.PyCharm*因为版本不同后缀可能不一样 mac 系统 请根据需要删除下方目录 # Configuration rm -rf ~/Library/Preferences/PyCharm* # Caches …...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...

Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...