简介

一款非常实用,功能齐全的富文本编辑器----Tinymce Editor

首先献出文档 -- 英文文档 中文文档 编辑器效果如图

我这里是选择的vite构建的项目, 相对于webpack,vite在速度上快的不止一星半点.也不说废话了,直接上步骤吧!

第一步: 使用npm (具体操作跟着vite官方文档操作即可)

npm init vite@latest

第二步: 给项目取个名字

第三步:选择构建的项目类型,vanilla(原生项目),vue(vue3),react. 基本上一顿回车,项目很快的就创建好了.

之后使用tinymce就非常简单了, gitLab上找到花裤衩的vue-element-admin. 克隆下来之后, 把项目中的src/components/Tinymce这个文件拷贝到自己的项目中去.

这个Tinymce包中样式文件使用了sass语法,所以你需要装sass包才能使用. npm i sass -D即可. 这时语法是没有问题了,但是会报这个错误

很明显这是引用错误

这里面几个vue后缀的文件并不能简写, 我们将其后缀加上即可.

此时已经显示成功,但是该富文本还是英文的,一般上传项目目中都是单独写的并不需要借助这个富文本,我们把右上角的配置删掉即可

配置中有语言配置,花裤衩这里默认是英文我们将这个en改成zh即可

目前的效果如图所示

这时的富文本还没有字体的选项, 我们给它加上,在toolbar.js的配置中加上fontsizeselect即可.具体下拉选择的字体项在index.vue中的window.tinymce.init中加上就行啦

效果图如下所示:

希望能帮助到使用该富文本的你.