Taro React组件开发（2） —— RuiEditor 富文本编辑器【兼容H5和微信小程序】

最新推荐文章于 2024-08-25 07:18:41 发布
最新推荐文章于 2024-08-25 07:18:41 发布
阅读量1.7k 收藏 1
点赞数 2
分类专栏： Taro React 入门到实战系列 文章标签： 微信小程序 taro react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38082783/article/details/128396336
版权
本文详细介绍了如何使用Taro和React.js开发一个兼容H5和微信小程序的富文本编辑器，包括需求分析、富文本编辑器的实现、监听事件处理、图片上传功能以及文字格式化。在微信小程序中，利用Editor组件，而在H5环境中使用contentEditable属性。文章还提到了在H5环境下插入图片的特殊处理以及编辑器的样式调整。
摘要由CSDN通过智能技术生成

1. 富文本编辑器需求分析

在这里插入图片描述

  1. 需要实现图片上传显示，上传使用Taro的 chooseImage 和 uploadFile，完成图片的上传！！！
  2. 文字的居左、居中、居右展示，使用格式化方法 format！！！
  3. 文字的加粗、倾斜、下划线，使用格式化方法 format！！！

2. 富文本编辑

  1. 获取提示文本 placeholder；
  2. 微信小程序环境使用自带 Editor 富文本标签；
  3. H5环境使用
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Rattenking
关注
专栏目录
订阅专栏
微信小程序rich-text组件中富文本框图片不能自适应
风中追风
02-08 980
用了标签 rich-text 但是图片 莫名超过去，不会自适应问题解决。讲请求到的富文本字符串的img标签，全局匹配一下比替换。
H5移动端，富文本编辑器 wangEditor
12-20
移动端富文本编辑器，非常好用，后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器，非常好用，后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器，非常好用，后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器，非常好用，后台配置也简单。按照wangEditor官网的配置教程就可以。
H5下最简洁好用的富文本编辑器
05-05
H5下最简洁好用的富文本编辑器，接口文档丰富，使用简单有效。
wysihtml5：基于HTML5的开源富文本编辑器教程
最新发布
gitblog_00174的博客
08-25 546
wysihtml5：基于HTML5的开源富文本编辑器教程 wysihtml5Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML...
移动端H5 富文本编辑器
拥抱城市的你
05-26 2392
uniapp组件 可以打包成H5 地址 ：https://ext.dcloud.net.cn/plugin?id=8342
Taro 中使用 富文本
业余前端的职业经历
09-23 1846
有的时候 经常后端会给我们返回一串 含html 节点的文本，让我们前端自己渲染， 如果是web端的话 我们直接。使用 dangerouslySetInnerHTML 就可以了 但是在Taro中 没有这个属性 就需要我们来解析 富文本了 这个也简单 Taro 借鉴小程序的设计理念，直接有原生的解析富文本的标签 RichText import { View, Image, Text, RichText } from "@tarojs/components"; render() { return ( &l
微信小程序editor富文本编辑器
热门推荐
weixin_53304105的博客
04-30 1万+
如果你也向我一样从0开始搭建，那真的是钛裤辣！
基于TypeScript和Taro框架开发的失物招领微信小程序源码.zip
06-06
Taro是一款多端开发框架，它允许开发者编写一次代码，就能同时适配微信小程序、H5、React Native等多个平台。Taro使用React的语法，使得开发者可以充分利用React的生态系统，同时也避免了针对不同平台的重复开发工作...
微信小程序开发者必备神器
08-10
微信小程序是腾讯公司推出的一种轻量级应用开发平台，它基于JavaScript、WXML（微信小程序标记语言）和WXSS（微信小程序样式语言）构建，能够让开发者快速地开发出能在微信内运行的应用。"微信小程序开发者必备神器...
Taro v1.2.7开发一个微信小程序下来的要点梳理及爬坑姿势
CRPER
01-16 3838
前言 在Taro 0.x的时候就写过一个小玩意,虽然没什么人玩. 最近正好看到Taro 1.2.x已经发布了 类React风格的小程序框架,部分地方针对小程序做了妥协.找点东西试试水,看看改进如何了. 刚好公司有个需求做个手机端的举报管理的程序, 开会上揽了过来; 对于这个框架,你除了需要有React的基本功外, 还需要这两方面的知识; 小程序自家的文档:Taro的大部分组件都是基于官方API封...
taro-form:Taro可视化表单编辑器
05-07
Taro表单编辑器 基于Taro3和react-dnd组件开发的表单编辑器，将支持多个平台（小程序、h5、app）目前仍在开发中，因接口限制，编辑模式仅支持在h5端。 预览版 当前版本任处于开发阶段，可能存在api改版或者bug修复导致的不兼容问题，请谨慎用于项目中。 在线预览 表单预览： 编辑模式： 截图 TaroForm交流群 qq群：816711392 使用 h5端： 将代码克隆到本地，执行 yarn 或者 npm install ，安装依赖，然后执行 yarn dev:h5 或者 npm run dev:h5 启动h5版本，跳转到main/edit/index页面即可进入编辑模式 小程序端： 将代码克隆到本地，执行 yarn 或者 npm install ，安装依赖，然后执行 yarn dev:weapp 或者 npm run dev:weapp 启动微信小程序版本，微信小程序仅支
html5富文本编辑器，手机端编辑器
03-12
最近在有项目需要手机端编辑器，找到两个自我感觉不错的，分享下。
手机端富文本编辑器
08-28
可用于手机端内容编辑,可以插入文字,更改文字样式,插入图片,链接等。简单易懂，内附实例demo
zx-editor 移动端（HTML5）富文本编辑器，可与原生App混合(hybrid)开发
12-11
zxEditor 移动端HTML文档（富文本）编辑器，支持图文混排、引用、大标题、无序列表，字体颜色、加粗、斜体。 可用于独立web项目开发，也可以用于与原生App混合(hybrid)开发。
移动端强大的富文本编辑器richeditor-android
01-15
通常我们使用富文本编辑器都是在H5端实现，但是如果你遇到在移动端发表文章的功能，那么richeditor-android这套框架可以轻松为你实现，不需要再使用大量的控件进行拼凑！
H5 移动端富文本编辑器
qq_42462656的博客
05-09 6663
本文使用的是：summernote编辑器 官网地址：https://summernote.org 文档地址：https://summernote.org/deep-dive/#initialization-options github:https://github.com/summernote/summernote/(找大神的链接) 以下为使用步骤 1.引入所需要的文件 <link href="./public/css/bootstrap.css" rel="stylesheet"> <l
Taro（React）使用富文本编辑器Editor
宝子的博客
05-31 637
在写项目的过程中很容易涉及到让使用者，输入一些介绍或者文本等相关功能， 前端在拿到这些文本时是需要直接渲染的，如果不使用富文本编辑器，这个时候得到的文章是没有格式的，这对于使用者来说体验非常的不好，这个时候就需要使用富文本编辑器，获取到带有标签的文本。我在使用Taro写小程序的时候，有让用户编辑自我介绍的功能，这个时候就需要使用到富文本获取到带有标签的文本。还有更多的功能，大家可以自行查看。
Taro支持富文本（微信小程序）完美解决
前端开发一枚
11-26 2038
需求：先说下需求，就是我们需要做活动页面，活动页面有个规则，规则的内容由B端后台配置海报页。页面如下 实现： 需要用到dangerouslySetInnerHTML属性即可，这个属性相比于其他方案的优势在于：1. 支持修改富文本样式 2. Taro官方属性，比插件靠谱 核心代码：index.tsx // 修改图片行内默认样式 (Taro as any).options.html.transformElement = (el) => { if (el.nodeName ..
Taro开发微信小程序实战：猫眼电影案例
本文档介绍了使用Taro框架开发微信小程序的实际案例——猫眼电影应用。在京东凹凸实验室早期推广Taro跨平台开发时，作者已经开始尝试并分享了这个项目的经验。项目基于Taro v0.0.69版本和Node v8.11.1运行，源代码...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rattenking

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值