首先簡單對比下常用的編輯器
| 名稱 | 說明 | 優(yōu)點 | 吐槽 |
|---|---|---|---|
| UEditor | 百度開源 | 插件多，滿足各種需求 | 已經停止維護，圖片只能上傳到本地服務器，加載較慢 |
| CKEditor | 老牌開源 | 功能強大，使用較多，可以看他們官網(wǎng)的例子，馬上就有感覺。 | 英文文檔 |
| wangEditor | 個人開源 | 輕量便捷，基本滿足各種需求 | 基本滿足一般項目 |
| tinymce | 團隊開源 | 支持圖片在線處理，插件多，功能強 | 英文文檔 |
項目中自己使用的是tinymce，以tinymce為例。
1.開始使用
一般我們用Vue使用編輯器為了能在全局使用，或者出現(xiàn)錯誤較少， 一般都會在
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啦， 這樣超級方便自己的項目管理的。
