js富文本编辑器_Vue项目中如何整合富文本编辑器

68 阅读 0 评论 45 点赞

我是靠谱客的博主温柔金鱼，这篇文章主要介绍js富文本编辑器_Vue项目中如何整合富文本编辑器，现在分享给大家，希望可以做个参考。

由于项目中要使用富文本编辑器，我在这把一些步骤做一记录，供大家参考。

富文本编辑器

npm install @tinymce/tinymce-vue -S

将下载好的 tinymce 脚本库放到你的项目的static目录下面

在你的项目/build/webpack.dev.conf.js 中添加如下配置：

templateParameters: {        BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory  }

目的：为了在html页面中能够使用这里定义的BASE_URL变量

由于富文本编辑器是第三方提供的，需要把它的脚本引入进来才能使用。

在你的项目/index.html，也就是程序的入口文件中引入js脚本

注意：引入的时候会报错，重启项目错误就会消失

在 src/components/目录下，编写富文本编辑器的组件

在需要使用到富文本编辑器的页面：

引入组件

import Tinymce from '@/components/Tinymce'

注册组件

components: { Tinymce }

组件模板

目前提供了如下几个属性:

关注大话编程，一起提升技能。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。