Vue配置TinyMCE富文本编辑器 + 图片（本地）上传到服务器

最新推荐文章于 2025-02-11 14:52:33 发布

原创

最新推荐文章于 2025-02-11 14:52:33 发布 · 6.1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

一、TinyMCE是什么？

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

我们可以先大体看一下配置完成后的样子
在这里插入图片描述

注：博主使用的TinyMCE版本是 “tinymce”: “^4.8.2” 如果超过此版本可能会导致一些问题。

首先如果想要在Vue中使用TinyMCE，我们需要准备一些什么？
汉化的中文语言包：zh_CN.js
在这里插入图片描述
下载下来之后对应的是一个js文件，这个时候我们先不用管它。
这个时候我们就可以使用yarn/npm来下载对应的tinymce包了，因为我们需要配置vue所以我们还需要下载一个对应的@tinymce/tinymce-vue这个包。

npm install tinymce@4.8.2 -S  // tinymce富文本编辑器包
npm install @tinymce/tinymce-vue -S  // 配置Vue tinymce官方提供的

当下在完成之后我们就可引用并使用了
这个时候我们在node_modules找到这个对应的包然后将其拉取到static或者public文件夹下，当然你拉到那个文件夹下都没关系，知道你的配置路径可以找到就ok。

我在这里的话，因为项目是采用vue-cil2来整体构建的所以就拉取到了static文件夹下
在这里插入图片描述

当复制完成后，我们将开始下载的中文汉化包拉到我们的tinymce中

接下来我们就上代码。

子组件 editor.vue组件

<template>
  <div class='tinymce'>
    <editor id='tinymce' v-model='sunHtml' @input="inp()" :init='init'></editor>
  </div>
</template>

<script>
import axios from 'axios'  // 因为上传图片地址是本地服务器  所以我们需要引入axios当然你也可以用原生ajax或fetch来发请求
import tinymce from 'tinymce/tinymce' // 引入我们下载的tinymce包
import '../../../static/tinymce/themes/modern/theme'  //引入theme文件，必须要引入的
import Editor from '@tinymce/tinymce-vue'  // 必须要引官方给我们的配置vue包
// 下方import引入都是文本编辑器中的配置项，这个根据个人需求去引入
import '../../../static/tinymce/p