专栏首页程序员成长指北Vue项目中使用Tinymce

Vue项目中使用Tinymce

前言

最近因为公司项目的后台管理端需要实现编辑器功能, 一方面满足编辑各类文章内容需求,另一方面要自己编辑一些课程相关的介绍,于是就花了一些时间对比体验现有的一些开源的编辑器。

编辑器之间的简单比较

  • UEditor:基本满足各种需求,依赖于jquery但是已经不再维护了,实现上传图片等需要修改源码,界面不太美观,对于老浏览器兼容还不错,但是我这里采用的是VueJS来开发,所以放弃
  • wangEditor:比较轻量级,最最最重要的是有中文文档上手快,UI也比较漂亮,而且还是国产的, 对于编辑器功能需求少的兄die可以考虑,但是考虑到我这项目业务比较重,所以只好放弃
  • Bootstrap-wysiwyg:简洁好看,依赖于Bootstrap, jquery,选择的Element-ui弃之
  • TinyMCE: 支持图片在线处理,插件多,功能强。 嗯,就选它啦(虽然文档是英文,但是谷歌翻译也不错 ☚)

我们项目要解决的需求说复杂也不复杂,但是却很烦人, 比如:

  1. 实现图片上传(基础功能)
  2. 模拟手机预览功能(基础功能)
  3. 编辑的内容在app中显示要适配
  4. 从135编辑器, 秀米等等编辑器拷贝过来的内容要正常显示并且排版还要保持,还要将这些第三方图片上传到自己服务(怕第三方下架图片)

引入并初始化

  • 引入tinymace文件

项目采用vue-cli@3.x构建的, 将TinyMCE下载放在index.html同级目录下, 并在index.html中引入TinyMCE

<script src=./tinymce4.7.5/tinymce.min.js></script>
  • 初始化

引入文件后,在html元素上初始化TinyMCE, 由于TinyMCE允许通过CSS选择器来标识可替换的元素,所以我们只需要将包含选择器的对象传递给TinyMCE.init(),代码如下:

<template>
  <div class="tinymce-container editor-container">
    <textarea :id="tinymceId" class="tinymce-textarea" />
  </div>
</template>

<script>
export default {
  name: 'Tinymce',
  data() {
    return {
      tinymceId: this.id
    }
  },
  mounted(){
  	this.initTinymce()
  }
  methods: {
    initTinymce() {
      window.tinymce.init({
        selector: `#${this.tinymceId}`
      })
    }
  }
}
</script>

这样就将textarea替换为TinyMCE编辑器实例, 做完了最简单的初始化。

配置项

接下来就是添加配置项, 让TinyMCE编辑器功能丰富起来

  • 基础配置

关于基础配置, 我就不一一介绍,文档中都有详细的说明,如果英语和我一样弱鸡,可以借助chrome的翻译,大概能看明白。

下面是封装的组件的script内容, 关于一些配置直接在代码中说明:

import plugins from '@/components/Tinymce/plugins'
import toolbar from '@/components/Tinymce/toolbar'
import { uploadFile } from '@/api/file/upload'
export default {
  name: 'Tinymce',
  props: {
    tid: {
      type: String,
      default: 'my-tinymce-' + new Date().getTime() + parseInt(Math.random(100))
    },
    content: {
      type: String,
      default: ''
    },
    menubar: {// 菜单栏
      type: String,
      default: 'file edit insert view format table'
    },
    toolbar: {
      // 工具栏
      type: Array,
      required: false,
      default() {
        return []
      }
    },
    height: {
      type: Number,
      required: false,
      default: 360
    }
  },
  data() {
    return {
      tinymceId: this.tid,
      finishInit: false,
      hasChanged: false,
      config: {...      
      }
    }
  },
  mounted() {
    this.initTinymce()
  },
  methods: {
    initTinymce() {
      window.tinymce.init({
        selector: `#${this.tinymceId}`,
        ...this.config,
        content_style: 'img {max-width:100% !important }',
        // 初始化赋值
        init_instance_callback: editor => {
          if (this.content) {
            editor.setContent(this.content)
          }
          this.finishInit = true
          editor.on('NodeChange Change SetContent KeyUp', () => {
            this.hasChanged = true
          })
        },
        // 上传图片
        images_upload_handler: (blobInfo, success, failure) => {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          uploadFile(formData)
            .then(res => {
              if (res.data.code == 0) {
                let file = res.data.data
                success(file.filePath)
                return
              }
              failure('上传失败')
            })
            .catch(() => {
              failure('上传出错')
            })
        }
      })
    }
  }
}

组件初始化完成,编辑框如图所示:

config内容

为了方便阅读, 这里将config内容抽取出来单独展示, 我也对部分配置项进行了注释, 方便理解:

    config: {
        language: 'zh_CN',
        height: this.height,
        menubar: this.menubar, //菜单:指定应该出现哪些菜单
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar, // 分组工具栏控件
        plugins: plugins, // 插件(比如: advlist | link | image | preview等)
        object_resizing: false, // 是否禁用表格图片大小调整
        end_container_on_empty_block: true, // enter键 分块
        powerpaste_word_import: 'merge', // 是否保留word粘贴样式  clean | merge
        code_dialog_height: 450, // 代码框高度 、宽度
        code_dialog_width: 1000,
        advlist_bullet_styles: 'square' // 无序列表 有序列表
      }

toolbar.js

组件中引入的toolbar.js文件存的是TinyMCE初始化时加载的工具栏控件, 设置的顺序即代表着在编辑器工具栏上出现的顺序

const toolbar = [
    "searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample",
    "hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen"
];

export default toolbar;

plugin.js

组件中引入的plugin.js文件是设置TinyMCE初始化时加载哪些插件,默认情况下,TinyMCE不会加载任何插件:

const plugins = [
"advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount"
];

export default plugins;

上传图片

TinyMCE提供了图片上传处理函数images_upload_handler, 该函数有三个参数:blobInfo,success callback,failure callback, 分别是图片内容, 一个成功的回调函数以及一个失败的回调函数,具体上传图片代码在上面已经写,这里就不赘述; 需要注意的是,当向后台上传完图片, 我们要调用success函数来用服务器地址替换<image>标签的src属性

  succuss(服务图片地址);

本来以为上传图片就完成了, 图片上传就算完事了, 结果产品小伙伴说啦: “你这图片不可以直接复制粘贴吗?每次点上传好伐呀!!”, 那继续加复制粘贴功能呗!

拖入/粘贴图片

其实实现图片粘贴并不难, 之前已经加载了paste插件, 接下来只需要在初始化中插入配置项:

   paste_data_images: true, // 设置为“true”将允许粘贴图像,而将其设置为“false”将不允许粘贴图像。

但是我却花费了一个小时来搞这个, 因为我咋也粘贴不上, 所以不得不提一下这个坑:就因为我用的chrome开发, chrome浏览器直接在文件中复制粘贴图片是无法粘贴上的, 但是可以从微信输入框等地方粘贴上,也能拖入, 我暂时还没有进一步去做chrome浏览器粘贴的兼容,后续有时间回去做.

图片处理就告一段落~

关于预览

TinyMCE配置了预览插件preview, 前面在plugin.js中也加入了, 但是我们的需求是实现手机模式下的预览, 所以还需要设置一下预览内容的宽度以及高度

 plugin_preview_width: 375, // 预览宽度
 plugin_preview_height: 668,

设置完预览之后发现图片大于预览宽度, 出现了滚动,于是找到了一个content_style属性, 可以设置css样式,将样式注入到编辑器中, 在初始化中设置下面的属性:

  content_style: ` * { padding:0; margin:0; }	img {max-width:100% !important }`,

于是模拟手机端预览也完事了, 但内容提交后, 手机上查看图片仍然很大, 原因是我忽略了官方文档说的:这些样式不会与内容一起保存的

所以我在提交代码时将这个style字符串拼接到内容上

content += `<style>* { padding:0; margin:0; }	img {max-width:100% !important }</style>`

第三方编辑器内容拷贝

上面我也说到了第三方编辑器内容拷贝的需求, 要让内容拷贝过来排版不变, 并且图片内容要上传到我们自己服务器上。

1. 对于135编辑器

135编辑器支持拷贝的是html代码,通过直接粘贴在code中即可保持排版样式不变,对于图片地址处理思路如下:

  1. 为自己的服务器设置一个白名单,
  2. 将页面中非白名单内的图片链接地址传给后台,让后台去把这些图片放到自己服务器并返回给我新图片链接
  3. 然后我再更新对应的图片链接;

这里面主要涉及到:

  • 找到所有图片链接
  • 更新对应的图片链接

本来是打算使用正则来找到图片, 获得服务器返回的内容,再使用正则匹配替换, 后来发现TinyMCE提供了urlconverter_callback用于处理url替换, 它有四个参数:url,node,an_save,name,主要使用到的是要替换的url地址, 这个方法返回的是替换后的url地址;

我是这样做的:

urlconverter_callback: (url, node, on_save, name)=> {
	//设置白名单
      const assignUrl = ['http://192.168.1.49', 'https://lms0-1251107588']
      let isInnerUrl = false //默认不是内部链接
      try {
        assignUrl.forEach(item => {
          if (url.indexOf(item) > -1) {
            isInnerUrl = true
            throw new Error('EndIterate')
          }
        })
      } catch (e) {
        if (e.message != 'EndIterate') throw e
      }
      if (!isInnerUrl) {
        replaceUrl(url).then(result => {
          if (result.data.code == 0) {
            this.newImgUrl.push(result.data.data)
          }
        })
      }
      return url
    },

这一步只是实现了将白名单外的图片地址发给服务器,接收并保存返回的地址,大家可能会好奇为什么不在这里直接利用返回值替换图片地址呢?

由于这个函数没有没有提供回调函数,当异步从服务器取回新地址时,renturn回去的url是不等人的, 我试了使用await来解决,但是发现它不支持异步来处理,所有只好放弃,采用这种方式变向处理,让用户点击保存时再去匹配并替换内容。

if (!this.newImgUrl.length) return this.content
	// 匹配并替换 img中src图片路径
      this.content = this.content.replace(
        /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
        (mactch, capture) => {
          let current = ''
          this.newImgUrl.forEach(item => {
            if (capture == item.oriUrl) {
              current = item.filePath
            }
          })
          current = current ? current : capture
          return mactch.replace(
            /src=[\'\"]?([^\'\"]*)[\'\"]?/i,
            'src=' + current
          )
        }
      )
      // 匹配并替换 任意html元素中 url 路径
      this.content = this.content.replace(/url\(['"](.+)['"]\)/gi, (mactch, capture) => {
        let current = ''
        this.newImgUrl.forEach(item => {
          if (capture == item.oriUrl) {
            current = item.filePath
          }
        })
        current = current ? current : capture;
        return mactch.replace(/url\((['"])(.+)(['"])\)/i, `url($1${current}$3) `)
      })
      return content

最后再将替换完成后的内容发送给后台,这里对于TinyMce编辑器的使用就告一段落了,谢谢你的认真阅读,希望对你有所帮助,后期有新的功能添加或是新内容我会再更新的。

本文分享自微信公众号 - 程序员成长指北(coder_growth),作者:小小张

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【不可思议的CANVAS】画一只会跟着鼠标走的小狗

    这个例子来自于[CodePen],它是根据鼠标的位置设置两个眼球的transform: rotate属性做的效果。

    coder_koala
  • Webpack——从基础使用到手动实现(万字长文)

    这个其实不用多说了,如今的前端项目哪里还有用不到打包工具的呢,而webpack又作为打包工具中的王者我们又有什么理由不去搞明白它呢。

    coder_koala
  • 如何优雅的实现一个九宫格抽奖

    九宫格抽奖是在移动端常见开发功能点之一,那如何实现一个高度可复用的九宫格逻辑就显的特别重要了。接下来我们来分析下如何实现一个优雅的抽奖功能。

    coder_koala
  • 2019年一线大厂最全JVM面试100问!你能答对多少?

    JVM(Java虚拟机)简单来说就是运行Java代码的解释器,作为螺丝钉程序员JVM其实了解下就差不多啦,不懂JVM内部细节照样能写出优质的代码!但是一到造火箭...

    程序员追风
  • 巴西检方起诉Win10非法收集数据,微软恐面临287万美金罚款

    巴西联邦检察官星期三要求法院强制微软更改其Windows 10的默认安装过程,称其违反当地法律,未经“明确同意”收集用户数据。

    FB客服
  • 当我们在谈论内存时,我们在谈论什么

    内存,是程序员绕不过的一道坎。写过 C 和 C++ 的人想必都会对内存的手动分配和释放难以忘怀,在 Java 中,得益于 JVM 的自动垃圾回收( GC )机制...

    用户5397975
  • 关于ant-design表单问题

    杭州前端工程师
  • Java 内存模型及GC原理

    一个优秀Java程序员,必须了解Java内存模型、GC工作原理,以及如何优化GC的性能、与GC进行有限的交互,有一些应用程序对性能要求较高,例如嵌入式系统、实时...

    阳光岛主
  • 粗谈Java虚拟机之内存管理

    线程私有,生命周期与线程相同。虚拟机栈描述的是Java方法执行的内存模型:每个方法在执行时都会创建一个栈帧用于存储局部变量表、操作数栈、动态链接、方法出口等信息...

    g小志
  • 务实基础篇--Java内存模型及GC原理

    堆是Java代码可及的内存,留给开发人员使用的;非堆是JVM留给自己用的,包含方法区、JVM内部处理或优化所需的内存(如 JIT Compiler,Just-i...

    谭庆波

扫码关注云+社区

领取腾讯云代金券