[PHP知识库] Vue-富文本编辑器组件封装之TinyMCE

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> PHP知识库 -> Vue-富文本编辑器组件封装之TinyMCE -> 正文阅读

[PHP知识库]Vue-富文本编辑器组件封装之TinyMCE

文章目录

背景

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

接入说明

中文文档

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

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>