Vue项目中使用Tinymce

前言

最近因为公司项目的后台管理端需要实现编辑器功能, 一方面满足编辑各类文章内容需求,另一方面要自己编辑一些课程相关的介绍，于是就花了一些时间对比体验现有的一些开源的编辑器。

编辑器之间的简单比较

我们项目要解决的需求说复杂也不复杂，但是却很烦人, 比如：

1. 实现图片上传(基础功能)

2. 模拟手机预览功能(基础功能)

3. 编辑的内容在app中显示要适配

4. 从135编辑器, 秀米等等编辑器拷贝过来的内容要正常显示并且排版还要保持,还要将这些第三方图片上传到自己服务(怕第三方下架图片)

引入并初始化

项目采用vue-cli@3.x构建的, 将TinyMCE下载放在index.html同级目录下, 并在index.html中引入TinyMCE

<script src=./tinymce4.7.5/tinymce.min.js></script></script>

引入文件后，在html元素上初始化TinyMCE, 由于TinyMCE允许通过CSS选择器来标识可替换的元素，所以我们只需要将包含选择器的对象传递给TinyMCE.init()，代码如下:

<template>  <div class="tinymce-container editor-container">    <textarea :id="tinymceId" class="tinymce-textarea" />  </div></template><script>export default {  name: 'Tinymce',  data() {    return {      tinymceId: this.id    }  },  mounted(){  	this.initTinymce()  }  methods: {    initTinymce() {      window.tinymce.init({        selector: `#${this.tinymceId}`      })    }  }}</script>
<div class="tinymce-container editor-container">
<textarea :id="tinymceId" class="tinymce-textarea" />
</div>
</template>

<script>
export default {
    
name: 'Tinymce',
  data() {
    
return {
    
tinymceId: this.id
    }
  },
  mounted(){
    
this.initTinymce()
  }
  methods: {
    
    initTinymce() {
    
window.tinymce.init({
    
selector: `#${
      this.tinymceId}`
      })
    }
  }
}
</script>

这样就将textarea替换为TinyMCE编辑器实例, 做完了最简单的初始化。

配置项

接下来就是添加配置项， 让TinyMCE编辑器功能丰富起来

关于基础配置, 我就不一一介绍,文档中都有详细的说明,如果英语和我一样弱鸡,可以借助chrome的翻译,大概能看明白。

下面是封装的组件的script内容, 关于一些配置直接在代码中说明:

import plugins from '@/components/Tinymce/plugins'import toolbar from '@/components/Tinymce/toolbar'import { uploadFile } from '@/api/file/upload'export default {  name: 'Tinymce',  props: {    tid: {      type: String,      default: 'my-tinymce-' + new Date().getTime() + parseInt(Math.random(100))    },    content: {      type: String,      default: ''    },    menubar: {// 菜单栏      type: String,      default: 'file edit insert view format table'    },    toolbar: {      // 工具栏      type: Array,      required: false,      default() {        return []      }    },    height: {      type: Number,      requir