富文本编辑器Tinymce超简单使用

第一步：

1、下载组件

富文本编辑器Tinymce-Javascript文档类资源-CSDN下载

第二步：

1、复制Tinymce进项目的components文件夹中

2、复制tinymce4.7.5进项目的static文件夹中

第三步：

1、在项目的../build/webpack.dev.conf.js中添加配置

new HtmlWebpackPlugin({......,//在此处省略数据下添加内容：templateParameters: {BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory}})

第四步：

1、在../index.html中引入脚本

<script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>​​​​​​​<script src=<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js></script>

注：此处爆红不用理会，对运行没影响

第五步：

1、在vue页面中引入并声明组件

import Tinymce from "@/components/Tinymce"; //引入组件export default {//声明组件components: { Tinymce },.......}

2、在vue页面使用标签实现

<tinymce :height="300"/>

效果：