Vue 骚气方法使用-编辑器

首先简单对比下常用的编辑器

名称	说明	优点	吐槽
UEditor	百度开源	插件多，满足各种需求	已经停止维护，图片只能上传到本地服务器，加载较慢
CKEditor	老牌开源	功能强大，使用较多，可以看他们官网的例子，马上就有感觉。	英文文档
wangEditor	个人开源	轻量便捷，基本满足各种需求	基本满足一般项目
tinymce	团队开源	支持图片在线处理，插件多，功能强	英文文档

项目中自己使用的是tinymce，以tinymce为例。

1.开始使用

一般我们用Vue使用编辑器为了能在全局使用，或者出现错误较少， 一般都会在index.html 中引入，或者使用 npm 安装相应的包。其实我们可以使用CDN来安装该类文件。（举一反三，其它的SDK也可以使用该种加载方式）

这里使用 七牛云CDN-http://staticfile.org/

2.编写加载文件

export const loadTinymceAsync = () => {
  return new Promise((resolve, reject) => {
    if (window.tinymce) {
      resolve(window.tinymce)
    } else {
      let tinymceScript = document.querySelector('#tinymceScript')
      if (tinymceScript) {
        tinymceScript.remove()
      }
      tinymceScript = document.createElement('script')
      tinymceScript.id = 'tinymceScript'
      tinymceScript.src = `//cdn.staticfile.org/tinymce/4.8.5/tinymce.min.js`
      document.body.appendChild(tinymceScript)
      tinymceScript.onload = () => {
        resolve(window.tinymce)
      }
    }
  })
}

3.编写Vue组件

<template>
  <div class="st-editor" v-loading="loading" style="min-height: 200px">
    <textarea :id="id" title="tinymce" ref="mce"></textarea>
  </div>
</template>

<script>
import { loadTinymceAsync } from '@/libraries/thirds'

export default {
  name: 'StEditor',
  props: {
    value: {
      type: String,
      required: true
    },
    height: {
      type: Number,
      default: 400
    }
  },
  data () {
    const id = `st-editor-${Date.now()}`
    return {
      id,
      loading: true
    }
  },
  async mounted () {
    this.loading = true
    await loadTinymceAsync()
    const Tinymce = window.tinymce
    Tinymce.addI18n('zh-CN', tinymceI18n_zhCN)
    await Tinymce.init({
      selector: `#${this.id}`,
      init_instance_callback: editor => {
        if (this.value) editor.setContent(this.value)
        editor.on('NodeChange Change KeyUp', () => {
          this.$emit('input', editor.getContent({ format: 'raw' }));
        });
      },
      height: this.height
    })
    this.loading = false
  },
  async beforeDestroy () {
    const Tinymce = window.tinymce
    Tinymce.get(this.id).remove()
  }
}
</script>

4.完成举例

以上例子我们可以更好的管理相关的第三方SDK,并且直接使用已开源并且不是单页模式的js。
如： 使用百度，高德地图，不想加载vue第三方相关的库， 那么自己写一个 loadXxxxxxSdkAsync.js 的文件就OK啦， 这样超级方便自己的项目管理的。