Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南
更新時(shí)間：2024年08月30日 09:44:40 作者：洛可可白
WangEditor是一個(gè)開(kāi)源的富文本編輯器,由阿里云開(kāi)發(fā),它提供了一套簡(jiǎn)潔易用的API和豐富的功能,如拖拽上傳圖片、插入表格、自定義表情等,適用于網(wǎng)頁(yè)和移動(dòng)應(yīng)用中的內(nèi)容編輯場(chǎng)景,本文介紹了Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南,需要的朋友可以參考下
效果圖
在Vue項(xiàng)目中使用wangeditor構(gòu)建富文本編輯器，您需要遵循以下步驟來(lái)集成和使用這個(gè)流行的編輯器：
步驟 1: 安裝 wangeditor
首先，您需要在Vue項(xiàng)目中安裝wangeditor?？梢酝ㄟ^(guò)npm來(lái)完成安裝：
yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save yarn add @wangeditor/editor-for-vue@next # 或者 npm install @wangeditor/editor-for-vue@next --save
步驟 2: 引入 wangeditor 到您的組件
在您希望使用富文本編輯器的Vue組件中，引入wangeditor：
import '@wangeditor/editor/dist/css/style.css';// 引入編輯器的CSS樣式
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
步驟 3: 創(chuàng)建編輯器實(shí)例和響應(yīng)式數(shù)據(jù)
在Vue組件的mounted生命周期鉤子中，創(chuàng)建wangeditor的實(shí)例，并將其綁定到指定的DOM元素上：
export default {
components: { Editor, Toolbar },
setup() {
// 編輯器實(shí)例，必須用 shallowRef，重要！
const editorRef = shallowRef();
// 內(nèi)容 HTML
const valueHtml = ref('<p>hello</p>');
// 模擬 ajax 異步獲取內(nèi)容
onMounted(() => {
setTimeout(() => {
valueHtml.value = '<p>模擬 Ajax 異步設(shè)置內(nèi)容</p>';
}, 1500);
});
const toolbarConfig = {};
const editorConfig = { placeholder: '請(qǐng)輸入內(nèi)容...' };
// 組件銷毀時(shí)，也及時(shí)銷毀編輯器，重要！
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
// 編輯器回調(diào)函數(shù)
const handleCreated = (editor) => {
console.log('created', editor);
editorRef.value = editor; // 記錄 editor 實(shí)例，重要！
};
const handleChange = (editor) => {
console.log('change:', editor.getHtml());
};
const handleDestroyed = (editor) => {
console.log('destroyed', editor);
};
const handleFocus = (editor) => {
console.log('focus', editor);
};
const handleBlur = (editor) => {
console.log('blur', editor);
};
const customAlert = (info, type) => {
alert(`【自定義提示】${type} - ${info}`);
};
const customPaste = (editor, event, callback) => {
console.log('ClipboardEvent 粘貼事件對(duì)象', event);
// 自定義插入內(nèi)容
editor.insertText('xxx');
// 返回值（注意，vue 事件的返回值，不能用 return）
callback(false); // 返回 false ，阻止默認(rèn)粘貼行為
// callback(true) // 返回 true ，繼續(xù)默認(rèn)的粘貼行為
};
const insertText = () => {
const editor = editorRef.value;
if (editor == null) return;
editor.insertText('hello world');
};
const printHtml = () => {
const editor = editorRef.value;
if (editor == null) return;
console.log(editor.getHtml());
};
const disable = () => {
const editor = editorRef.value;
if (editor == null) return;
editor.disable()
};
return {
editorRef,
mode: 'default',
valueHtml,
toolbarConfig,
editorConfig,
handleCreated,
handleChange,
handleDestroyed,
handleFocus,
handleBlur,
customAlert,
customPaste,
insertText,
printHtml,
disable
};
},
};
步驟 4: 在模板中添加編輯器容器
在Vue組件的模板中，添加一個(gè)容器元素來(lái)承載wangeditor：
<div style="border: 1px solid #ccc; margin-top: 10px">
<Toolbar
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
style="border-bottom: 1px solid #ccc"
/>
<Editor
:defaultConfig="editorConfig"
:mode="mode"
v-model="valueHtml"
style="height: 400px; overflow-y: hidden"
@onCreated="handleCreated"
@onChange="handleChange"
@onDestroyed="handleDestroyed"
@onFocus="handleFocus"
@onBlur="handleBlur"
@customAlert="customAlert"
@customPaste="customPaste"
/>
</div>
步驟 5: 配置 wangeditor（可選）
wangeditor提供了多種配置選項(xiàng)，您可以根據(jù)需要進(jìn)行配置。例如，設(shè)置編輯器的自定義菜單、上傳圖片的接口等：
// const editorConfig = { placeholder: '請(qǐng)輸入內(nèi)容...' };
// 初始化 MENU_CONF 屬性
const editorConfig = { // JS 語(yǔ)法
MENU_CONF: {},
placeholder: '請(qǐng)輸入內(nèi)容...'
// 其他屬性...
}
// 修改 uploadImage 菜單配置
editorConfig.MENU_CONF['uploadImage'] = {
server: '/api/upload-image',
fieldName: 'custom-field-name'
// 繼續(xù)寫(xiě)其他配置...
//【注意】不需要修改的不用寫(xiě)，wangEditor 會(huì)去 merge 當(dāng)前其他配置
}
步驟 6: 獲取編輯器內(nèi)容（可選）
您可以通過(guò)editor.txt.html()方法獲取編輯器的HTML內(nèi)容，或者通過(guò)editor.txt.text()獲取純文本內(nèi)容：
const printHtml = () => {
const editor = editorRef.value;
if (editor == null) return;
console.log(editor.getHtml());
};
步驟 7: 清理資源
當(dāng)組件銷毀時(shí)，確保釋放編輯器資源，避免內(nèi)存泄漏：
// 組件銷毀時(shí)，也及時(shí)銷毀編輯器，重要！
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
全部代碼
<template>
<div>
<div>
<button @click="insertText">insert text</button>
<button @click="printHtml">print html</button>
<button @click="disable">disable</button>
</div>
<div style="border: 1px solid #ccc; margin-top: 10px">
<Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" style="border-bottom: 1px solid #ccc" />
<Editor :defaultConfig="editorConfig" :mode="mode" v-model="valueHtml" style="height: 400px; overflow-y: hidden"
@onCreated="handleCreated" @onChange="handleChange" @onDestroyed="handleDestroyed" @onFocus="handleFocus"
@onBlur="handleBlur" @customAlert="customAlert" @customPaste="customPaste" />
</div>
<div style="margin-top: 10px">
<textarea v-model="valueHtml" readonly style="width: 100%; height: 200px; outline: none"></textarea>
</div>
</div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css';
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
export default {
components: { Editor, Toolbar },
setup() {
// 編輯器實(shí)例，必須用 shallowRef，重要！
const editorRef = shallowRef();
// 內(nèi)容 HTML
const valueHtml = ref('<p>hello</p>');
// 模擬 ajax 異步獲取內(nèi)容
onMounted(() => {
setTimeout(() => {
valueHtml.value = '<p>模擬 Ajax 異步設(shè)置內(nèi)容</p>';
}, 1500);
});
const toolbarConfig = {};
// const editorConfig = { placeholder: '請(qǐng)輸入內(nèi)容...' };
// 初始化 MENU_CONF 屬性
const editorConfig = { // JS 語(yǔ)法
MENU_CONF: {},
placeholder: '請(qǐng)輸入內(nèi)容...'
// 其他屬性...
}
// 修改 uploadImage 菜單配置
editorConfig.MENU_CONF['uploadImage'] = {
server: '/api/upload-image',
fieldName: 'custom-field-name'
// 繼續(xù)寫(xiě)其他配置...
//【注意】不需要修改的不用寫(xiě)，wangEditor 會(huì)去 merge 當(dāng)前其他配置
}
// 組件銷毀時(shí)，也及時(shí)銷毀編輯器，重要！
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
// 編輯器回調(diào)函數(shù)
const handleCreated = (editor) => {
console.log('created', editor);
editorRef.value = editor; // 記錄 editor 實(shí)例，重要！
};
const handleChange = (editor) => {
console.log('change:', editor.getHtml());
};
const handleDestroyed = (editor) => {
console.log('destroyed', editor);
};
const handleFocus = (editor) => {
console.log('focus', editor);
};
const handleBlur = (editor) => {
console.log('blur', editor);
};
const customAlert = (info, type) => {
alert(`【自定義提示】${type} - ${info}`);
};
const customPaste = (editor, event, callback) => {
console.log('ClipboardEvent 粘貼事件對(duì)象', event);
// 自定義插入內(nèi)容
editor.insertText('xxx');
// 返回值（注意，vue 事件的返回值，不能用 return）
callback(false); // 返回 false ，阻止默認(rèn)粘貼行為
// callback(true) // 返回 true ，繼續(xù)默認(rèn)的粘貼行為
};
const insertText = () => {
const editor = editorRef.value;
if (editor == null) return;
editor.insertText('hello world');
};
const printHtml = () => {
const editor = editorRef.value;
if (editor == null) return;
console.log(editor.getHtml());
};
const disable = () => {
const editor = editorRef.value;
if (editor == null) return;
editor.disable()
};
return {
editorRef,
mode: 'default',
valueHtml,
toolbarConfig,
editorConfig,
handleCreated,
handleChange,
handleDestroyed,
handleFocus,
handleBlur,
customAlert,
customPaste,
insertText,
printHtml,
disable
};
},
};
</script>
通過(guò)以上步驟，您可以在Vue項(xiàng)目中輕松地集成和使用wangeditor作為富文本編輯器。wangeditor提供了豐富的功能和良好的定制性，可以滿足大多數(shù)富文本編輯的需求。
到此這篇關(guān)于Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南的文章就介紹到這了,更多相關(guān)Vue wangeditor富文本編輯器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章給大家介紹了vue封裝公共方法的實(shí)現(xiàn),文章中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
vue組件定義，全局、局部組件，配合模板及動(dòng)態(tài)組件功能示例
這篇文章主要介紹了vue組件定義，全局、局部組件，配合模板及動(dòng)態(tài)組件功能,結(jié)合實(shí)例形式分析了vue.js中組件的定義、全局組件、局部組件、配合模板組件及動(dòng)態(tài)組件的相關(guān)使用方法與操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
vue3實(shí)現(xiàn)抽獎(jiǎng)模板設(shè)置
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)抽獎(jiǎng)模板設(shè)置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue-element的select下拉框賦值實(shí)例
這篇文章主要介紹了vue-element的select下拉框賦值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue腳手架創(chuàng)建項(xiàng)目時(shí)報(bào)catch錯(cuò)誤及解決
這篇文章主要介紹了vue腳手架創(chuàng)建項(xiàng)目時(shí)報(bào)catch錯(cuò)誤及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue緩存之keep-alive的理解和應(yīng)用詳解
這篇文章主要介紹了vue緩存之keep-alive的理解和應(yīng)用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Vue?element實(shí)現(xiàn)權(quán)限管理業(yè)務(wù)流程詳解
目前本人再使用vue-element-admin項(xiàng)目時(shí)都是通過(guò)直接刪除一些用不上的路由來(lái)進(jìn)行側(cè)邊欄的清除，但是其實(shí)有一個(gè)更加好的辦法來(lái)對(duì)項(xiàng)目的側(cè)邊欄顯示的內(nèi)用進(jìn)行管理，就是權(quán)限管理，其實(shí)也不知道這個(gè)方法好不好，原理上來(lái)說(shuō)時(shí)跟直接刪除該路由的方式時(shí)一樣的2022-08-08
這篇文章主要介紹了vue中的$root和$parent ，本文通過(guò)文字實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue3錨點(diǎn)定位兩種實(shí)現(xiàn)方式示例
這篇文章主要給大家介紹了關(guān)于vue3錨點(diǎn)定位兩種實(shí)現(xiàn)的相關(guān)資料,說(shuō)到錨點(diǎn)定位,很多人第一時(shí)間會(huì)想到 a標(biāo)簽,但是a標(biāo)簽實(shí)現(xiàn)的錨點(diǎn)定位并不是那么的完美,需要的朋友可以參考下2023-07-07
Vue多請(qǐng)求并行處理的實(shí)戰(zhàn)指南
在Vue中同時(shí)發(fā)送多個(gè)請(qǐng)求主要通過(guò)并行處理機(jī)制實(shí)現(xiàn),常用方法包括 Promise.all,axios.all和 async/await,下面小編就來(lái)和大家詳細(xì)介紹一下詳細(xì)操作吧2025-08-08