您现在的位置是:首页 > 正文

Vue-富文本编辑器组件封装之TinyMCE

2024-04-01 01:45:18阅读 3

背景

​ 目前市面上支持vue.js的富文本很多,例如:UEditor、wangEditor、Quill等等,这里也是经过了筛选和验证的,最开始选择的是Quill,后来发现使用了它的样式,对应需要展示的客户端也需要引用它的样式才能支持,耦合性太强、果断放弃、比较坑,其他的几款也尝试过wangEditor、UEditor。最终选择使用TinyMCE(插件丰富、界面美观、且对移动端兼容也还不错)。先上官网:https://www.tiny.cloud/docs/demo/full-featured/

相关依赖
"@tinymce/tinymce-vue": "^3.2.0",
"tinymce": "^5.2.0"
接入说明
中文文档

里面介绍了各种插件的使用,以及参数的配置,可以根据需要自行查阅。

http://tinymce.ax-z.cn/

组件汉化

http://tinymce.ax-z.cn/general/localize-your-language.php

导入插件

这里选择定义一个Js(import-all.js)一次性导入所有插件,也可以选择根据自己具体情况按需导入。

const importAll = requireContext => requireContext.keys().forEach(requireContext)
try {
  // 导入所有插件
  importAll(require.context('../../../node_modules/tinymce/plugins', true))
} catch (err) {
  console.log(err)
}
创建组件实例
  • 页面部分
<template>
  <div>
    <editor id="tinymceEditor"
            :init="tinymceInit"
            v-model="content"
            :key="tinymceFlag">
    </editor>
  </div>
</template>
<script>
  • 依赖部分
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入应用主题
import 'tinymce/themes/silver'
// 引入应用图标
import 'tinymce/icons/default'
// 导入全部插件
import './import-all'

// 也可以自行选择其他的存储方式,换汤不换药!
// 这里为我自定义的文件上传相关资源(获取OSS连接、获取OSS上传认证、生成文件名)
import { client, getFileNameUUID } from '@/utils/ali-oss'
import { getStsPermission } from '@/api/common/common'
  • 数据方法部分
export default {
  name: 'Tinymce',
  components: {
    Editor
  },
  props: {
    // 编辑器内容
    editorContent: {
      type: String,
      default: ''
    },
    // 编辑器高度
    height: {
      type: Number,
      default: 800
    },
    // 编辑器宽度
    width: {
      type: Number,
      default: undefined
    },
    upload_url: {
      type: String,
      default: ''
    },
    showMenubar: {
      type: Boolean,
      default: true
    },
    toolbar: {
      type: String,
      default: ` undo redo
      | formatselect
      | bold italic strikethrough forecolor backcolor formatpainter
      | link image | alignleft aligncenter alignright alignjustify
      | numlist bullist outdent indent
      | removeformat
      | preview fullscreen code`
    },
    baseUrl: {
      type: String,
      default: ''
    },
    // 统一配置cdn前缀
    cdnOrigin: {
      type: String,
      // 公共CDN
      // default: 'https://cdn.jsdelivr.net/npm/tinymce@5.2.0'
      // 自定义CDN(如果对样式文件具有其他特殊的修改,可以自行修改后上传到可靠地方访问)
      default: 'https://static.v.xxxxxxxxx.com/system/resources/tinymce'
    }
  },
  data() {
    return {
      tinymceFlag: 1,
      tinymceInit: {},
      content: ''
    }
  },
  mounted() {
    if (this.editorContent) {
      this.content = this.editorContent
    }
  },
  watch: {
    content: {
      handler() {
        this.$emit('update:editorContent', this.content)
        console.log('监听到数据变化')
      }
    },
    editorContent: {
      handler() {
        this.content = this.editorContent
      },
      immediate: true
    }
  },
  activated() {
    this.tinymceFlag++
  },
  created() {
    const _this = this
    this.tinymceInit = {
      // 语言包设置(参阅:http://tinymce.ax-z.cn/general/localize-your-language.php)
      language_url: `${this.cdnOrigin}/langs/zh_CN.js`,
      language: 'zh_CN',
      // skin路径
      skin_url: `${this.cdnOrigin}/skins/ui/oxide`,
      content_css: `${this.cdnOrigin}/skins/ui/oxide/content.css`,
      // 编辑器高度
      height: this.height,
      width: undefined,
      // 拼写检查
      browser_spellcheck: true,
      // 去水印
      branding: false,
      // 禁用编辑器底部的状态栏
      elementpath: false,
      // 隐藏编辑器底部的状态栏
      statusbar: false,
      // 允许粘贴图像
      paste_data_images: true,
      image_dimensions: false,
      // 隐藏最上方menu
      menubar: this.showMenubar,
      // 去除插件【fullpage】则去除 html head body等标签信息
      plugins: `print searchreplace autolink directionality visualblocks
        visualchars template codesample charmap hr pagebreak nonbreaking anchor toc insertdatetime
        wordcount textpattern help advlist table lists paste preview fullscreen image imagetools code link`,
      toolbar: this.toolbar,

      /** 处理文件图片文件上传 */
      async images_upload_handler(blobInfo, success, failure) {
        // 这里属于 具体的 自行上传的业务逻辑
        // 包括但不限于 OSS、 COS、 七牛云等前端WEB直传
        // 或者传输文件到各自服务器
      }
    }
  }
}
组件应用示例

这里支持获取编辑器富文本内容、纯文本内容,对应html、text动态绑定。

<el-form-item label="文章内容" prop="content">
  <tinymce v-if="open"
           :html-content.sync="form.contentHtml"
           :text-content.sync="form.content">
  </tinymce>
</el-form-item>
效果预览
编辑器窗口

image-20210924184132202

上传图片效果

image-20210924184340573

内容小窗口预览

image-20210924185152913

遇到的问题及解决方案
在dialog(弹窗)层级、遮挡问题
  • 找到依赖包下,如图位置,将其skins文件夹拷贝到本地或项目的pubilc下

image-20210924185932132

  • skin.min.css 中的z-index的值由原本的1300修改到5000及以上,这里以5000为准

image-20210924190114237

  • 放在本地引用或者自行上传到云存储中引用即可解决遮挡问题。
预览效果宽度调整问题

通过浏览器调试发现,是由外层一个.tox .tox-dialog--width-lg样式块限定了最大宽度,将其删掉或指定具体数值即可。

image-20210924191339443

图片自动增加宽度不能自适应问题

在设置tinymceInit初始化时,指定下方参数为禁用

image_dimensions: false

网站文章

  • ffmpeg混音以及音视频混合处理

    ffmpeg混音以及音视频混合处理 ffmpeg的命令 这里是我最近研究的音视频混合处理的一些ffmpeg的命令 // 音频拼接 ffmpeg -i &quot;concat:first.mp3|se...

    2024-04-01 01:45:10
  • MySQL基础笔记(七)DML

    MySQL基础笔记(七)DML

    DML主要是对数据进行增(insert)删(delete)改(update)操作。注意:如果update语句没有加where条件,则会将表中所有数据全部修改!将张三的生日改为 1999-12-12 分数改为99.99。

    2024-04-01 01:45:03
  • 联想小新I1000 win10电脑系统安装教程

    联想小新I1000 win10电脑系统安装教程

    最近因为之前电脑太卡了,想要给自己的联想小新重装系统,发现网上说采用以下方式安装的win10系统会更干净一些,过程做以下记录。

    2024-04-01 01:44:39
  • 软件测试 | FTP 性能测试脚本开发(2) 最新发布

    而许多内网的客户端不能用 PORT 模式登录 FTP 服务器,因为从服务器的 TCP20 端口无法和内部网络的客户端建立一个新的连接,从而造成了无法工作。在二进制传输中,保存文件的位序,以便原始和备份...

    2024-04-01 01:44:32
  • Vulnhub靶机渗透测试实战(一):DC-1(入门) 热门推荐

    Vulnhub靶机渗透测试实战(一):DC-1(入门) 热门推荐

    关于Vulnhub Vulnhub是一个特别好的渗透测试实战网站,提供了许多带有漏洞的渗透测试虚拟机下载。 新手入门DC-1: 下载地址: https://www.vulnhub.com/entry/...

    2024-04-01 01:44:26
  • 滑动窗口(字符串)-算法入门

    滑动窗口(字符串)-算法入门 滑动窗口概述 滑动窗口,大致就是维护一个区间去遍历一段数据,类似于双指针算法,那么用区间去遍历有什么好处吗?用一个区间去遍历的话,区间内会有原来的计算结果,避免重复计算,...

    2024-04-01 01:44:20
  • x86主机搭建家庭智能路由系统 ---- Proxmox虚拟化实现一机多用

    x86主机搭建家庭智能路由系统 ---- Proxmox虚拟化实现一机多用

    Proxmox VE简介 Proxmox VE(Proxmox Virtual Environment) 是一款完全开源虚拟化管理平台,可以管理QEMU/KVM虚拟机和LXC容器。事实上它只是一个前端管理界面,虚拟化技术由KVM和LXC提供。 安装Proxmox VE 首先到官网下载Promox VE的镜像文件。 下载地址:https://www.proxmox.com/en/downlo

    2024-04-01 01:43:57
  • 一文看懂用Python读取Excel数据

    一文看懂用Python读取Excel数据

    读:现有的Excel分为两种格式:xls(Excel 97-2003)和xlsx(Excel 2007及以上)。Python处理Excel文件主要是第三方模块库xlrd、xlwt、pyexcel-xl...

    2024-04-01 01:43:51
  • js判断值是否为空,null,undefined,为空返回true,不为空返回true

    function isEmpty(data){ var dataType = typeof(data);//typeof 返回的是字符串,有六种可能:”number”、”string”、”boolean”、”object”、”function”、”undefined” ; switch(dataType){ case “number”://数字 ...

    2024-04-01 01:43:45
  • 1024.Palindromic Number

    #include<iostream>using namespace std;bool judge(int* digit, int len) { for (int i = 0; i < len /...

    2024-04-01 01:43:19