tinymce-vue 使用总结

前言

由于项目的需求，需要使用tinymce富文本编辑器；分享一下在项目中使用tinymce的一些注意点。
当前代码采用的是Vue版本：2.x

项目demo

演示地址：https://merrylmr.top/admin-vuetify/#/tinymce

https://github.com/merrylmr/vue-tinymce-demo

github地址

https://github.com/tinymce/tinymce-vue

官方文档

基本使用

安装`tinymce-vue`

vue2.x安装 tinymce-vue 3的相关版本

$ npm install --save "@tinymce/tinymce-vue@^3"

vue3.x安装tinymce-vue 4的相关版本:

$ npm install --save "@tinymce/tinymce-vue@^4"

通过组件配置api-key的方式

Demo:

<template>
  <editor
      :apiKey="apiKey"
      v-model="value"
      :init="init">
  </editor>
</template>

 <script>
import Editor from '@tinymce/tinymce-vue'
export default {
  name: 'tinymce-comp',
  data() {
    return {
      value: '',
      init: {
        language_url: '/tinymce/langs/zh_CN.js',// 语言包的路径
        language: 'zh_CN',//语言
        height: 300,//编辑器高度
        branding: false,//是否禁用“Powered by TinyMCE”
        menubar: true,//顶部菜单栏显示,
        toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code codesample link help',
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount',
          'codesample'
        ],
      },
      apiKey: 'xxx'
    }
  },
  components: {Editor},
}
</script>

通过包管理方式下载 tinymce

npm install tinymce -S

Demo:

<template>
<editor  v-model="value" :init="init"></editor>
</template>
<script>
// 引入基本文件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'

// 引入你需要的插件
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';

export default{
  data() {
      return {
        value:' ',
        init: {
       base_url: '/tinymce',
       language_url: '/tinymce/langs/zh_CN.js',// 语言包的路径
      language: 'zh_CN',//语言
      skin_url: '/tinymce/skins/ui/oxide',// skin路径
      height: 300,//编辑器高度
      branding: false,//是否禁用“Powered by TinyMCE”
      menubar: false,//顶部菜单栏显示,
      toolbar:' undo redo | fontsizeselect bold italic underline strikethrough ',
      plugins:'paste  link'
        }
      }
   },
  components:{Editor},
  mounted() {
    // Initialize the app
      tinymce.init({ });
  }
}
</script>

注意：

需要将 node_modules下的tinymce/skins文件夹复制到项目的public/tinymce文件夹下，保持对应的目录结构。
icon图标加载失败，如下图所示：

解决方案:
查看安装的tinymce版本，若>5.0.8，则需要将 node_modules下的tinymce/icons文件夹复制到项目的public/tinymce下，保持对应的目录结构;
init中配置:

init:{
  base_url: '/tinymce'
}

两种方式的比较

1.通过组件配置api-key的方式，这种需要你注册或者购买了tinymce服务,核心功能是不收费；

通过包下载的方式优点：加载更快，api-key方式访问的CDN非常缓慢。

image.png

常见操作

字体列表修改

init:{
 fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 50px 56px 60px 64px',

}

自定义工具栏 (注册一个新的工具栏按钮

)
在init数据里面

 init:{
 setup:(editor)=>{
  editor.ui.registry.addButton('customBtn',{
             tooltip: '自定义工具栏按钮',
              text: 自定义'',
              onAction: () => {
              window.alert('新的工具栏按钮')
              }
     })
  }
}

同时需要在toolbar配置项中添加customBtn;

粘贴图片(使用远程图片地址)

1.引入粘贴插件

 import 'tinymce/plugins/paste'; // 张贴

2.插件列表里面写入'paste'

  plugins: 'paste',

3.init里面添加下面语句

 init:{
 paste_data_images: true,
}

4.粘贴的图片上传到服务器或者七牛配置如下

init:{
  images_upload_handler: function (blobInfo, success, failure) {
    var xhr, formData;

    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.open('POST', 'postAcceptor.php');

    xhr.onload = function() {
      var json;

      if (xhr.status != 200) {
        failure('HTTP Error: ' + xhr.status);
        return;
      }

      json = JSON.parse(xhr.responseText);

      if (!json || typeof json.location != 'string') {
        failure('Invalid JSON: ' + xhr.responseText);
        return;
      }

      success(json.location);
    };

    formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());

    xhr.send(formData);
  }
}