Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南
更新時間：2024年08月30日 09:44:40 作者：洛可可白
WangEditor是一個開源的富文本編輯器,由阿里云開發(fā),它提供了一套簡潔易用的API和豐富的功能,如拖拽上傳圖片、插入表格、自定義表情等,適用于網(wǎng)頁和移動應用中的內(nèi)容編輯場景,本文介紹了Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南,需要的朋友可以參考下
效果圖
在Vue項目中使用wangeditor構(gòu)建富文本編輯器，您需要遵循以下步驟來集成和使用這個流行的編輯器：
步驟 1: 安裝 wangeditor
首先，您需要在Vue項目中安裝wangeditor?？梢酝ㄟ^npm來完成安裝：
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ù)據(jù)
在Vue組件的mounted生命周期鉤子中，創(chuàng)建wangeditor的實例，并將其綁定到指定的DOM元素上：
export default {
components: { Editor, Toolbar },
setup() {
// 編輯器實例，必須用 shallowRef，重要！
const editorRef = shallowRef();
// 內(nèi)容 HTML
const valueHtml = ref('<p>hello</p>');
// 模擬 ajax 異步獲取內(nèi)容
onMounted(() => {
setTimeout(() => {
valueHtml.value = '<p>模擬 Ajax 異步設置內(nèi)容</p>';
}, 1500);
});
const toolbarConfig = {};
const editorConfig = { placeholder: '請輸入內(nèi)容...' };
// 組件銷毀時，也及時銷毀編輯器，重要！
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 實例，重要！
};
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 粘貼事件對象', event);
// 自定義插入內(nèi)容
editor.insertText('xxx');
// 返回值（注意，vue 事件的返回值，不能用 return）
callback(false); // 返回 false ，阻止默認粘貼行為
// callback(true) // 返回 true ，繼續(xù)默認的粘貼行為
};
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組件的模板中，添加一個容器元素來承載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提供了多種配置選項，您可以根據(jù)需要進行配置。例如，設置編輯器的自定義菜單、上傳圖片的接口等：
// const editorConfig = { placeholder: '請輸入內(nèi)容...' };
// 初始化 MENU_CONF 屬性
const editorConfig = { // JS 語法
MENU_CONF: {},
placeholder: '請輸入內(nèi)容...'
// 其他屬性...
}
// 修改 uploadImage 菜單配置
editorConfig.MENU_CONF['uploadImage'] = {
server: '/api/upload-image',
fieldName: 'custom-field-name'
// 繼續(xù)寫其他配置...
//【注意】不需要修改的不用寫，wangEditor 會去 merge 當前其他配置
}
步驟 6: 獲取編輯器內(nèi)容（可選）
您可以通過editor.txt.html()方法獲取編輯器的HTML內(nèi)容，或者通過editor.txt.text()獲取純文本內(nèi)容：
const printHtml = () => {
const editor = editorRef.value;
if (editor == null) return;
console.log(editor.getHtml());
};
步驟 7: 清理資源
當組件銷毀時，確保釋放編輯器資源，避免內(nèi)存泄漏：
// 組件銷毀時，也及時銷毀編輯器，重要！
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() {
// 編輯器實例，必須用 shallowRef，重要！
const editorRef = shallowRef();
// 內(nèi)容 HTML
const valueHtml = ref('<p>hello</p>');
// 模擬 ajax 異步獲取內(nèi)容
onMounted(() => {
setTimeout(() => {
valueHtml.value = '<p>模擬 Ajax 異步設置內(nèi)容</p>';
}, 1500);
});
const toolbarConfig = {};
// const editorConfig = { placeholder: '請輸入內(nèi)容...' };
// 初始化 MENU_CONF 屬性
const editorConfig = { // JS 語法
MENU_CONF: {},
placeholder: '請輸入內(nèi)容...'
// 其他屬性...
}
// 修改 uploadImage 菜單配置
editorConfig.MENU_CONF['uploadImage'] = {
server: '/api/upload-image',
fieldName: 'custom-field-name'
// 繼續(xù)寫其他配置...
//【注意】不需要修改的不用寫，wangEditor 會去 merge 當前其他配置
}
// 組件銷毀時，也及時銷毀編輯器，重要！
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 實例，重要！
};
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 粘貼事件對象', event);
// 自定義插入內(nèi)容
editor.insertText('xxx');
// 返回值（注意，vue 事件的返回值，不能用 return）
callback(false); // 返回 false ，阻止默認粘貼行為
// callback(true) // 返回 true ，繼續(xù)默認的粘貼行為
};
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>
通過以上步驟，您可以在Vue項目中輕松地集成和使用wangeditor作為富文本編輯器。wangeditor提供了豐富的功能和良好的定制性，可以滿足大多數(shù)富文本編輯的需求。
到此這篇關(guān)于Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南的文章就介紹到這了,更多相關(guān)Vue wangeditor富文本編輯器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue+jsPlumb實現(xiàn)連線效果(支持滑動連線和點擊連線)
jsPlumb 是一個比較強大的繪圖組件，它提供了一種方法，主要用于連接網(wǎng)頁上的元素。本文將利用jsPlumb實現(xiàn)連線效果，同時支持滑動連線和點擊連線，感興趣的可以了解一下2023-01-01
Vue實現(xiàn)表格數(shù)據(jù)的增刪改查的示例代碼
Vue是一個用于構(gòu)建用戶界面的JavaScript框架,在Vue中可以通過使用Vue組件來實現(xiàn)對表格的增刪改查操作,下面將介紹一些基礎(chǔ)的Vue組件和技術(shù)來實現(xiàn)對表格的增刪改查操作,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue實現(xiàn)PC端分辨率適配操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue2.0 兄弟組件(平級)通訊的實現(xiàn)代碼，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
Vue中使用md5進行數(shù)據(jù)加密的實現(xiàn)方法
在現(xiàn)代Web開發(fā)中,數(shù)據(jù)安全是一個不可忽視的重要環(huán)節(jié),Vue.js作為一個流行的前端框架,不僅提供了強大的數(shù)據(jù)綁定和組件化功能,還支持與各種后端服務的集成,本文將探討如何在Vue應用中使用MD5算法來加密數(shù)據(jù),從而提升應用的安全性,需要的朋友可以參考下2024-10-10
本文主要介紹了ElementUI表格中添加表頭圖標懸浮提示，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了vue項目中使用scss的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了vant-List-@load事件一直觸發(fā)的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
在Vue3.5版本中,響應式Props的解構(gòu)功能正式轉(zhuǎn)正,該功能允許即使在解構(gòu)后也不丟失響應性,文通過編譯階段的處理,如何保持解構(gòu)后的props變量仍保持響應性,編譯過程中的defineProps宏函數(shù)處理,通過AST和上下文操作實現(xiàn)變量替換,從而讓解構(gòu)后的變量在運行時維持響應式狀態(tài)2024-09-09
這篇文章主要介紹了vue組件打包并發(fā)布到npm的全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01