由于项目中要使用富文本编辑器,我在这把一些步骤做一记录,供大家参考。
文章目录
-
-
- 一、在vue中引入tinymce
- 二、配置HTML变量
- 三、引入js脚本
- 四、引入组件
-
富文本编辑器
![b357c96c0be242c589ead14f42b98a35.png](https://img-blog.csdnimg.cn/img_convert/b357c96c0be242c589ead14f42b98a35.png)
一、在vue中引入tinymce
npm install @tinymce/tinymce-vue -S
将下载好的 tinymce 脚本库放到你的项目的static目录下面
![5562eb60d295abd401931c4ff4759f4d.png](https://img-blog.csdnimg.cn/img_convert/5562eb60d295abd401931c4ff4759f4d.png)
二、配置HTML变量
在 你的项目/build/webpack.dev.conf.js 中添加如下配置:
templateParameters: { BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory }
目的:为了在html页面中能够使用这里定义的BASE_URL变量
![141aa8614b10d2b2dab1ebfc9905bf00.png](https://img-blog.csdnimg.cn/img_convert/141aa8614b10d2b2dab1ebfc9905bf00.png)
三、引入js脚本
由于富文本编辑器是第三方提供的,需要把它的脚本引入进来才能使用。
在 你的项目/index.html,也就是程序的入口文件中引入js脚本
![b83a10de3ef75f632344098fc5573a3e.png](https://img-blog.csdnimg.cn/img_convert/b83a10de3ef75f632344098fc5573a3e.png)
注意:引入的时候会报错,重启项目错误就会消失
四、引入组件
在 src/components/目录下,编写富文本编辑器的组件
在需要使用到富文本编辑器的页面:
引入组件
import Tinymce from '@/components/Tinymce'
注册组件
components: { Tinymce }
组件模板
目前提供了如下几个属性:
![37d0dbaf90328bc480c8e665ca426b3d.png](https://img-blog.csdnimg.cn/img_convert/37d0dbaf90328bc480c8e665ca426b3d.png)
关注大话编程,一起提升技能。