React版TinyMCE富文本入坑
React版TinyMCE富文本中文教程
写在前面:因为公司项目的需要,需要寻找一款免费,开源,功能强大的富文本用作自定义打印。公司的前端框架用的是React,所以需求就很明显,要支持框架,开源,功能强大。
经过仔细筛选,如下:
1.WangEditor
鄙人第一次选择就是用的这款,后期换掉了。这款支持React框架并且开源免费,但是因为是个人作品,所以稳定性有待商榷,本款富文本功能比较简单,但基础功能都满足,接口简单易懂且文档是中文的 ,优势一下体现出来。
2.CKEditor系列
最新的是Ckeditor5,Ckeditor4对于Jquery框架有着良好的适配,无论功能还是样式都很强大,大公司的作品当然就会有很多臭毛病(娇气),文档全英文暂且不谈,api对新人的各种不友好,装插件的各种麻烦事,特别是像React和Vue这种框架,我说的不是Ckeditor4,是5,没错是Ckeditor5,一个巨恶心的存在,你要用插件,引入插件之后,在初始化带入就可以了?No,No,No,你还需要自己打包他的mainjs,然后再引入才可以使用,第一次做可能把人给搞死。
3.TinyMCE
首先我想说这是一款强大的富文本编辑工具,我感觉在基础功能上的强大性已经远超上面2个,国内友人已经开始为其建中文文档。但文档主要包含的介绍是基于Jquery框架,和vue框架,(这不是对我大React赤裸裸的歧视),Reac还是英文文档,所以就以我自己的摸索,给广大前端工程师们做个参考,因为也才接触,可能有不对或不好的地方,敬请见谅。
正文开始
开始之前先是需要去官网注册一个账号。注册成功后会得到一个key,如下:
这个key在代码里是需要的,第二步需要在Approved Domains设置一下你的key允许哪些域名访问线上的DNS。如图:
到这前期的准备工作就做完了。
然后在你的项目里安装TinyMcu的依赖:
我在项目里使用的是3.5.0的版本。
npm install --save @tinymce/tinymce-react
安装成功之后,在页面引用,如下:
import { Editor } from '@tinymce/tinymce-react'
在jsx的实例化如下:
<Editorvalue={templateStr}id={"tincyEditor"}apiKey=""init={{language: 'zh_CN',width: 1046,min_height: 716,plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize formatpainter',toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',images_upload_handler: (blobInfo, success, failure)=>{}/>
其实就这样,把apiKey换成你注册网站得到的key,只需要这样,在你网络正常的情况下,就可以得到一个如下的富文本:
它的强大之处在于它的所有插件,即
plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize formatpainter'
只需要在plugins里引用一下就可以正常使用,他所有的插件都是在线上,也就是所谓的云。如上我基本上把好用的免费的插件都用上了。
再介绍一下,可能会使用的方法
1.上传图片。
上图片有2种实现的方式,一种是在初始化 init里设置一个上传链接(也就是后台接口),key是需要去查一下,接口需要返回一个完整的可以返回的图片Url链接。(这种方式不需要自己设置Blob对象以及成功回调的种种)
我主要想介绍一下第二种方式:如下:
images_upload_handler: (blobInfo, success, failure)=>{if (blobInfo.blob()) {const formData = new window.FormData();formData.append('myFile', blobInfo.blob(), blobInfo.filename())axios.post(``,formData).then((res) => {if(res.data){// 将图片插入到编辑器中success(res.data.data[0])}}).catch((error) => {alert(error);})} else {alert('error');}}
这种方式可以自己处理上传图片成功的回调,可以高度自定义化自己的回调。
2。如何随时获取富文本里的内容
富文本在发生改变的时候,会触发onEditorChange里的方法:
handleEditorChange = (content, editor) => {this.setState({content:content});}
这个方法有2个参数:content是富文本里的内容,editor是这个富文本对象。
但是如果没改变富文本,如何可以获取富文本里的内容:
我是这样写的(仅供参考):
在初始化富文本的时候可以设置个onInit,它接受个fn,在富文本初始化的时候会执行,他也提供2个参数,一个content一个editor,在开始时将editor当成全局变量。即随时可以取到editor,这样也可以随时得到富文本里的content。
onInit = (content, editor)=>{ this.tinyMceEditor = editor;
}
//取得富文本内容
this.tinyMceEditor.getContent()
3.通过js改变富文本里面的内容
其实富文本里的内容其实又是一个iframe,是可以通过this.tinyMceEditor取得这个富文本的document,值的一提的是,如果修改富文本里的样式,直接修改在富文本里是不会生效的。可以通过如下方式:
let newDocument = this.tinyMceEditor.contentDocument;let dom1 = newDocument.getElementById(`ts1`);dom1.style.display = '';dom1.setAttribute('data-mce-style','display:""');
先这样吧,有新的发现再来更新!
来更新了
4.初始化加载慢的解决方案
https://blog.csdn.net/m0_37138425/article/details/120965219
React版TinyMCE富文本入坑相关推荐
- tinymce富文本框踩坑
tinymce富文本框踩坑 1.页面中需要多个富文本框时,每个富文本框的id必须做唯一标识,否则无法编辑 2.在tinymce富文本框需要做判断来显示时,谨慎使用v-if和v-show v-if会使富 ...
- tinymce富文本语言切换的坑
要实现的功能是三种语言(英文,繁体中文,简体中文)切换,原来是用tinymce-vue 和element做的,大概是这样,el-dialog弹窗里面用el-tab包含三个tinymce,但是中途发现很 ...
- Tinymce富文本使用教程
文章目录 1. 开始 2. 快速使用 引入tinymce脚本 3. 常用配置 selector language language_url height readonly plugins toolba ...
- Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置 对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...
- tinymce富文本编辑器做评论区
今天分享一下tinymce富文本编辑器做评论区的全过程. 文章目录 一.介绍 1.最终效果 2.功能介绍 3.主要项目包版本介绍: 二.每个功能的实现 1.自定义toolbar的功能区 ①对应的样式以 ...
- 【超详细】Tinymce富文本使用教程
Tinymce基础使用手册 1. 开始 官网文档:www.tiny.cloud/docs/ 社区版及开发版官方最新打包地址:www.tiny.cloud/get-tiny/self-hosted/ 汉 ...
- TinyMCE富文本上传图片的垃圾清理方案
TinyMCE富文本编辑器 1, 什么是富文本编辑器? 就是网页版的word 2,给项目中添加富文本编辑器 (1), 配置WebMvcConfig @Configuration public cl ...
- vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器 自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板 最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
- tinymce富文本编辑器的使用
tinymce富文本编辑器的使用 1.基本介绍 tinymce富文本官网:https://www.tiny.cloud/ 中文文档:http://tinymce.ax-z.cn/ tinymce-np ...
最新文章
- 分治算法的设计思想(二分检索、二分归并排序)
- 30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)
- Tomcat 服务器介绍和使用
- Linux系统的账号管理
- 20155327结对编程练习
- PR软件下载Adobe Premiere Pro CC 2019安装教程
- 【附源码】Python计算机毕业设计汽车4S店服务管理系统
- CPU频率和单位换算
- 关于MATLAB的saveas函数错误
- ios QQ下拉列表 UITableViewHeaderFooterView
- 深圳计算机专业中专学校,深圳最好的中专学校有哪些 十大中专学校排名
- 深入理解8583协议
- 腾讯混合云存储 TStor 系列再添新成员,并行存储一体机正式发布​
- 音/视频码率分配策略
- 重置帆软决策系统用户名密码
- 桌面上计算机图标移动变成复制,电脑桌面图标都变成lnk后缀怎么办
- PyCharm下载安装及配置使用教程(全过程详细截图)
- android 通知历史,如何查看已随指尖划走的那些通知 -- Past Notifications #Android
- 如何提高团队管理能力3
- 福建盼盼食品有限公司网络营销集团分析报告