Taro(React)使用富文本编辑器Editor

在写项目的过程中很容易涉及到让使用者,输入一些介绍或者文本等相关功能, 前端在拿到这些文本时是需要直接渲染的,如果不使用富文本编辑器,这个时候得到的文章是没有格式的,这对于使用者来说体验非常的不好,这个时候就需要使用富文本编辑器,获取到带有标签的文本。

我在使用Taro写小程序的时候,有让用户编辑自我介绍的功能,这个时候就需要使用到富文本获取到带有标签的文本。

Editor | Taro 文档

代码

这个代码实现了,回显功能

import { View, Editor } from "@tarojs/components";export default function Index() {const [value, setValue] = useState<any>("<p>天下大定</p>");let editorCtx;const editorReady = (value: any) => {Taro.createSelectorQuery().select("#editor").context((res) => {editorCtx = res.context;// 在编辑器准备就绪时设置初始内容editorCtx &&editorCtx.setContents({html: value,});editorCtx && editorCtx.blur(); // 移除焦点}).exec();};// 撤销,回到上一步const undo = () => {if (editorCtx) {editorCtx.undo();}};// 清空内容const clear = () => {if (editorCtx) {editorCtx.clear();}};useEffect(() => {// 设置编辑器默认值setValue("<p>这里是回显内容</p>");}, []);// 保存内容const handStorage = () => {console.log(value);// 发起接口进行请求};return (<View className="Readme">{/* 富文本编辑器 */}<View className="padding-20 main_editor"><View className="padding-20 editor_father"><Editorid="editor"className="editor"onInput={(e) => setValue(e.detail.html)}placeholder={"你的自述..."}onReady={() => editorReady(value)}></Editor></View><View className="button"><Button type="primary" block onClick={clear}>删除</Button><Button type="primary" block onClick={undo}>撤销</Button><Buttoncolor="#ff8e16"blocktype="primary"onClick={() => handStorage()}>保存</Button></View></View></View>);
}

还有更多的功能,大家可以自行查看。

EditorContext | Taro 文档

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

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

相关文章

AUTOSAR网络管理报文(学习笔记)

文章分为三个部分来 简绍AUTOSAR的网络管理的优点或缺点 AUTOSAR全称AUTomotive Open System ARchitecture&#xff08;汽车开放系统架构&#xff09;。有一点需要注意 注意看全称中的英文大写部分&#xff0c;写全称时必须要按照上面的格式写&#xff0c;不能只写首字母大写…

--- JAVA 多态 ---

多态&#xff0c;顾名思义就时有多种形态&#xff0c;那咋样才嫩共有多种形态呢&#xff0c;再java中就是用不同的对象去调用同一个方法&#xff0c;产生了不同的结果。 看这段代码&#xff0c;我调用的是同一个方法&#xff0c;且只是传入的对象的不同&#xff0c;但是产生了不…

Linux网络服务之SSH(远程访问及控制)

ssh远程管理&#xff1a; ssh是一种安全通道协议&#xff0c;用来实现字符界面的远程登录。远程复制&#xff0c;远程文本传输。 ssh对通信双方的数据进行了加密 用户名和密码登录 密钥对认证方式&#xff08;可以实现免密登录&#xff09; ssh 22 网络层 传输层 数据传输…

【成品设计】基于红外线的目标跟踪无线测温系统设计

《基于红外线的目标跟踪无线测温系统设计》 整体功能&#xff1a; A端&#xff1a;无线跟踪端 主控&#xff1a;采用STM32F103C8T6单片机作为核心控制。360度编码模块数字脉冲输出红外解码编码模块OLED屏幕。 B端&#xff1a;无线待测端 主控&#xff1a;采用STM32F103C8T…

C语言杂谈:函数栈帧,函数调用时到底发生了什么

我们都知道在调用函数时&#xff0c;要为函数在栈上开辟空间&#xff0c;函数后续内容都会在栈帧空间中保存&#xff0c;如非静态局部变量&#xff0c;返回值等。这段空间就叫栈帧。 当函数调用&#xff0c;就会开辟栈帧空间&#xff0c;函数返回时&#xff0c;栈帧空间就会被释…

SpringBoot——整合Servlet的三大组件:过滤器(Filter)

目录 过滤器 一、用过滤器检查用户是否登录 LoginFilter自定义过滤器 FilterConfig配置类 FilterController控制器 SpringbootFilterApplication启动类 二、用过滤器统计资源访问量 LoginFilter FilterController 在开发SpringBoot项目时&#xff0c;开发人员经常需…

iOS swift5 加载网络图片的第三方框架

Kingfisher - github: 类似SDWebImage 参考博客&#xff1a; 一些swift项目中常用的处理图片的第三方框架 - 博客园

数据动态变化时实现多选及回显

<template><el-dialog title"设置权限" :visible.sync"showDialog" :close-on-click-modal"false" :append-to-body"true" width"800px"><div v-loading"loading"><el-radio-group v-model&…

RobotMaster编程语言:深度探索与实践挑战

RobotMaster编程语言&#xff1a;深度探索与实践挑战 RobotMaster编程语言&#xff0c;作为机器人编程领域的一颗璀璨明珠&#xff0c;其独特性与复杂性吸引了无数探索者的目光。本文将从四个方面、五个方面、六个方面和七个方面深入剖析这一编程语言的奥秘&#xff0c;同时揭…

Servlet实现会话追踪登录功能(结合JDBC)

目录 1.技术要求 2.关于会话Session 生活例子 代码体现 1.存储到session 2.从session中拿出 3.完成登录功能 4.利用Session作追踪 关于jstl应用 关于EL表达式应用 注意 5.测试 1.技术要求 核心&#xff1a; &#xff08;1&#xff09;Servlet项目的搭建 &#x…

C++---模板进阶(非类型模板参数,模板的特化,模板分离编译)

我们都学习和使用过模板&#xff0c;而这篇文章我们来将一些更深入的知识。在此之前&#xff0c;我们在使用C编程时可以看到模板是随处可见的&#xff0c;它能支持泛型编程。模板包括函数模板和类模板&#xff0c;我们有的人可能会说是模板函数和模板类&#xff0c;但严格讲这样…

MyQueue(队列)

目录 一、队列的定义 二、队列方法的实现 1、定义队列 2、后端插入 3、前端操作 4、判断队列是否为空 5、队列大小 三、队列方法的使用 一、队列的定义 队列是一种特殊的线性表&#xff0c;特殊之处在于它只允许在表的前端&#xff08;front&#xff09;进行删除操作&am…

Ripple:使用Wavelet Approximations来加速FHE的Programmable Bootstraps

1. 引言 University of Delaware和Nillion团队的 Charles Gouert、Mehmet Ugurbil、Dimitris Mouris、Miguel de Vega 和 Nektarios G. Tsoutsos&#xff0c;2024年论文《Ripple: Accelerating Programmable Bootstraps for FHE with Wavelet Approximations》&#xff0c;开源…

JVM内存分析之JVM分区与介绍

JVM&#xff08;Java Virtual Machine&#xff09;作为Java平台的核心组件&#xff0c;为Java应用程序的运行提供了一个虚拟的计算机环境。为了更好地理解和优化Java应用程序的性能&#xff0c;对JVM的内存管理进行深入分析是至关重要的。本文将详细介绍JVM的内存分区及其功能。…

关于一些优化的知识

1、凸优化&#xff1a;一定可找到全局最优解 非凸优化&#xff1a;一般是局部最优解 2、无约束优化问题求解方法&#xff1a;梯度下降、拟牛顿法、高斯牛顿法、LM算法 3、 解释&#xff0c;就是右边的式子对应于就是当前这个xk这个点基础上朝着pk取走步长为a得到了对应的值&…

vscode运行命令报错:标记“”不是此版本中的有效语句分隔符。

1. 报错问题 标记“&&”不是此版本中的有效语句分隔符。 2. 解决办法 将 terminal 中的 owershell 改成 cmd 就 ok

To C道路越走越夯实,1688彻底变身了?

在偌大的电商市场&#xff0c;消费者都是专业的“掘宝者”&#xff0c;热衷于发现各种新奇商品和采购新通路。 拼多多、1688等平台也正是在这种情况下&#xff0c;成为消费市场的“宠儿”。其中&#xff0c;1688的发展路径较为独特&#xff0c;据天眼查&#xff0c;其为源头厂…

pytorch中的维度变换操作性质大总结:view, reshape, transpose, permute

在深度学习中&#xff0c;张量的维度变换是很重要的操作。在pytorch中&#xff0c;有四个用于维度变换的函数&#xff0c;view, reshape, transpose, permute。其中view, reshape都用于改变张量的形状&#xff0c;transpose, permute都用于重新排列张量的维度&#xff0c;但它们…

《python-配置》在ubuntu系统上安装pycham并破解

阿丹&#xff1a; 因为ai开发要使用ubuntu系统&#xff0c;整理和总结一下如何在这里安装pycham 官网下载&#xff1a;pycham下载地址 PyCharm: the Python IDE for data science and web development 官网操作流程&#xff1a; 1&#xff0c;点击下载 2、下载其他版本 3、…

python中使用set()创建集合

python中set是一种无序且不重复的元素集合。Python 集合会将所有元素放在一对大括号 {} 中&#xff0c;相邻元素之间用“,”分隔 Python 中的序列类型包括列表&#xff08;list&#xff09;、元组&#xff08;tuple&#xff09;、字典&#xff08;dict&#xff09;和集合&…