在 vue 中基于 tinymce 封装的一个富文本编辑器组件

效果图

在这里插入图片描述

过程

安装对应的依赖（最好指定版本）

 npm install [email protected] -S
 npm install @tinymce/[email protected] -S

安装依赖的版本不同，可能会出现奇奇怪怪的问题！！！

在项目的 public 目录下新建【tinymce】文件夹，整体目录结构如下
到 tinymce 官网去下载汉化包 https://www.tiny.cloud/get-tiny/language-packages/

将解压后的文件夹【langs】拷贝到刚刚新建的【 tinymce】文件夹目录下
在项目下的【node_modules】目录下找到【tinymce】文件夹下的【skins】文件夹，将其拷贝到刚刚新建的【tinymce】文件夹目录下。
在 components 目录下新建 Tinymce 文件夹，并新建如下几个文件。

Tinymce.vue 文件中代码如下：

<template>
  <div>
    <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor>
  </div>
</template>

<script>
import Editor from "@tinymce/tinymce-vue";
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";

import axios from "axios";

// 引入编辑器插件（基本免费插件都在这儿了）
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/anchor"; //锚点
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/autosave"; //自动存稿
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //编辑源码
import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/directionality"; //文字方向
import "tinymce/plugins/emoticons"; //表情
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
import "tinymce/plugins/hr"; //水平分割线
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/image"; // 插入图片
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/pagebreak"; //插入分页符
import "tinymce/plugins/paste"; //粘贴插件
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/print"; //打印
import "tinymce/plugins/save"; //保存
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"; //字数统计
// import "tinymce/icons/default/icons";
// import "tinymce/plugins/toc"; //目录生成器
// import "tinymce/plugins/importcss"; //引入css
// import "tinymce/plugins/fullpage"; //文档属性
// import "tinymce/plugins/quickbars"; //快速工具栏
// import 'tinymce/plugins/spellchecker'  //拼写检查，未加入汉化，不建议使用
// import "tinymce/plugins/tabfocus"; //切入切出，按tab键切出编辑器，切入页面其他输入框中
// import "tinymce/plugins/autoresize"; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import plugins from "./plugins";
import toolbar from "./toolbar";
import {
    
     fontsize_formats, font_formats, line_height } from "./fontstyle";
export default {
    
    
  name: "TinymceDemo",
  components: {
    
     Editor },
  props: {
    
    
    htmlStr: {
    
    
      type: String,
      default: "",
    },
  },
  data() {
    
    
    return {
    
    
      tinymceHtml: this.htmlStr,
      editorInit: {
    
    
        language_url: "tinymce/langs/zh_CN.js", //你下载的语言包的路径
        language: "zh_CN",
        skin_url: "tinymce/skins/ui/oxide", //主题
        height: 700,
        max_height: 700,
        menubar: false, //隐藏默认菜单栏
        branding: false, //隐藏右下角商标
        plugins,
        toolbar,
        fontsize_formats,
        font_formats,
        toolbar_sticky: true,
        autosave_ask_before_unload: false,
        style_formats_merge: true, //设置行高
        style_formats_autohide: true, //设置行高
        style_formats: [{
    
    
            title: "Line Height",
            items: line_height,
        }],
        // forced_root_block : 'div',  默认是段落(p)
        images_upload_handler: (blobInfo, success, failure) => {
    
    
          console.log(blobInfo.blob().size / 1024 / 1024);

          if (blobInfo.blob().size / 1024 / 1024 > 20) {
    
    
            failure("上传失败，图片大小请控制在 20M 以内");
          } else {
    
    
            let formData = new FormData();
            formData.append("file", blobInfo.blob());
            // 上传图片的接口
            axios
              .post("/api/upload/image", formData)
              .then((res) => {
    
    
                success(res.data.url);
              })
              .catch(() => {
    
    
                failure("上传出错，服务器开小差了呢");
              });
          }
        },
        file_picker_callback: (callback, value, meta) => {
    
    
          if (meta.filetype === "media") {
    
    
            // 动态创建上传input，并进行模拟点击上传操作，达到本地上传视频效果。
            let input = document.createElement("input"); //创建一个隐藏的input
            input.setAttribute("type", "file");
            input.setAttribute("accept", ".mp4");
            input.onchange = function () {
    
    
              let file = this.files[0];
              let formData = new FormData();
              formData.append("file", file);
              // 上传视频接口
              axios
                .post("/api/upload/video", formData)
                .then((res) => {
    
    
                  console.log(res.data.url);
                  callback(res.data.url);
                })
                .catch(() => {
    
    
                  console.log("上传出错，服务器开小差了呢");
                });
            };
            //触发点击
            input.click();
          }
        },
      },
    };
  },
  watch: {
    
    
    htmlStr(newValue) {
    
    
      this.tinymceHtml = newValue;
    },
    tinymceHtml(newValue) {
    
    
      this.$emit("handleChangeHtml", newValue);
    },
  },
  mounted() {
    
    },
  methods: {
    
    },
};
</script>

<style scoped>
.editor-content {
    
    
  margin-top: 20px;
}
</style>

fontstyles.js 文件中的代码如下：

module.exports = {
    
    
  fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
  font_formats:
    "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif",
  line_height: [
    {
    
     title: "1", block: "p", styles: {
    
     "line-height": "1.0" } },
    {
    
     title: "1.5", block: "p", styles: {
    
     "line-height": "1.5" } },
    {
    
     title: "1.75", block: "p", styles: {
    
     "line-height": "1.75" } },
    {
    
     title: "2", block: "p", styles: {
    
     "line-height": "2" } },
    {
    
     title: "3", block: "p", styles: {
    
     "line-height": "3" } },
    {
    
     title: "4", block: "p", styles: {
    
     "line-height": "4" } },
    {
    
     title: "5", block: "p", styles: {
    
     "line-height": "5" } },
  ],
};

plugins.js 文件中的代码如下：

// 你想使用的任何插件都必须导入
// 详细插件列表请参阅 https://www.tinymce.com/docs/plugins/
// 自定义构建请参见 https://www.tinymce.com/download/custom-builds/

const plugins = ["preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern help autosave"] //这里所有的插件需要先引入，否则会报错

export default plugins

toolbar.js 文件中的代码如下：

// 下面是工具栏的列表
// 详细清单见 https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols

const toolbar = [
  "code codesample lineheight undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify",
  "|  outdent indent | styleselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime \
              print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs",
];
export default toolbar;

使用组件

在需要使用的组件中，引入即可

<template>
  <tinymce
    style="height: auto; border-radius: 22px"
    @handleChangeHtml="handleChangeHtml"
  ></tinymce>
</template>
<script>
import tinymce from "../components/Tinymce/Tinymce";
export default {
    
    
  components: {
    
     tinymce },
  data() {
    
    
    return {
    
    };
  },
  methods: {
    
    
    handleChangeHtml(val) {
    
    
      console.log(val);
    },
  },
};
</script>

项目的 gitee 仓库地址：https://gitee.com/junfeng535/tinymce-rich-text

在 vue 中基于 tinymce 封装的一个富文本编辑器组件

效果图

过程

使用组件

猜你喜欢