Vue組件封裝:基於Vue3+wangeditor富文本組件二次封裝

来源:https://www.cnblogs.com/bk-ajiang/p/18103999
-Advertisement-
Play Games

1.簡介 開源 Web 富文本編輯器,開箱即用,配置簡單。一個產品的價值,就在於解決用戶的問題,提高效率、降低成本、增加穩定性和擴展性。wangEditor 不是為了做而做,也不是單純的模仿誰,而是經過上述問題分析之後,給出一個系統的解決方案。旨在真正去解決用戶的問題,產出自己的價值。更多資料見官網 ...


1.簡介

        開源 Web 富文本編輯器,開箱即用,配置簡單。一個產品的價值,就在於解決用戶的問題,提高效率、降低成本、增加穩定性和擴展性。wangEditor 不是為了做而做,也不是單純的模仿誰,而是經過上述問題分析之後,給出一個系統的解決方案。旨在真正去解決用戶的問題,產出自己的價值。更多資料見官網地址:https://www.wangeditor.com/。

2.安裝

安裝 editor

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

 安裝 React 組件(可選)

yarn add @wangeditor/editor-for-react
# 或者 npm install @wangeditor/editor-for-react --save

 安裝 Vue2 組件(可選)

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

 安裝 Vue3 組件(可選)

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

 CDN

<!-- 引入 css -->
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">

<!-- 引入 js -->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
    var E = window.wangEditor; // 全局變數
</script>

 3.封裝代碼

 ./index.vue

 1 <template>
 2   <div class="v-rich-text">
 3     <div v-if="isSplitTool" :id="toolId" class="toolbar-container"></div>
 4     <div v-if="isSplitTool" :id="textId" class="text-container"></div>
 5     <div v-if="!isSplitTool" :id="textId"></div>
 6   </div>
 7 </template>
 8 
 9 <script lang="ts">
10 import { onMounted, onBeforeUnmount, ref, toRefs, watch } from "vue";
11 import WangEditor from "wangeditor";
12 import { basicProps } from "./props";
13 
14 export default {
15   name: "VRichText",
16   props: basicProps,
17   emits: ["change", "update:content"],
18   setup(props, { emit }) {
19     const { toolId, textId, content, isSplitTool } = toRefs(props);
20     let instance: any;
21     const textContent = ref(content.value);
22 
23     watch(
24       () => props.content,
25       (nv) => {
26         if (nv !== instance.txt.html()) {
27           instance.txt.html(nv);
28           textContent.value = nv;
29         }
30       }
31     );
32 
33     onMounted(() => {
34       if (isSplitTool.value) {
35         instance = new WangEditor("#" + toolId.value, "#" + textId.value);
36       } else {
37         instance = new WangEditor("#" + textId.value);
38       }
39       Object.assign(instance.config, {
40         uploadImgShowBase64: true,
41         showFullScreen: false,
42         zIndex: 100,
43         focus: false,
44         onchange() {
45           emit("update:content", instance.txt.html());
46           emit("change", instance.txt.html());
47         },
48 
49     onBeforeUnmount(() => {
50       instance.destroy();
51       instance = null;
52     });
53 
54     return {
55       toolId,
56       textId,
57       textContent,
58       isSplitTool,
59     };
60   },
61 };
62 </script>
63 
64 <style lang="scss" scoped>
65 .v-rich-text {
66   height: 100%;
67   display: flex;
68   flex-direction: column;
69 
70   .text-container {
71     flex: 1;
72     height: 0;
73   }
74 }
75 </style>
76 

  ./props.ts

 1 export const basicProps = {
 2   // 工具欄ID
 3   toolId: {
 4     type: String,
 5     default: "toolbar-container",
 6   },
 7   // 內容ID
 8   textId: {
 9     type: String,
10     default: "text-container",
11   },
12   // 富文本內容
13   content: String,
14   // 是否拆分tool欄
15   isSplitTool: {
16     type: Boolean,
17     default: true,
18   },
19 };

 

 4.組件展示

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、List 1.概述 列表是一種非常有用且功能強大的容器,它常用於呈現同類型或多類型數據集合,例如圖片、文本、音樂、通訊錄、購物清單等。列表對於顯示大量內容而不耗費過多空間和記憶體是非常有幫助的,因為當列表項數量超過屏幕大小時,可以自動提供滾動功能。這使得列表成為構建結構化、可滾動信息的理想 ...
  • 前端技術棧+Vue筆記 ES6新特性 1.let 1)let聲明有嚴格的局部作用域 ​ 此時"console.log("job= "+job)"將報錯 { var name = "zy學習"; let job = "java工程師"; console.log("name= "+name) conso ...
  • 預覽 打字機動畫是一種常見的網頁效果,通常用於“我是某某”這樣的場景,比如個人簡介或者產品介紹,需要在多個辭彙之間切換。這篇博文將從頭開始製作類似的效果。它看起來像這樣: 我要成為賽馬娘 高手! 如果這裡的黃字不會動,可能是因為這裡的架構不支持,請到https://penghy.com/?p=typ ...
  • 快速入門 1. 創建第一個應用 由於該庫還不支持 src 引入,接下來的例子我將在 webpack 環境下演示,webpack 模板 已經配置完畢,可直接下載使用 創建一個應用可用通過 new 來創建實例或通過提供的 createApp 方法來創建下麵我將分別演示 通過 new 來創建 App , ...
  • 遍歷是指通過或遍歷節點樹 遍歷節點樹 通常,您想要迴圈一個 XML 文檔,例如:當您想要提取每個元素的值時。 這被稱為"遍歷節點樹"。 下麵的示例迴圈遍歷所有 <book> 的子節點,並顯示它們的名稱和值: <!DOCTYPE html> <html> <body> <p id="demo"></p ...
  • 一、是什麼 HTTP頭欄位(HTTP header fields),是指在超文本傳輸協議(HTTP)的請求和響應消息中的消息頭部分 它們定義了一個超文本傳輸協議事務中的操作參數 HTTP頭部欄位可以自己根據需要定義,因此可能在 Web伺服器和瀏覽器上發現非標準的頭欄位 下麵是一個HTTP請求的請求頭 ...
  • DOM(文檔對象模型)定義了一種訪問和操作文檔的標準。它是一個平臺和語言無關的介面,允許程式和腳本動態訪問和更新文檔的內容、結構和樣式。HTML DOM用於操作HTML文檔,而XML DOM用於操作XML文檔。 HTML DOM示例 通過ID獲取並修改HTML元素的值: <!DOCTYPE html ...
  • 一、是什麼 HTTP狀態碼(英語:HTTP Status Code),用以表示網頁伺服器超文本傳輸協議響應狀態的3位數字代碼 它由 RFC 2616規範定義的,並得到 RFC 2518、RFC 2817、RFC 2295、RFC 2774與 RFC 4918等規範擴展 簡單來講,http狀態碼的作用 ...
一周排行
    -Advertisement-
    Play Games
  • 隨著Aspire發佈preview5的發佈,Microsoft.Extensions.ServiceDiscovery隨之更新, 服務註冊發現這個屬於老掉牙的話題解決什麼問題就不贅述了,這裡主要講講Microsoft.Extensions.ServiceDiscovery(preview5)以及如何 ...
  • 概述:通過使用`SemaphoreSlim`,可以簡單而有效地限制非同步HTTP請求的併發量,確保在任何給定時間內不超過20個網頁同時下載。`ParallelOptions`不適用於非同步操作,但可考慮使用`Parallel.ForEach`,儘管在非同步場景中謹慎使用。 對於併發非同步 I/O 操作的數量 ...
  • 1.Linux上安裝Docken 伺服器系統版本以及內核版本:cat /etc/redhat-release 查看伺服器內核版本:uname -r 安裝依賴包:yum install -y yum-utils device-mapper-persistent-data lvm2 設置阿裡雲鏡像源:y ...
  • 概述:WPF界面綁定和渲染大量數據可能導致性能問題。通過啟用UI虛擬化、非同步載入和數據分頁,可以有效提高界面響應性能。以下是簡單示例演示這些優化方法。 在WPF中,當你嘗試綁定和渲染大量的數據項時,性能問題可能出現。以下是一些可能導致性能慢的原因以及優化方法: UI 虛擬化: WPF提供了虛擬化技術 ...
  • 引言 上一章節介紹了 TDD 的三大法則,今天我們講一下在單元測試中模擬對象的使用。 Fake Fake - Fake 是一個通用術語,可用於描述 stub或 mock 對象。 它是 stub 還是 mock 取決於使用它的上下文。 也就是說,Fake 可以是 stub 或 mock Mock - ...
  • 為.net6在CentOS7上面做準備,先在vmware虛擬機安裝CentOS 7.9 新建CentOS764位的系統 因為CentOS8不更新了,所以安裝7;簡單就一筆帶過了 選擇下載好的操作系統的iso文件,下載地址https://mirrors.aliyun.com/centos/7.9.20 ...
  • 經過前面幾篇的學習,我們瞭解到指令的大概分類,如:參數載入指令,該載入指令以 Ld 開頭,將參數載入到棧中,以便於後續執行操作命令。參數存儲指令,其指令以 St 開頭,將棧中的數據,存儲到指定的變數中,以方便後續使用。創建實例指令,其指令以 New 開頭,用於在運行時動態生成並初始化對象。方法調用指... ...
  • LiteDB 是一個輕量級的嵌入式 NoSQL 資料庫,其設計理念與 MongoDB 類似,但它是完全使用 C# 開發的,因此與 C# 應用程式的集成非常順暢。與 SQLite 相比,LiteDB 提供了 NoSQL(即鍵值對)的數據存儲方式,並且是一個開源且免費的項目。它適用於桌面、移動以及 We ...
  • 1 開源解析和拆分文檔 第三方的工具去對文件解析拆分,去將我們的文件內容給提取出來,並將我們的文檔內容去拆分成一個小的chunk。常見的PDF word mark down, JSON、HTML。都可以有很好的一些模塊去把這些文件去進行一個東西去提取。 優勢 支持豐富的文檔類型 每種文檔多樣化選擇 ...
  • OOM是什麼?英文全稱為 OutOfMemoryError(記憶體溢出錯誤)。當程式發生OOM時,如何去定位導致異常的代碼還是挺麻煩的。 要檢查OOM發生的原因,首先需要瞭解各種OOM情況下會報的異常信息。這樣能縮小排查範圍,再結合異常堆棧、heapDump文件、JVM分析工具和業務代碼來判斷具體是哪 ...