react集成tinymce富文本编辑器

news/2024/4/16 16:04:42/文章来源:https://blog.csdn.net/whq12789/article/details/136532938

tinymce富文本编辑器

官方文档:https://www.tiny.cloud/docs/quick-start/
中文文档:http://tinymce.ax-z.cn/
支持vue、react、angular

react集成

命令

yarn add @tinymce/tinymce-react
yarn add tinymce

代码

import { useState, useEffect } from 'react'
import { Editor } from '@tinymce/tinymce-react'
import 'tinymce/tinymce'
import 'tinymce/models/dom'
import 'tinymce/icons/default'
import 'tinymce/themes/silver/theme'
// Skins
import './index.less'// Plugins 组件根据init中调用情况自行加载
import 'tinymce/plugins/accordion'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/help'
import 'tinymce/plugins/media'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/code'
import 'tinymce/plugins/image'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/table'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/importcss'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/template'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/link'
import 'tinymce/plugins/quickbars'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/save'
import 'tinymce/plugins/wordcount'import './langs/zh-Hans'export default function RichEditor({ value, onChange }) {const [showEditor, setShowEditor] = useState(true)useEffect(() => {setShowEditor(false)setShowEditor(true)}, [value])const onEditorChange = (e) => {console.log(e)onChange(e)}const imagesUploadHandler = (blobInfo, progress) =>new Promise((resolve, reject) => {console.log(blobInfo, progress)resolve('1.jpg')})const config = {skin: false,content_css: false,height: 500,plugins: ['advlist','anchor','autolink','help','image','link','lists','searchreplace','table','wordcount','charmap','preview','anchor','visualblocks','code','fullscreen','insertdatetime','media','code','codesample',],toolbar:'undo redo | formatselect | bold italic backcolor |  alignleft aligncenter alignright alignjustify |bullist numlist outdent indent | removeformat |image|codesample|code|preview|fullscreen | help',menu: {file: { title: '文件', items: 'newdocument restoredraft | preview | print ' },edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },view: {title: 'View',items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen',},insert: {title: 'Insert',items:'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime',},format: {title: 'Format',items:'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat',},tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },favs: {title: 'My Favorites',items: 'code visualaid | searchreplace | spellchecker | emoticons',},},menubar: 'file edit view insert format tools table favs',codesample_languages: [{ text: 'HTML/XML', value: 'markup' },{ text: 'JavaScript', value: 'javascript' },{ text: 'CSS', value: 'css' },{ text: 'PHP', value: 'php' },{ text: 'Ruby', value: 'ruby' },{ text: 'Python', value: 'python' },{ text: 'Java', value: 'java' },{ text: 'C', value: 'c' },{ text: 'C#', value: 'csharp' },{ text: 'C++', value: 'cpp' },{ text: 'Scala', value: 'scala' },],promotion: false, //阻止更新提示language: 'zh-Hans',image_uploadtab: true,images_upload_handler: imagesUploadHandler,}return (<>{showEditor && (<EditorinitialValue={value}init={config}// tinymceScriptSrc="./1/tinymce.min.js"onEditorChange={onEditorChange}/>)}</>)
}

样式文件

index.less
@import '~tinymce/skins/ui/oxide/skin.min.css';
@import '~tinymce/skins/ui/oxide/content.inline.min.css';.tox-statusbar__branding {display: none;
}

使用组件

import { debounce } from 'lodash'const onChange = debounce((value) => {record.illustrate = valuesave(record)}, 1000)<RichEditor value={record.illustrate} onChange={onChange} />

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

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

相关文章

【SQL】1068. 产品销售分析 I

题目描述 leetcode题目&#xff1a;1068. 产品销售分析 I 写法 select Product.product_name, Sales.year, Sales.price from Sales left join Product on Sales.product_id Product.product_id记录细节&#xff1a;加上表名检索效率更高。 -- ERROR: 时间超出限制 > 加…

【代码随想录算法训练营Day35】435.无重叠区间;763.划分字母区间;56.合并区间

文章目录 ❇️Day 36 第八章 贪心算法 part05✴️今日任务❇️435. 无重叠区间自己的思路自己的代码&#xff08;✅通过81.59%&#xff09;随想录思路随想录代码 ❇️763.划分字母区间自己的思路自己的代码&#xff08;✅通过55.30%&#xff09;随想录思路随想录代码 ❇️56. 合…

0101二阶与三阶行列式-行列式-线性代数

一 引例 求解二元一次方程组 { a 11 x 1 a 12 x 2 b 1 a 21 x 1 a 22 x 2 b 2 \begin{cases} a_{11}x_1a_{12}x_2b_1\\ a_{21}x_1a_{22}x_2b_2\\ \end{cases} {a11​x1​a12​x2​b1​a21​x1​a22​x2​b2​​ 解&#xff1a; 1 a 21 − 2 a 11 ⇒ x 2 a 11 b 2 − a…

IPSec VPN配置实验

什么是IPSec VPN&#xff1f; IPSec VPN其实就是一种基于互联网协议安全&#xff08;IPSec&#xff09;的虚拟私人网络技术&#xff0c;它通过在IP层加密和认证数据包来确保数据传输的安全性。 IPSec VPN的主要特点包括&#xff1a; 安全性&#xff1a;IPSec提供了强大的安全…

游戏视频怎么录制?超实用的干货来了!

随着游戏产业的蓬勃发展&#xff0c;游戏视频录制与分享已经成为许多玩家和游戏爱好者展示技巧、分享经验、记录精彩瞬间的重要方式。可是很多人不知道游戏视频怎么录制&#xff0c;本文旨在为广大游戏玩家提供两种简单易用的游戏视频录制方法&#xff0c;这两种方法各有特点&a…

校园小情书微信小程序,社区小程序前后端开源,校园表白墙交友小程序

功能 表白墙卖舍友步数旅行步数排行榜情侣脸漫画脸个人主页私信站内消息今日话题评论点赞收藏 效果图

代码随想录刷题笔记-Day31

1. 分发饼干 455. 分发饼干https://leetcode.cn/problems/assign-cookies/ 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口…

如何在Linux用Docker部署MySQL数据库并远程访问本地数据库

文章目录 前言1 .安装Docker2. 使用Docker拉取MySQL镜像3. 创建并启动MySQL容器4. 本地连接测试4.1 安装MySQL图形化界面工具4.2 使用MySQL Workbench连接测试 5. 公网远程访问本地MySQL5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定TCP地址远程访问 前言 本文主…

事务失效的八种情况!!!!

EnableAspectJAutoProxy(exposeProxy true)&#xff0c;开启AOP&#xff08;面向切面编程&#xff09;代理&#xff0c;并允许通过AopContext类暴露当前代理对象。这样&#xff0c;你可以在任何地方获取到当前代理对象&#xff0c;以便进行一些特殊的操作 &#xff08;应用与第…

Visual Studio如何进行类文件的管理(类文件的分离)

大家好&#xff1a; 衷心希望各位点赞。 您的问题请留在评论区&#xff0c;我会及时回答。 一、问题背景 实际开发中&#xff0c;类的声明放在头文件中&#xff0c;给程序员看类的成员和方法。比如&#xff1a;Dog.h&#xff08;类的声明文件&#xff09; 类的成员函数的具体…

【Linux】深入探究CentOS防火墙(Firewalld):基础概念、常用命令及实例操作

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 Firewalld基础概念&#xff1a; Firewalld常用命令&#xff1a; 启动/停止/重启Firewalld服务&#xff1a; 查看Firewalld状态…

#QT(智能家居界面-布局)

1.IDE&#xff1a;QTCreator 2.实验&#xff1a; 水平布局&#xff0c;垂直布局&#xff0c;栅格布局&#xff08;弹簧&#xff09; 界面自动调整 3.记录 注意弹簧不是拖拽拉长&#xff0c;而是使用栅格布局 运行发现窗口放大缩小可以自动调整 如果想要重新布局&#xff0c;需…

【Git】深入理解 Git 分支合并操作:git merge dev 命令详解

深入理解 Git 合并操作&#xff1a;git merge dev 命令详解 摘要&#xff1a;本文将深入探讨 Git 中的合并操作&#xff0c;以及如何使用 git merge dev 命令将dev 分支的修改合并到当前分支&#xff08;假设当前分支为main 分支&#xff09;中。通过详细的解释和示意图&#x…

文献速递:深度学习疾病预后--临床级计算病理学使用基于整张切片图像的弱监督深度学习

Title 题目 Clinical-grade computational pathology using weakly supervised deep learning on whole slide images 临床级计算病理学使用基于整张切片图像的弱监督深度学习 01 文献速递介绍 The development of decision support systems for pathology and their deplo…

java SSM科研管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM科研管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S…

C# 由左上、右下两个坐标点计算矩形的长、宽以及两点的距离

一、计算长、宽 直接使用坐标点计算 // 定义矩形左上角和右下角的坐标 Point topLeft new Point(0, 0); Point bottomRight new Point(5, 10); // 计算矩形的长和宽 int width bottomRight.X - topLeft.X;//矩形宽度 int height bottomRight.Y - topLeft.Y;//矩形高度或是…

谷粒商城实战(002 oss 文件储存系统)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第61p-第p101的内容 简介 P61 服务器 对象存储服务 OSS 也可以用minio 三种上传方式 推荐第三种 1.过服务器 安全 但是占用性能 2.不过服…

natfrp和FRP配置SSL的基本步骤和bug排查

获取免费/付费SSL 我直接买了一年的ssl证书 设置 主要参考&#xff1a;https://doc.natfrp.com/frpc/ssl.html 遇到的Bug root域名解析是ALIAS&#xff0c;不是CNAME不要用NATFRP &#xff08;SakuraFrp&#xff09;同步Joplin&#xff0c;会出现webdav错误导致大量笔记被…

哈希专题 - leetcode 1. 两数之和 - 简单难度

leetcode 1. 两数之和 leetcode 1. 两数之和 简单难度 哈希1. 题目详情1. 原题链接2. 基础框架 2. 解题思路1. 题目分析2. 算法原理3. 时间复杂度 3. 代码实现4. 知识与收获 leetcode 1. 两数之和 简单难度 哈希 1. 题目详情 给定一个整数数组 nums 和一个整数目标值 target…

go语言基础 -- 单元测试

go语言testing框架说明 go语言有自己的测试框架,封装在testing包中。 我们编写的测试案例通常都写在xxx_test.go文件中,比如我们写了个calc.go,对里面的函数进行测试,通常会写一个calc_test.go;testing框架会将_test.go结尾的文件引入;testing框架会在自己的main方法中执…