在Vue中使用tinymce

唐皓晨大约 17 分钟

在 Vue 中使用 tinymce

tinymce

TinyMCE 是一款易用、且功能强大的所见即所得的富文本编辑器。. 跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。

TinyMCE 的优势：

开源可商用，基于 LGPL2.1
插件丰富，自带插件基本涵盖日常所需功能
接口丰富，可扩展性强，有能力可以无限拓展功能
界面好看，符合现代审美
提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
对标准支持优秀（自 v5 开始）
多语言支持，官网可下载几十种语言。

安装 tinymce

首先安装 tinymce

npm install tinymce -S

然后根据项目的 vue 版本选择安装 tinymce-vue 的版本

npm install @tinymce/tinymce-vue -S

vue2 中不能使用 @tinymce/tinymce-vue 4 以上的版本

npm install @tinymce/tinymce-vue@3 -S

安装完成后，复制 node_modules/tinymce 目录下所有文件至 public/目录下

使用

在 main.js 中引入

import Editor from "@tinymce/tinymce-vue"; //编辑器引入
vue.use(Editor);

在 vue 中使用

<template>
  <editor v-model="content" :init="init" />
</template>
<script>
export default {
  data() {
    return {
      content: "",
      init: {
        // 使用的插件
        plugins: [
          "textcolor emoticons spellchecker fullscreen lists link image charmap table",
        ],
        // 工具栏
        toolbar: [
          "styleselect | fontselect | fontsizeselect | forecolor | backcolor | undo redo | spellchecker | fullscreen",
          "bold italic underline strikethrough subscript superscript | removeformat | bullist numlist |link align alignnone image charmap table",
        ],
        // 隐藏右下角技术支持
        branding: false,
        // 禁止用户拉伸编辑器
        resize: false,
      },
    };
  },
};
</script>

汉化

编辑器默认是英文的，如果需要汉化，可以下载中文汉化包

将下载的汉化包解压到 tinymc/langs 目录下

在富文本初始化中使用汉化包

export default {
  data() {
    return {
      content: "",
      init: {
        // 配置汉化包
        language: "zh_CN",
        // 汉化包存放路径
        language_url: "tinymce/langs/zh_CN.js",
        // 使用的插件
        plugins: [
          "textcolor emoticons spellchecker fullscreen lists link image charmap table",
        ],
        // 工具栏
        toolbar: [
          "styleselect | fontselect | fontsizeselect | forecolor | backcolor | undo redo | spellchecker | fullscreen",
          "bold italic underline strikethrough subscript superscript | removeformat | bullist numlist |link align alignnone image charmap table",
        ],
        // 隐藏右下角技术支持
        branding: false,
        // 禁止用户拉伸编辑器
        resize: false,
      },
    };
  },
};

加载缓慢问题解决

tinymce 服务器在国外，通过网络加载时，会很慢

配置 tinymce-script-src，加载之前拉到本地的 tinymc

<template>
  <editor v-model="content" :init="init" :tinymce-script-src="tinymceSrc" />
</template>
<script>
export default {
  data() {
    return {
      content: "",
      // tinymce 资源存储路径
      tinymceSrc: "tinymce/tinymce.min.js",
      init: {
        // 配置汉化包
        language: "zh_CN",
        // 汉化包存放路径
        language_url: "tinymce/langs/zh_CN.js",
        // 使用的插件
        plugins: [
          "textcolor emoticons spellchecker fullscreen lists link image charmap table",
        ],
        // 工具栏
        toolbar: [
          "styleselect | fontselect | fontsizeselect | forecolor | backcolor | undo redo | spellchecker | fullscreen",
          "bold italic underline strikethrough subscript superscript | removeformat | bullist numlist |link align alignnone image charmap table",
        ],
        // 隐藏右下角技术支持
        branding: false,
        // 禁止用户拉伸编辑器
        resize: false,
      },
    };
  },
};
</script>

优化后，从本地加载资源，速度显著提示