在vue中使用tinymce富文本

本文主要介绍两种方式：

目录

第一种是直接加载远程脚本，不需要任何依赖:

第二种是使用tinymce-vue来整合tinymce(本文使用tinymce版本为5.2.1)

---

第一种是直接加载远程脚本，不需要任何依赖:

优点：在于下载文件就可以直接使用，不需要再进行其他处理。

缺点：因为是通过cdn加载的，这就需要依赖第三方，存在不稳定因素（当然这种情况可能会很少，但不排除存在）。还有就是可能在请求资源中会保频繁请求的错误。

这是具体实现的效果，支持所有的功能：

这是加载远程脚本的js文件：

这里是tinymce组件：

这里是再页面上使用：

<template>
  <div class="home">
    <Tinymce v-model="value" :height="500"></Tinymce>
  </div>
</template>

<script>
// @ is an alias to /src
import Tinymce from '@/components/tinymce/index.vue';

export default {
  name: 'Home',
  data(){
    return {
      value:"示例"
    }
  },
  components: {
    Tinymce
  }
}
</script>

源码下载地址：https://download.csdn.net/download/a1983029606/19805481?spm=1001.2014.3001.5501

第二种是使用tinymce-vue来整合tinymce(本文使用tinymce版本为5.2.1)

这种方式需要安装依赖，我这里使用cnpm来安装的，也可使用npm

cnpm install @tinymce/tinymce-vue -S

cnpm install tinymce

安装好过后，在node_modules找到tinymce文件

再将文件放在自己本地项目

我这里是将文件分开放的，当然也可以放在一个地方。语言包需要自己去官网下载，下载地址

https://www.tiny.cloud/get-tiny/language-packages/

这样就可以开始使用了

<template>
  <div class="tinymce-editor">
    <editor
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick"
      :id="tinymceId"
    >
    </editor>
  </div>
</template>
<script>
import axios from "axios";
const http = axios.create({
  // baseURL: process.env.VUE_APP_API_URL || '/admin/api',
  baseURL: "./admin"
});
import tinymce from "@/assets/tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "./importTinymcePlugins";

// import 'tinymce/icons/default/icons';
export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
    // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
    baseUrl: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default:
        "noneditable autoresize lists quickbars image table  wordcount fullscreen template"
    },
    toolbar: {
      type: [String, Array],
      default:
        "fontsizeselect | fontselect | forecolor backcolor bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | table"
    },
    readonly:{
      type: Boolean,
      default: false
    },
    auto_focus:{
      type: Boolean,
      default: true
    },
    id: {
      type: String,
      default: () => {
        num === 10000 && (num = 1);
        return `tinymce${+new Date()}${num++}`;
      }
    }
  },
  data() {
    return {
      init: {
        external_plugins: {},
        selector: `#${this.tinymceId}`,
        language_url: require("../../../../public/tinymce/langs/zh_CN.js"),
        language: "zh_CN",
        skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`, //`${this.baseUrl}/tinymce/skins/ui/oxide`
        content_css: require("../../../../public/tinymce/skins/content/default/content.css"), //`${this.baseUrl}/tinymce/skins/content/default/content.css`
        images_upload_base_path: "/demo",
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        font_formats: '默认字体="Calibri,Helvetica Neue,Helvetica";宋体=宋体;Arial=arial,helvetica,sans-serif;',
        plugins: this.plugins,
        toolbar: this.toolbar,
        menubar: false,
        branding: false,
        auto_focus: this.auto_focus,
        powerpaste_word_import: "propmt", // 参数可以是propmt, merge, clear，效果自行切换对比
        powerpaste_html_import: "propmt", // propmt, merge, clear
        powerpaste_allow_local_images: true,
        paste_data_images: true,
        visual_table_class:"my_table_class",
        content_style: "table {width:calc(100% - 8px) !important;}",
        // 行内模式
        inline: true,
        toolbar_sticky: false,
        // 快速访问工具栏目
        quickbars_insert_toolbar: false,
        quickbars_image_toolbar: false,
        quickbars_selection_toolbar:
          "fontsizeselect | fontselect | forecolor backcolor bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | table",
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          let formData = new FormData();
          // console.log(blobInfo.blob().type);

          formData.append("file", blobInfo.blob());

          http.post("file", formData).then(response => {
            // console.log(response.data["url"]);
            if (response.data["status"] == 200) {
              success(response.data["url"]);
            } else {
              failure("上传失败！");
            }
          });
        }
      },
      myValue: this.value,
      tinymceId: ""
    };
  },
  created() {
    this.tinymceId = this.id;
  },
  mounted() {
    tinymce.init({});
    //获取焦点光标到最后面
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = "";
    }
  },
  watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    }
  }
};
</script>
<style scoped lang="scss">
#tinydemo {
  height: 100%;
  width: 100%;
  text-align: left;
}

.mce-edit-focus {
  height: 100%;
  width: 100%;
  p {
    margin: 0 8px !important;
  }
}
</style>

importTinymcePlugins.js

import "@/assets/tinymce/themes/silver";
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "@/assets/tinymce/plugins/image"; // 插入上传图片插件
import "@/assets/tinymce/plugins/media"; // 插入视频插件
import "@/assets/tinymce/plugins/table"; // 插入表格插件
import "@/assets/tinymce/plugins/lists"; // 列表插件
import "@/assets/tinymce/plugins/wordcount"; // 字数统计插件
import "@/assets/tinymce/plugins/colorpicker";
import "@/assets/tinymce/plugins/fullscreen";
import "@/assets/tinymce/plugins/autolink";
import "@/assets/tinymce/plugins/link";
import "@/assets/powerpaste";
import "@/assets/tinymce/plugins/autoresize";
import "@/assets/tinymce/plugins/preview";
import "@/assets/tinymce/plugins/template";
import "@/assets/tinymce/plugins/quickbars";
import "@/assets/tinymce/plugins/noneditable";
import "@/assets/tinymce/plugins/print";