react集成tinymce富文本编辑器

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.mzph.cn/news/729109.shtml

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

相关文章

【MATLAB第98期】基于MATLAB的MonteCarlo蒙特卡罗结合kriging克里金代理模型的全局敏感性分析模型【更新中】

【MATLAB第98期】基于MATLAB的Monte Carlo蒙特卡罗结合kriging克里金代理模型的全局敏感性分析模型【更新中】 PS:因内容涉及较多&#xff0c;所以一时半会更新不完 后期会将相关原理&#xff0c;以及多种功能详细介绍。 麻烦点赞收藏&#xff0c;及时获取更新消息。 引言 在…

如何判断螺栓已经拧紧?——SunTorque智能扭矩系统

智能扭矩系统-智能拧紧系统-扭矩自动控制系统-SunTorque 螺栓拧紧的标准并非仅仅依赖于螺栓的外观&#xff0c;而是依赖于几个关键因素&#xff0c;包括扭矩、预紧力和材料疲劳等。下面SunTorque智能扭矩系统和大家将详细讨论这些因素&#xff0c;并给出如何判断螺栓是否已经拧…

史上最大优惠!腾讯云服务器优惠价格表一年、1个月收费明细

腾讯云服务器多少钱一年&#xff1f;61元一年起&#xff0c;2核2G3M配置&#xff0c;腾讯云2核4G5M轻量应用服务器165元一年、756元3年&#xff0c;4核16G12M服务器32元1个月、312元一年&#xff0c;8核32G22M服务器115元1个月、345元3个月&#xff0c;腾讯云服务器网txyfwq.co…

Linux MBR扇区故障 引导修复

CSDN 成就一亿技术人&#xff01; 作者主页&#xff1a;点击&#xff01; Linux专栏&#xff1a;点击&#xff01; CSDN 成就一亿技术人 前言———— Linux MBR&#xff08;Master Boot Record&#xff0c;主引导记录&#xff09;是硬盘的第一个扇区&#xff0c;通常位于磁…

主机字节序列和网络字节序列

目录 1.概念 2.常见的字节序 3.转换接口 1.概念 主机字节序列分为大端字节序和小端字节序&#xff0c;不同的主机采用的字节序列可能不同。大端字节序是指一个整数的高位字节存储在内存的低地址处&#xff0c;低位字节存储在内存的高地址处。小端字节序则是指整数的高位字节…

为什么内部类持有外部类可能内存泄露?

内部类持有外部类的引用可能导致内存泄漏的情况通常是因为外部类的生命周期比内部类的生命周期长。在这种情况下&#xff0c;如果内部类持有对外部类的引用&#xff0c;外部类将无法被垃圾收集器回收&#xff0c;即使外部类不再被使用。 这种情况通常发生在以下情形下&#xf…

前端架构: 脚手架通用框架封装之添加测试框架(教程六)

添加测试框架 接上文&#xff0c;仍旧在 abc-cli 项目中 参考&#xff1a;https://blog.csdn.net/Tyro_java/article/details/136438882 现在要在脚手架项目中安装测试工具&#xff0c;选择 jest 文档&#xff1a;https://www.npmjs.com/package/jest 数据&#xff1a;Week…

maven项目引入私有jar,并打包到java.jar中

私有jar存放位置 maven依赖 <dependency><groupId>com.hikvision.ga</groupId><artifactId>artemis-http-client</artifactId><version>1.1.10</version><scope>system</scope><systemPath>${project.basedir}/s…

Tomcat常见配置(基础功能、虚拟主机、搭建博客)

目录 一、Tomcat基础功能 1、自动解压war包 2、Tomcat工具界面 2.1 Server Status (服务器状态) 2.1.1 本地登录状态页 2.1.2 远程登录状态页 2.2 Manager App (管理应用程序) 2.3 Host Manager (主机管理器) 3、Context 配置 二、配置虚拟主机 三、搭建 JPress 博客…

支持AUTOSAR Classic以及Adaptive平台的DEXT诊断数据库

一 DEXT、DCM、DEM和FIM的概述 DEXT&#xff08;Diagnostic Extract Template&#xff09;是AUTOSAR定义的诊断提取模板&#xff0c;用于DCM&#xff08;Diagnostics Communication Manager&#xff09;、DEM&#xff08;Diagnostics Event Manager&#xff09;和FIM&#xff…

从新能源汽车行业自动驾驶技术去看AI的发展未来趋势

自动驾驶汽车关键技术主要包括环境感知、精准定位、决策与规划、控制与执行、高精地图与车联网V2X以及自动驾驶汽车测试与验证技术等。 &#x1f413; 自动驾驶技术 这是AI在汽车行业中应用最广泛的领域之一。自动驾驶技术利用AI算法和传感器来感知环境、识别障碍物&#xff0c…

各大厂商常用的弱口令集合

Oms呼叫中心 KXTsoft2010 Glodon控制台 admin TRENDnet趋势网络摄像头 admin/admin MOBOTIX-视频监控 admin/meinsm 思科Cisco 没有原始密码, 第一次登录时需要创建 DRS admin/1234 Honeywell admin/1234 安迅士Axis root/pass, 新安迅士摄像头在用户第一登录时要求创建…

springboot文件上传修改临时文件路径

1、配置&#xff1a;spring.servlet.multipart.location/data/tmp 2、代码 Configuration public class MultipartConfig {Value("${spring.servlet.multipart.location}")private String tmpLocation;Beanpublic MultipartConfigElement multipartConfigElement()…

Spring反序列化失败 Type definition error: [simple type, class xxx.xxx.xxx]

也许更好的阅读体验 Type definition error: [simple type, class com.elm.po.CommonResult]; nested exception is com.fasterxml.jackson.databind.exc.InvalidDefinitionException: Cannot construct instance of com.elm.po.CommonResult (no Creators, like default const…

【开源】JAVA+Vue.js实现农家乐订餐系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户2.2 管理员 三、系统展示四、核心代码4.1 查询菜品类型4.2 查询菜品4.3 加购菜品4.4 新增菜品收藏4.5 新增菜品留言 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的农家乐订餐系统&#xff0c…

函数柯里化(function currying)及部分求值

函数柯里化&#xff08;function currying&#xff09; currying又称部分求值。一个currying的函数首先会接受一些参数&#xff0c;接受了这些参数之后&#xff0c;该函数并不会立即求值&#xff0c;而是继续返回另外一个函数&#xff0c;刚才传入的参数在函数形成的闭包中被保…

通信原理 | 功率谱密度PSD | 估计 | 周期图谱法 | Scipy.singal 中periodogram的用法

文章目录 功能主要参数返回值使用示例使用matplotlib等库来绘制功率谱密度图表解释scipy的 periodogram函数是 scipy.signal模块中的一个功能,用于估计一个信号的功率谱密度(Power Spectral Density,PSD)。这是一种分析信号频率成分的方法,特别适用于处理和分析时间序列…

0基础学习VR全景平台篇第143篇:限定访问功能

大家好&#xff0c;欢迎观看蛙色VR官方——后台使用系列课程&#xff01;这期&#xff0c;我们将为大家介绍如何使用限定访问功能。 一.什么是限定访问功能&#xff1f; 限定访问&#xff0c;就是可以在编辑后台设置可以访问作品的用户的类型&#xff0c;还有可以访问作品的IP…

【leetcode热题】环形链表

难度&#xff1a; 简单通过率&#xff1a; 34.9%题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目描述 给定一个链表&#xff0c;判断链表中是否有环。 为了表示给定链表中的环&#xff0c;我们使用整数 pos 来表示链表尾连接到链表中的位置&#xff08;索…

【CSS】简单的抽屉面板展开收起自然过渡效果的css

目录 效果展示css固定梯形按钮至抽屉面板中间梯形按钮css过渡动画 效果展示 1.收起时点击蓝色梯形按钮展开 2. 展开时点击蓝色按钮收起 3.展开收起时需要过渡自然&#xff0c;有抽屉推拉效果 css 固定梯形按钮至抽屉面板中间 .toggle{ position: absolute;left:-21px;top…