「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」
前言
我今年开始分享的都是实际项目中遇到的问题和开发过程，没有花里胡哨、深奥难懂的理论知识，主要是自身就不喜欢看那样的文章，因为那样的文章不能解决搜索相关问题并且希望马上得到解答的小伙伴，所以我就只打算输出一些实际项目中用到的技术知识，希望可以帮助其他小伙伴在遇到类似问题时不要再去踩坑，从而丰富自己的工作经验。
这次聊一聊富文本编辑器的在前端项目里面的使用，聊聊富文本编辑器相关的应用和在实际项目中怎么处理产品需求，并实现效果的过程。富文本编辑器其实就是用来解决Input和Textarea组件不能表现的页面效果的工具插件。我在掘金上搜索了一下讲富文本编辑器的文章，都是些简单应用，也没有针对实际开发做阐述的文章，所以我觉得很有必要结合实际的产品需求聊聊富文本编辑器的相关技术知识。如果你耐心看完这个系列的文章，你应该会更有信心面对产品提出的相关富文本编辑器的需求，毕竟我就是这样过来的，现在就要换成你了。
需求背景
我们公司是建筑设计行业的，实际开发项目中，需要爬取国家知识库里的一些规范标准文章来建成我们公司自己的知识库，文章是图文结合的，各种不可控的格式也会有，再加上平时我们的设计人员会将一些工作中累积的知识发布在公司知识库上，而发布的知识就有包含公式等一些专业的字符，所以就需要我们前端使用一款强大的富文本编辑器来承载这些内容，使其能完美的应对各种稀奇古怪的样式效果。
针对上面的背景，我们选择了曾有人称为宇宙第一的富文本编辑器——TinyMCE富文本编辑器。
TinyMCE
TinyMCE是什么？
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。看看别人的介绍，只能说牛皮克拉斯：
The world's #1 open source rich text editor.（世界上第一个开源的富文本编辑器。）
Used and trusted by millions of developers, TinyMCE is the world’s most customizable, scalable,
and flexible rich text editor.
（TinyMCE是世界上最具可定制性、可伸缩性和灵活性的富文本编辑器，被数百万开发人员使用和信任）
TinyMCE每年有超过3.5亿次的下载量，是互联网最值得信赖的企业级开源的编辑器之一。它是一个功能强大，所见即所得的编辑器，通过不断地创新，为用户提供了优秀的内容和很好的体验感。
TinyMCE的优势？
- 开源可商用
- 插件丰富，自带插件基本涵盖日常所需功能
- 接口丰富，可扩展性强，有能力可以无限拓展功能
- 界面好看，符合现代审美
- 提供经典、内联、沉浸无干扰三种模式
- 多语言支持，官网可下载几十种语言
这里的优势是官方列出的优势，其实我们在选择一个插件时，主要看的是它是否满足我们当前的需求，对我们需求的支持度是否耦合，其次就是看它可扩展性如何，二次开发的难度怎样，界面样式是否满足UI审美等，当综合了这些因素之后方可去决定是否选择该插件适用我们项目。
当然在我们对比了现在互联网上主流的富文本编辑器之后，发现TinyMCE很切合我们项目需求，功能相比于UEditor、KindEditor、wangEditor等编辑器来说，TinyMCE更强大，API也更丰富，文档也相对清晰，更主要的原因还是它满足我们的实际开发场景，故我们选择TinyMCE来进行开发。
TinyMCE如何使用？
话不多说，直接来看它是如何使用的，我这里主要说的是在React项目中的使用，Vue等其他项目中的大同小异，开搞：
快速使用
安装：
yarn add @tinymce/tinymce-react
在页面导入并使用：
import React from "react";
import { Editor } from '@tinymce/tinymce-react';
const TinymceEditor = (props) => {
return (
<div style={{width: 800, margin: '60px auto'}}>
<Editor />
</div>
)
}
export default TinymceEditor;
效果：
这就是TinyMCE编辑器的简单使用，可以看到使用简单。但这远远不是TinyMCE编辑器的最终态，这只是基础版本，它的配置项很多，你想要的它的什么功能你可以访问TinyMCE文档进行查看获取。
编辑器配置
配置语言
<Editor
init={
{
language: 'zh_CN',
}
}
/>
基础配置
<Editor
init={
{
language: 'zh_CN',
min_height: 500,
toolbar_mode: 'wrap',
body_class: 'tinymce-content',
quickbars_image_toolbar: 'alignleft aligncenter alignright | imageoptions',
block_formats: 'Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3; Header 4=h4; Header 5=h5; Header 6=h6',
fontsize_formats: '8px 10px 14px 16px 18px 20px 22px 24px 26px 28px 32px 48px',
font_formats: '宋体;仿宋;微软雅黑;黑体;仿宋_GB2312;楷体;隶书;幼圆',
toolbar:
'formatselect | \ \
bold italic underline strikethrough forecolor backcolor removeformat | \
bullist numlist | \
outdent indent | \
image table | \
alignleft aligncenter alignright alignjustify | \
link charmap | \
undo redo preview'
}
}
/>
上面可以看到一个属性body_class，它其实是给编辑区的<body>标签定义类名为tinymce-content，可用于修改覆盖它原有的样式，它是支持自定义富文本编辑器内容样式的，可以为.less文件，编译后的css文件是放入public文件夹，然后在index.html和组件配置中使用的；还有一个属性为content_css，它是为编辑区指定css文件，比如让编辑区的字体颜色大小，去除标签原有样式等，项目中是把它放在public文件夹新建的editor文件中进行引用，配置代码为：
content_css: '/editor/content.css',
body_class: 'tinymce-content',
插件配置
<Editor
init={
{
language: 'zh_CN',
plugins: [
'advlist autolink lists link charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table code help wordcount image imagetools codesample',
'quickbars autoresize',
'powerpaste', // plugins中，用powerpaste替换原来的paste
],
min_height: 500,
toolbar_mode: 'wrap',
body_class: 'tinymce-content',
quickbars_image_toolbar: 'alignleft aligncenter alignright | imageoptions',
block_formats: 'Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3; Header 4=h4; Header 5=h5; Header 6=h6',
fontsize_formats: '8px 10px 14px 16px 18px 20px 22px 24px 26px 28px 32px 48px',
font_formats: '宋体;仿宋;微软雅黑;黑体;仿宋_GB2312;楷体;隶书;幼圆',
toolbar:
'formatselect | \ \
bold italic underline strikethrough forecolor backcolor removeformat | \
bullist numlist | \
outdent indent | \
image table | \
alignleft aligncenter alignright alignjustify | \
link charmap | \
undo redo preview'
}
}
/>
可以看到插件就是在plugins里面进行配置，我在下面列出我们项目中用到的：
autolink：当用户输入有效的完整URL时，autolink插件会自动创建超链接
preview：在弹出的拟态窗口中预览当前编辑区的内容
autosave：定时保存内容，在文件菜单中添加了一个“恢复草稿”选项，在工具栏添加一个“恢复草稿”的可选按钮，
同时如果用户修改了编辑区内的原始内容，在跳转URL之前，其还会弹出一个提示框，提醒用户修改的内容没有提交
link: 可以添加超链接，同时支持右键快捷菜单
image：将图片插入到编辑区
table：提供了相当强大的表格编辑功能,堪比word
queickbars：提供一个新的UI组件帮助快速创建内容
help：提供帮助组件，提示快捷键的用法、当前加载的插件和TinyMCE版本
emoticons：可在内容区插入unicode字符表情
可配置的插件还有很多，可以根据实际开发去找寻适合自身需求的插件进行填充，我们的需求就有：用户输入一个正确的链接或者从别处复制的链接粘贴进来要识别成超链接，在展示的时候可以点击进行跳转查看，这里用的就是autolink；上传图片使用的是image，点击图片可以进行预览这个放在后期文章阐述。提供的插件很多也很丰富，使用也很灵活方便，相应的控制API也很完备，所以别人能成为世界第一不是没道理的🤙
三种模式
根据TinyMCE官网获知，它有三种模式：内联模式、经典模式、沉浸无干扰模式。分别的效果是：
内联样式
<div style={{width: 400, margin: '60px auto', border: '1px solid #ddd'}}>
<Editor
init={
{
language:'zh_CN',
toolbar: false, //隐藏工具栏
menubar: false, //隐藏菜单栏
inline: true, //开启内联模式
plugins: [ 'quickbars','link','table' ], //选择需加载的插件
//选中时出现的快捷工具，与插件有依赖关系
quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage',
}
}
/>
</div>
经典模式
沉浸无干扰模式
这里说个趣事，由于前期没有仔细翻阅文档，需求要求不需要工具栏，然后直奔主题，忽视了内联模式，自己用TinyMCE还去封装了一个简单的无工具栏的编辑器组件，现在看来真的多此一举了。
关于TinyMCE的基础知识和使用介绍就差不多了，后续将继续更文聊TinyMCE在实际项目中使用是如何封装并使用的，还有就是上面有提到的如何在上传了图片或者文件之后可以实现预览查看的功能组件封装。从上面能真实的感知到TinyMCE确实很强大，并且使用没有啥难度，只是要研究的是项目中如何去使用好它，发挥它的强大功能，提升富文本编辑的体验效果。
好了，后续将发布两篇文章：一篇是如何封装TinyMCE组件，另一篇则是TinyMCE编辑的图文如何预览图片和文件，敬请期待🙏
参考
往期精彩文章
- 在React项目中实现仿饿了么Checkbox多选按钮样式的效果组件
- 2022第一次更文：前端项目实战中的3种Progress进度条效果
- 2022年前端技术趋势：你不进来看看，怎么赚它一个小目标？
- 假如古代有程序员写总结，大概就是这样吧 | 2021年终总结
后语
伙伴们，如果觉得本文对你有些许帮助，点个👍或者➕个关注在走呗^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。
