Vue环境下tinymce简易教程（优化图片上传+powerpa

2019-05-30 本文已影响2人千叶鸟

环境

VUE webpack tinymce4

额外插件

用于优化本地图片上传的第三方插件：tinymce-imageupload
用于加强word源复制粘帖的官方插件（这是收费插件，我这里不提供资源，只是教大家怎么配置）：wordpress

开撸

安装tinymce-vue

npm install @tinymce/tinymce-vue -S

安装tinymce

npm install tinymce -S

安装好之后，需要将node_modules目录下面的tinymce/skins目录放到一个可以访问到的地方（一般来说是static目录，也可以是CDN之类的，反正能访问到就行）

安装中文语言包

官网语言包下载地址
选择你想要的语言下载即可（别跟我说不认识Chinese (China)）
下载后将得到zh_CN.js文件（以简体中文为例），同样，放到一个你能访问到的地方（static目录或CDN）

引入依赖项

import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';

初始化编辑器

添加配置对象：

content: '',
editorInit: {
  language: 'zh_CN',    //  指定语言
  language_url: '/static/tinymce/zh_CN.js', //  指定语言包地址
  skin_url: '/static/tinymce4/skins/lightgray', //  指定主题地址（必须项，否则编辑器不能成功渲染出来）
  height: 300
}

在templete中添加一个Editor元素

<editor v-model='content' :init='editorInit'></editor>

完成！应该就可以看到页面能成功将编辑器渲染出来了。

添加插件

tinymce已自带了很多常用插件，但是很多默认是不启用的，需要主动引用并配置才行，这里我们以添加全屏插件fullscreen为例：

引入

import 'tinymce/plugins/fullscreen';

在editorInit中配置

editorInit: {
  ...
  plugins: "fullscreen",    //  多个插件，用空格分隔
  ...
}

常用配置

editorInit: {
  ...
  statusbar: false, //  是否显示底部状态栏
  menubar: false,   //  配置菜单栏（设置为false则隐藏）
  toolbar: "fullscreen | bold italic",   //  工具之间用空格分隔，| 表示显示一个分块符
  //    editor为当前编辑器的实例对象
  setup: function(editor) {
    //  这里为给编辑器绑定一个单击事件
    editor.on('click', function(e) {
      console.log('Editor was clicked');
    });
  }
  }
  ...
}

支持粘帖图片

引入

import 'tinymce/plugins/paste'

添加配置

editorInit: {
  ...
  paste_data_images: true,  //  设置为允许粘帖图片
  //    上传方式1：填写images_upload_url和images_upload_base_path
  images_upload_url: '/upload', //  图片上传地址
  images_upload_base_path: '/some/basepath',
  //    上传方式2（建议这种）：自定义上传逻辑
  images_upload_handler: function (blobInfo, success, failure) {
  }
  ...
}

优化图片上传

其实我觉得开启支持粘帖图片和powerpaste之后，就不需要这个了。如果有这方面的需求，可以参考这个。安装比较简单，给个github地址，自己看下吧，和普通plugins基本无异。
https://github.com/x-shadow-x/tinymce-imageupload
效果图：

image

PS：这个插件在tinymce5上无法使用，而且配置上不是那么的灵活，如果想用，建议基于改插件，做一些修改。

添加powerpaste插件

需要自行下载好对应版本的powerpaste（实在找不到可以私信我），我下载的是powerpast4.0.1-317
image
放到一个一个你能访问到的地方
很重要的一步，我看到网上很多“教程”说如果是用npm安装tinymce不能使用powerpaste，其实呢，只要花点心思读读官方文档，就可以发现，其实是可以的，只要利用external_plugins配置一下就OJBK了

editorInit: {
  ...
  //    添加扩展插件
  external_plugins: {
    'powerpaste': '/static/tinymce/powerpaste/plugin.min.js'
  }
  ...
}

powerpaste详细配置项可以再参考powerpaste插件使用手册
添加好之后，当从word复制内容到tinymce时，便会提示是否要保留格式：

image

切换/生成主题

主题生成网站：http://skin.tiny.cloud/