Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南

更新時(shí)間：2024年08月30日 09:44:40 作者：洛可可白

WangEditor是一個(gè)開源的富文本編輯器,由阿里云開發(fā),它提供了一套簡(jiǎn)潔易用的API和豐富的功能,如拖拽上傳圖片、插入表格、自定義表情等,適用于網(wǎng)頁(yè)和移動(dòng)應(yīng)用中的內(nèi)容編輯場(chǎng)景,本文介紹了Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南,需要的朋友可以參考下

效果圖
步驟 1: 安裝 wangeditor
步驟 2: 引入 wangeditor 到您的組件
步驟 3: 創(chuàng)建編輯器實(shí)例和響應(yīng)式數(shù)據(jù)
步驟 4: 在模板中添加編輯器容器
步驟 5: 配置 wangeditor（可選）
步驟 6: 獲取編輯器內(nèi)容（可選）
步驟 7: 清理資源
全部代碼

效果圖

wangeditor 官網(wǎng)指南

在Vue項(xiàng)目中使用wangeditor構(gòu)建富文本編輯器，您需要遵循以下步驟來集成和使用這個(gè)流行的編輯器：

步驟 1: 安裝 wangeditor

首先，您需要在Vue項(xiàng)目中安裝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í)例和響應(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è)容器元素來承載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ù)寫其他配置...

      //【注意】不需要修改的不用寫，wangEditor 會(huì)去 merge 當(dāng)前其他配置
    }

步驟 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: 清理資源

當(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ù)寫其他配置...

      //【注意】不需要修改的不用寫，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>

通過以上步驟，您可以在Vue項(xiàng)目中輕松地集成和使用wangeditor作為富文本編輯器。wangeditor提供了豐富的功能和良好的定制性，可以滿足大多數(shù)富文本編輯的需求。

到此這篇關(guān)于Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南的文章就介紹到這了,更多相關(guān)Vue wangeditor富文本編輯器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: