Vue3中使用富文本編輯器的示例詳解

更新時間：2024年04月09日 10:46:24 作者：rookiefishs

有不少的前端需求都需要使用到富文本編輯器,所以這篇文章主要來和大家介紹一下如何在Vue3項目中使用富文本編輯器,感興趣的可以了解下

1. 前言

有不少的前端需求都需要使用到富文本編輯器,但是富文本編輯器百花齊放,每次使用可能都會重新找一個編輯器,所以有了這篇文章. 當項目中需要使用到富文本編輯器時,可以直接按照這篇文章的步驟進行,不出意外的話應該可以滿足你的絕大多數(shù)需求

2. 項目初始化

以下實例為Vue3項目,可直接集成到你的項目中,所以這里的項目初始化就不做詳細步驟指引,需要Vue3項目搭建步驟的可以看我前幾篇文章,里面都有

3. 下載富文本編輯器依賴

富文本編輯器下載

// 這里使用的是wangEditor富文本編輯器
npm install @wangeditor/editor @wangeditor/editor-for-vue
// 或
yane add @wangeditor/editor @wangeditor/editor-for-vue

4. 使用富文本編輯器

<!--
 * @Author: wangzhiyu <w19165802736@163.com>
 * @version: 1.0.0
 * @Date: 2024-04-7 11:04:25
 * @LastEditTime: 2024-04-08 21:44:20
 * @Descripttion: 富文本編輯器組件
-->
<template>
  <div style="border: 1px solid #ccc; width: 50%; margin: 100px auto">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
    <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" @customPaste="customPaste" />
  </div>
  <el-button style="margin: 0 auto" @click="getEditorHTML">獲取富文本HTML內(nèi)容</el-button>
</template>
<script setup>
// 富文本編輯器文檔鏈接: https://www.wangeditor.com/v5/getting-started.html
// 引入富文本編輯器CSS
import '@wangeditor/editor/dist/css/style.css';
import { onBeforeUnmount, ref, shallowRef } from 'vue';
// 導入富文本編輯器的組件
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

// 編輯器實例，必須用 shallowRef
const editorRef = shallowRef();

// 內(nèi)容 HTML
const valueHtml = ref('<p>hello <strong>hello world</strong></p>');
const toolbarConfig = {};
const editorConfig = ref({ placeholder: '請輸入內(nèi)容...', MENU_CONF: {} });

// 自定義圖片上傳
editorConfig.value.MENU_CONF['uploadImage'] = {
  async customUpload(file, insertFn) {
    console.log('上傳圖片', file);
    // 將上傳的file圖片轉(zhuǎn)換為base64
    const base64 = URL.createObjectURL(file);

    // 這里的file為上傳的圖片對象,insertFn傳入
    insertFn(base64, 'img');
  },
};

// 自定義視頻上傳
editorConfig.value.MENU_CONF['uploadVideo'] = {
  async customUpload(file, insertFn) {
    console.log('上傳視頻', file);
  },
};

// 富文本編輯器生成后觸發(fā)
const handleCreated = editor => {
  editorRef.value = editor; // 記錄 editor 實例，重要！
  console.log(editorConfig.value.MENU_CONF, 'editorConfig.value');
};

// 監(jiān)聽富文本編輯器粘貼行為
const customPaste = (editor, event, callback) => {
  // 獲取粘貼的純文本
  const text = event.clipboardData.getData('text/plain');
  if (text) {
    editor.insertText(text);
    event.preventDefault();
    callback(false);
  }
};

// 獲取富文本html內(nèi)容
const getEditorHTML = () => {
  console.log(editorRef.value.getHtml());
};

// 組件銷毀時，也及時銷毀編輯器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script>

5. 注意點

注意在富文本編輯器中粘貼圖片或者上傳圖片時,會自動觸發(fā)editorConfig.value.MENU_CONF['uploadImage']回調(diào)函數(shù),需要在這個回調(diào)函數(shù)中處理文件上傳,然后再調(diào)用inserFn函數(shù)將url加載到富文本編輯器中

注意在組件銷毀的同時銷毀富文本編輯器

富文本編輯器的實例必須為shallowRef