这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战
项目的基本架构已经了解的差不多了，再来学习一下项目里常用的组件
富文本编辑器
使用的是Tinymce，TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。
找到了一个中文文档tinymce.ax-z.cn/ 强烈推荐这个文档，写的超清晰
之前公司富文本编辑器用的是quill，感觉很丑，而且表格功能，上传文件功能，都是我自己实现的，简直麻烦死了，而且不稳健，（后端写前端是真滴难受）最终将就着用了。
整体看来这个项目里的富文本看起来还可以，之后公司项目里也可以用一下，有机会再替换掉吧。
最基础的，在本项目中的用法是在vue文件中直接引入就行了，看起来很方便
配置项在@/components/Tinymce/index.vue中，常见的有
selector是容器，toolbar隐藏工具栏，menubar隐藏菜单栏，inline开启内联模式
内联模式最大的好处，是内容完全继承自外层定义的样式，真正实现了 "所见即所得" 需要注意的是，要小心使用杀伤力比较大的自定义CSS，这样可能会覆盖TinyMCE控件的CSS，导致编辑器显示异常
文档给出了一个开启了全部功能的demo，可以看一下
还有一个彩色icon的demo
工具栏配置
配置工具栏的话 使用toolbar来配置工具栏上可用的按钮，多个控件使用空格分隔，使用“|”来创建分组。
tinymce.init({
selector: 'textarea',
toolbar: 'undo redo | styleselect | bold italic | link image',
});
也可使用数组来配置多行工具栏。
toolbar: [
'undo | bold italic ',
'alignleft styleselect alignright',
],
这样就成功配置了toolbar，别的配置项也可以类似这样配置
