首先简单对比下常用的编辑器
| 名称 | 说明 | 优点 | 吐槽 |
|---|---|---|---|
| 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啦， 这样超级方便自己的项目管理的。
