当前位置: 首页 > news >正文

使用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

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

相关文章:

使用uni-app editor富文本组件设置富文本内容及解决@Ready先于onload执行,无法获取后端接口数据的问题

开始使用富文本组件editor时&#xff0c;不知如何调用相关API设置富文本内容和获取内容&#xff0c;本文将举例详解 目录 一.了解editor组件的常用属性及相关API 1.属性常用说明 2.富文本相关API说明 1&#xff09;editorContext 2&#xff09; editorContext.setContents…...

Spring高手之路-Spring事务的传播机制(行为、特性)

目录 含义 七种事务传播机制 1.REQUIRED&#xff08;默认&#xff09; 2.REQUIRES_NEW 3.SUPPORTS 4.NOT_SUPPORTED 5.MANDATORY 6.NEVER 7.NESTED 含义 Spring事务的传播机制是指在多个事务方法相互调用时&#xff0c;如何处理这些事务的传播行为。对应七种事务传播行为…...

简易机器学习笔记(八)关于经典的图像分类问题-常见经典神经网络LeNet

前言 图像分类是根据图像的语义信息对不同类别图像进行区分&#xff0c;是计算机视觉的核心&#xff0c;是物体检测、图像分割、物体跟踪、行为分析、人脸识别等其他高层次视觉任务的基础。图像分类在许多领域都有着广泛的应用&#xff0c;如&#xff1a;安防领域的人脸识别和…...

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&#xff08;集群版&#xff09; 1.1、前置说明 &#xff08;1&#xff09;64位Red Hat7 Linux 系统&#xff1b; &#xff08;2&#xff09;64位JDK1.8&#xff1b;备注&#xff1a;如果没有安装JDK&#xff0c;请参考【系列二、Linux中安装JDK】 &#xff08;3&…...

JavaScript中alert、prompt 和 confirm区别及使用【通俗易懂】

✨前言✨   本篇文章主要在于&#xff0c;让我们看几个与用户交互的函数&#xff1a;alert&#xff0c;prompt 和confirm的使用及区别 &#x1f352;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f352;博主将持续更新学习记录收获&…...

【GoLang入门教程】Go语言几种标准库介绍(四)

编程语言的未来&#xff1f; 文章目录 编程语言的未来&#xff1f;前言几种库fmt库 (格式化操作)关键函数&#xff1a;示例 Go库标准库第三方库示例 html库(HTML 转义及模板系统)主要功能&#xff1a;示例 总结专栏集锦写在最后 前言 上一篇&#xff0c;我们介绍了debug、enco…...

面试算法:快速排序

题目 快速排序是一种非常高效的算法&#xff0c;从其名字可以看出这种排序算法最大的特点就是快。当表现良好时&#xff0c;快速排序的速度比其他主要对手&#xff08;如归并排序&#xff09;快2&#xff5e;3倍。 分析 快速排序的基本思想是分治法&#xff0c;排序过程如下…...

航空业数字化展翅高飞,开源网安专业服务保驾护航

​某知名航空公司是中国首批民营航空公司之一&#xff0c;运营国内外航线200多条&#xff0c;也是国内民航最高客座率的航空公司之一。在数字化发展中&#xff0c;该航空公司以数据驱动决策&#xff0c;通过精细化管理、数字创新和模式优化等方式&#xff0c;实现了精准营销和个…...

SpringBoot学习(三)-员工管理系统开发(重在理解)

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

2 Windows网络编程

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

uniapp选择android非图片文件的方案踩坑记录

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

前端发开的性能优化 请求级:请求前(资源预加载和预读取)

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

B01、类加载子系统-02

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

用PHP搭建一个绘画API

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

西安人民检察院 | OLED翻页查询一体机

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

superset利用mysql物化视图解决不同数据授权需要写好几次中文别名的问题

背景 在使用superset时&#xff0c;给不同的人授权不同的数据&#xff0c;需要不同的数据源&#xff0c;可视化字段希望是中文&#xff0c;所以导致不同的人需要都需要去改表的字段&#xff0c;因此引入视图&#xff0c;将视图中字段名称设置为中文 原表数据 select * from …...

输入输出流

1.输入输出流 输入/输出流类&#xff1a;iostream---------i input&#xff08;输入&#xff09; o output&#xff08;输出&#xff09; stream&#xff1a;流 iostream&#xff1a; istream类&#xff1a;输入流类-------------cin&#xff1a;输入流类的对象 ostream类…...

IOS:Safari无法播放MP4(H.264编码)

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

Pycharm恢复默认设置

window 系统 找到下方目录-->删除. 再重新打开Pycharm C:\Users\Administrator\.PyCharm2023.3 你的不一定和我名称一样 只要是.PyCharm*因为版本不同后缀可能不一样 mac 系统 请根据需要删除下方目录 # Configuration rm -rf ~/Library/Preferences/PyCharm* # Caches …...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...