博客

1. 安装

npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S // 指定该版本

2. 导入、注册

<script>
import Editor from '@tinymce/tinymce-vue' // 导入

export default {
  components: {
  	Editor // 注册
  },
}
</script>

3. 使用

<template>
  <!-- 富文本 -->
  <div>
  	<!-- init: 富文本初始化配置选项 -->
  	<!-- api-key: 自己申请的key -->
    <Editor v-model="content" :init="init" api-key="" />
  </div>
</template>

4. 完整配置

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  name： 'Editor',

  components: {
    Editor
  },

  data() {
    return {
      // 富文本初始化配置
      init: {
      	height: 400,
        min_height: 400,
        max_height: 600,
        language_url: '/tinymce/langs/zh_CN.js', // 路径看第6步
        language: 'zh_CN', // 调用放在 langs 文件夹内的中文包
        skin_url: '/tinymce/skins/ui/oxide', // 路径看第6步
        toolbar_mode: 'wrap',
        plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code',
        toolbar: 'code undo redo restoredraft | cut copy paste pastetext image | forecolor backcolor bold italic underline strikethrough link anchor codesample | alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table media charmap hr pagebreak insertdatetime | fullscreen preview',
        content_style: 'p {margin: 5px 0;}',
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px', // 字体字号配置
        font_formats:
          '宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', // 字体配置
        branding: false,

		// 监听用户输入事件
		init_instance_callback: editor => {
		  editor.on('input', e => {
		  	this.xxx() // 自定义处理方法
      	  }),
    	},

		// 上传图片 - 官网给出了两种方式，这里使用自定义方式
		images_upload_handler: (blobInfo, succFun, failFun) => {
		  let xhr, formData;
		  const file = blobInfo.blob() // 转换为file对象
  		  const {size, type} = file  // 这里可以根据size限制图片大小，根据type限制上传类型

		  xhr = new XMLHttpRequest()
		  xhr.widthCredentials = false,
		  xhr.open('post', 'url')
		  xhr.setRequestHeader('Authorization', 'Your Token')
		  xhr.onload = function() {
		    let res;
		    if (xhr.status !== 200) {
		      failFun('xxx') 		// 错误处理
		      return
		    }
			res = JSON.parse(xhr.responseText);
			if (!res || typeof res.url !== 'string') {
			  failFun('xxx')		// 错误处理
			  return
			}
			succFun(`baseURL + ${res.url}`) // 成功处理
		  }
		  formData = new FormData()
		  formData.append('file', file, file.name)
		  xhr.send(formData)
		}
      }，
      content: 'hello tinymce'
  }
}
</script>

5. 最终效果

6. 优化

1. 将node_modules文件夹下的
   
   tinymce
   
   文件全部复制到
   
   public
   
   文件下；
2. 在文件夹下创建
   
   langs
   
   以用来存放中文包；
3. 具体结构：
   
   
4. index.html 中引入 tinymce

<script src="/tinymce/tinymce.min.js"></script>

5. 把插件全部手动导入

import tinymce from 'tinymce/tinymce'; // 导入 tinymce.js并在mounted中初始化 
import 'tinymce/themes/silver'; // 主题

import 'tinymce/plugins/advlist'; // 高级列表
import 'tinymce/plugins/autolink'; // 自动链接
import 'tinymce/plugins/autoresize'; // 编辑器自适应
import 'tinymce/plugins/autosave'; // 自动存稿
import 'tinymce/plugins/charmap'; // 特殊字符
import 'tinymce/plugins/code'; // 查看编辑源码
import 'tinymce/plugins/codesample'; // 代码示例
import 'tinymce/plugins/colorpicker'; // 颜色拾取插件--------
import 'tinymce/plugins/directionality'; // 文字方向
import 'tinymce/plugins/fullscreen'; // 全屏插件
import 'tinymce/plugins/hr'; // 水平分割线
import 'tinymce/plugins/image'; // 插入编辑图片
import 'tinymce/plugins/imagetools'; // 图片编辑工具
import 'tinymce/plugins/insertdatetime'; // 插入日期时间
import 'tinymce/plugins/link'; // 超链接
import 'tinymce/plugins/lists'; // 列表插件
import 'tinymce/plugins/media'; // 插入编辑媒体
import 'tinymce/plugins/nonbreaking'; // 插入不间断空格
import 'tinymce/plugins/preview'; // 预览
import 'tinymce/plugins/searchreplace'; // 查找替换
import 'tinymce/plugins/table';  // 表格插件
import 'tinymce/plugins/template'; // 内容模板
import 'tinymce/plugins/textcolor'; // 文字颜色
import 'tinymce/plugins/textpattern'; // 快速排版
import 'tinymce/plugins/visualblocks'; // 显示元素范围
import 'tinymce/plugins/visualchars'; // 显示不可见字符
import 'tinymce/plugins/wordcount'; // 字数统计

更多插件配置参考 tinymce

官网

或

中文网


最后：加载速度会明显提升。