使用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.属性常用说明 

属性类型默认值必填说明
placeholderstring提示信息
show-img-sizebooleanfalse点击图片时显示图片大小控件
show-img-toolbarbooleanfalse点击图片时显示工具栏控件
show-img-resizebooleanfalse点击图片时显示修改尺寸控件
@readyeventhandle编辑器初始化完成时触发
@inputeventhandle编辑器内容改变时触发,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 参数说明

属性类型默认值必填说明
htmlString带标签的HTML内容
deltaObject表示内容的delta对象
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
3)editorContext.getContents(OBJECT) 

获取编辑器内容

OBJECT 参数说明

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

object.success 回调函数

属性类型说明
htmlstring带标签的 HTML 内容
textstring纯文本内容
deltaObject表示内容的 delta 对象

二. 使用@ready属性,设置富文本初始内容为后端接口内容                  

 1.onLoad获取后端接口数据

注意:这里设置了一个标示isDataLoaded(默认为false) ,用来确保先获得后端的数据

2.@ready="onEditorReady",编写onEditorReady方法,富文本初始加载数据

说明:①调用初始化方法,目的是创建editor组件对应的 editorContext (实例上下文)

           ②调用设置富文本内容的方法

           ③若获取了后端的数据,调用setContents设置富文本内容

           ④若没有获取到,则使用定时器,0.001s后重试

测试:启动后端和前端,前端运行界面如下---->

3.@input="onEditorInput",编写onEditorInput方法,富文本内容改变时触发

 

说明:① 调用获取富文本内容方法getContents

           ②在回调函数中,设置后端内容=富文本的内容 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/588646.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA进化史: JDK8特性及说明

JDK 8&#xff08;Java Development Kit 8&#xff09;是Java平台的一个重大版本&#xff0c;于2014年3月发布。该版本引入了许多令人期待的新特性&#xff0c;其中一些改变了Java语言的面貌&#xff0c;提供了更丰富、灵活和现代的编程体验。以下是JDK 8的一些主要特性&#x…

线性投影(linear projection)

1、线性投影介绍 线性投影在数学、统计学、机器学习以及经济学等多个领域都有重要作用&#xff0c;其基本思想是将一个高维空间中的向量或点映射到该空间的某个子空间中。以下是线性投影的一些关键作用 1.1 维度降低&#xff08;Dimensionality Reduction&#xff09;&#xf…

【Leetcode】第 378 场周赛

文章目录 100166. 检查按位或是否存在尾随零题目题意代码 100185. 找出出现至少三次的最长特殊子字符串 I题目思路代码 100184. 找出出现至少三次的最长特殊子字符串 II 100166. 检查按位或是否存在尾随零 题目 题意 这里题目要求的是或运算&#xff0c;所以原数组中只需要有…

LeetCode每日一题.04(不同路径)

一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&#xff1f; 示例 1…

Spring Cloud + Vue前后端分离-第10章 基于阿里云OSS的文件上传

源代码在GitHub - 629y/course: Spring Cloud Vue前后端分离-在线课程 Spring Cloud Vue前后端分离-第10章 基于阿里云OSS的文件上传 前面介绍的文件上传是基于本地文件服务器的文件上传&#xff0c;但是自己搭文件服务器会有很多运维的问题&#xff0c;比如磁盘满了要扩容…

Spark SQL简介与基本用法

Apache Spark是一个强大的分布式计算框架&#xff0c;Spark SQL是其组件之一&#xff0c;用于处理结构化数据。Spark SQL可以使用SQL查询语言来查询和分析数据&#xff0c;同时还提供了与Spark核心API的无缝集成。本文将深入探讨Spark SQL的基本概念和用法&#xff0c;包括数据…

Flink Job 执行流程

Flink On Yarn 模式 ​ 基于Yarn层面的架构类似 Spark on Yarn模式&#xff0c;都是由Client提交App到RM上面去运行&#xff0c;然后 RM分配第一个container去运行AM&#xff0c;然后由AM去负责资源的监督和管理。需要说明的是&#xff0c;Flink的Yarn模式更加类似Spark on Ya…

Docker构建缓存

Docker镜像的分层结构 Docker的镜像是由一层一层的文件系统组成&#xff0c;以UnionFS&#xff08;联合文件系统&#xff09;堆叠构成Dockerfile中的每个指令都会创建一个新的镜像层镜像层将被缓存和复用当Dockerfile的指令修改了&#xff0c;复制的文件变化了&#xff0c;或者…

Linux环境安装1

一 概述 1.1 概要 模拟真实项目,碰到难题,使用技术/解决方案/架构设计思想;缓存架构,高并发;基于hystrix&#xff0c;缓存架构高可用的&#xff0c;高可用架构的设计以及相关的技术;商品详情页系统架构 -> 缓存架构 -> 高并发技术解决方案架构 -> 高可用技术解决方案…

【c++】遍历一棵树来获取信息,并根据这些信息用map生成另一棵树,新树的键是string类型,值是char*类型

主要思路 递归遍历一棵树&#xff0c;将获取的信息以键值对的形式存放到c的vector容器中&#xff0c;然后遍历vector容器中的键值对信息&#xff0c;利用map容器生成个另一棵树。 具体来说&#xff0c;就是使用std::pair<std::string, const char*>类型的向量infoVector来…

S7通信协议解析

我们以S7的1500系列来查看握手和读取、写入【字Word或者位Bit】命令报文 以下报文不做说明时都是十六进制字节。 西门子PLC需要连接成功后发送两次握手命令方可进行读写通信。 西门子PLC的S7协议的头由四个字节组成.。 第一个字节数固定为03,第二个字节数固定为00 第三个字…

掌握 C++ 中 static 关键字的多种使用场景

static是什么 在最开始C中引入了static关键字可以用于修饰变量和函数&#xff0c;后来由于C引入了class的概念&#xff0c;现在static可以修饰的对象分为以下5种&#xff1a; 成员变量&#xff0c;成员函数&#xff0c;普通函数&#xff0c;局部变量&#xff0c; 全局变量 s…

github Copilot的基本使用

一.GitHub Copilot的基本介绍 GitHub Copilot 是由 GitHub 和 OpenAI 合作推出的一款代码自动补全工具&#xff0c;它基GPT&#xff08;Generative Pre-trained Transformer&#xff09;技术&#xff0c;可以为程序员提供实时的代码提示和建议。以下是 GitHub Copilot 的基本使…

【leetcode】栈与队列总结

本文内容来自于代码随想录 栈 用栈实现队列 两个栈实现队列。思路&#xff1a;两个栈分别表示入栈和出栈。 入队&#xff1a;直接入栈出队&#xff1a; a. 出栈为空&#xff0c;先把入栈中的元素全部放到出栈中&#xff08;相当于反过来&#xff0c;这样在出栈的时候先进的元…

mysql间隙锁demo分析

概述 通常用的mysql都是innodb引擎&#xff1b; 一般在update的时候用id都会认为是给行记录加锁&#xff1b; 在使用非唯一索引更新时&#xff0c;会遇到临键锁&#xff08;范围锁&#xff09;&#xff1b; 临键锁和表中的数据有关&#xff1b; mysq版本:8 隔离级别&#xf…

SpringBoot整合mail进行发送邮箱

Spring Boot整合邮箱进行发送 1. 添加依赖 在pom.xml文件中添加spring-boot-starter-mail依赖&#xff0c;如下所示&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mail</artifactId>…

2023年全国职业院校技能大赛网络系统管理 网络模块 出口配置

(四)出口网络配置 1.北京综合服务中心办公终端可通过出口路由器R2 G 0/0.21子接口的NAPT方式访问互联网。 ip route vrf BG 0.0.0.0 0.0.0.0 GigabitEthernet 0/0.21 21.1.1.1 ip access-list extended 100 10 permit ip 10.1.20.0 0.0.0.255 any 20 permit ip 10.2.20.0 0…

jmeter的常用功能及在测试中的基本使用和压测实战

Jmeter基础功能 了解Jmeter的常用组件 元件&#xff1a;多个类似功能组件的容器&#xff08;类似于类&#xff09; 一&#xff1a;Test Plan&#xff08;测试计划&#xff09; 测试计划通常用来给测试的项目重命名&#xff0c;使用多线程脚本运行时还可以配置线程组运行方式…

HCIA-Datacom题库(自己整理分类的)——STP协议判断

默认情况下&#xff0c;STP协议中根桥的根路径开销一定是0。√ 根桥交换机上所有的端口都是指定端口。 交换网络存在冗余链路时&#xff0c;使用STP可以解决交换网络中的环路问题。√ 当交换机有冗余链路时&#xff0c;使用STP可以解决问题。√ 交换机组成的网络不开启STP&…

向新字符设备驱动代码框架中添加Led功能函数

一. 简介 上一篇文章学习编写新字符设备驱动框架代码。文章地址如下&#xff1a; 新字符设备驱动框架代码搭建-CSDN博客 本文在以上这篇文章代码实现的基础上&#xff0c;加入涉及 Led灯的功能函数集实现。 代码实现要求&#xff1a;测试程序&#xff08;即应用程序&#…