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

news/2024/7/16 15:13:12

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

我在使用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 文档


https://www.xjx100.cn/news/3417923.html

相关文章

一分钟了解香港的场外期权报价

香港的场外期权报价 在香港这个国际金融中心&#xff0c;场外期权交易是金融市场不可或缺的一部分。场外期权&#xff0c;作为一种非标准化的金融衍生品&#xff0c;为投资者提供了在特定时间以约定价格买入或卖出某种资产的机会。对于希望参与这一市场的投资者来说&#xff0…

HMM地图匹配算法库Barefoot环境搭建

1.引入gps路径匹配开源项目barefoot 克隆仓库 git clone https://github.com/bmwcarit/barefoot.git打开项目执行mvn命令将项目打包到maven仓库 mvn install -DskipTests在自己的maven项目中引入barefoot依赖 <dependency><groupId>com.bmw-carit</groupId&g…

React 之 mobx-state-tree(Redux替代品) 状态管理

MST(mobx-state-tree)、redux做多组件间全局state管理&#xff08;类比vuex&#xff0c;父 孙组件状态传递解耦&#xff09;。 tree type state 树中的每个节点都由两件事来描述: type (事物的形状) 和 data (它当前所处的状态). 最简单的树如下所示&#xff1a; 1.声明类…

数据结构——哈希表、哈希桶

哈希概念 顺序结构以及平衡树中&#xff0c;元素关键码与其存储位置之间没有对应的关系&#xff0c;因此在查找一个元素时&#xff0c;必须要经过关键码的多次比较&#xff0c;顺序查找时间复杂度为O(N),平衡树中为树的高度,即O(logN),搜索的效率取决于搜索过程种元素的比较次…

与C共舞:让编译更顺滑(2)

1.6 Packed结构体 默认情况下,Zig中的所有结构体字段自然对齐到@alignOf(FieldType)(ABI大小),但没有定义布局。有时,您可能希望具有不符合您的C ABI的定义布局的结构体字段。packed结构体允许您对结构体字段进行极其精确的控制,允许您逐位放置字段。 在packed结构体内…

i 人 聊 天 手 册(e人禁止入内)

在之前的读书笔记-《蔡康永的说话之道》中&#xff0c;作者给大家分享了很多具体的要点&#xff0c;其更偏向于战术层面&#xff0c;我更想要的是一个类似聊天手册的东西&#xff0c;就让我自己来总结下吧。 虽然在 MBTI 中&#xff0c;按照获取能量的方式定义了 i 人、e 人&a…

FreeRtos进阶——中断的内部逻辑

中断与非中断API的区别 BaseType_t xQueueSendToBack(QueueHandle_t xQueue,const void *pvItemToQueue,TickType_t xTicksToWait); BaseType_t xQueueSendToBackFromISR(QueueHandle_t xQueue,const void *pvItemToQueue,BaseType_t *pxHigherPriorityTaskWok…

摸鱼大数据——Hive调优7-9

7、列裁剪 Hive在读数据的时候&#xff0c;可以只读取查询中所需要用到的列&#xff0c;而忽略其他列 例如: 假设有一个表A: a b c d e 5个字段, 请查看以下SQL select a,b from A where axxx; ​ 在这条SQL, 发现没有使用c d e 字段, 在from A表时候, 读取数据, 只需要将…