首先簡單對比下常用的編輯器
| 名稱 | 說明 | 優(yōu)點 | 吐槽 |
|---|---|---|---|
| UEditor | 百度開源 | 插件多祝迂，滿足各種需求 | 已經(jīng)停止維護(hù)瞧哟，圖片只能上傳到本地服務(wù)器熄赡，加載較慢 |
| CKEditor | 老牌開源 | 功能強(qiáng)大详炬，使用較多又憨，可以看他們官網(wǎng)的例子翠霍，馬上就有感覺。 | 英文文檔 |
| wangEditor | 個人開源 | 輕量便捷蠢莺，基本滿足各種需求 | 基本滿足一般項目 |
| tinymce | 團(tuán)隊開源 | 支持圖片在線處理寒匙，插件多，功能強(qiáng) | 英文文檔 |
項目中自己使用的是tinymce躏将，以tinymce為例锄弱。
1.開始使用
一般我們用Vue使用編輯器為了能在全局使用，或者出現(xiàn)錯誤較少祸憋， 一般都會在
index.html中引入会宪，或者使用npm安裝相應(yīng)的包。其實我們可以使用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.完成舉例
以上例子我們可以更好的管理相關(guān)的第三方SDK,并且直接使用已開源并且不是單頁模式的js塞帐。
如： 使用百度，高德地圖巍沙，不想加載vue第三方相關(guān)的庫葵姥， 那么自己寫一個 loadXxxxxxSdkAsync.js 的文件就OK啦， 這樣超級方便自己的項目管理的句携。
