富文本编辑器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"/>

效果：