AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置：首頁 > 科技  > 軟件

Vue3問題：如何使用WangEditor富文本？能自定義才是真的會用！

來源： 責編： 時間：2023-12-01 17:14:34 280觀看
導讀一、需求分析，問題描述1、需求使用富文本進行內容編輯，要求自定義工具欄菜單順序及其分組，并且要求自定義選擇圖片、自定義選擇視頻。2、問題如何配置開始使用？如何自定義工具欄菜單的展示？如何自定義工具欄內置菜單的功能

26D28資訊網——每日最新資訊28at.com

一、需求分析，問題描述

1、需求

使用富文本進行內容編輯，要求自定義工具欄菜單順序及其分組，并且要求自定義選擇圖片、自定義選擇視頻。26D28資訊網——每日最新資訊28at.com

26D28資訊網——每日最新資訊28at.com

2、問題

  • 如何配置開始使用？
  • 如何自定義工具欄菜單的展示？
  • 如何自定義工具欄內置菜單的功能？
  • 如何自定義擴展新功能菜單？

二、解決問題，答案速覽

實現代碼如下，復制粘貼即可直接使用。26D28資訊網——每日最新資訊28at.com

如果你有時間，具體問題梳理、代碼分析、知識總結，可見第三部分。26D28資訊網——每日最新資訊28at.com

1、配置開始使用

（1）下載依賴

npm i @wangeditor/editor @wangeditor/editor-for-vue

（2）引入css和內置組件

// 引入 cssimport '@wangeditor/editor/dist/css/style.css' // 引入 組件import { Editor, Toolbar } from '@wangeditor/editor-for-vue'// 引入 接口類型import { IDomEditor, IEditorConfig } from "@wangeditor/editor";

（3）使用

<template><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="valueHtml":defaultConfig="editorConfig":mode="mode"@onCreated="handleCreated"/></div></template><script lang="ts" setup>import "@wangeditor/editor/dist/css/style.css";import { Editor, Toolbar } from "@wangeditor/editor-for-vue";import { IDomEditor, IEditorConfig } from "@wangeditor/editor";import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'// 編輯器實例，必須用 shallowRefconst editorRef = shallowRef()// 內容 HTMLconst valueHtml = ref('<p>hello</p>')// 模擬 ajax 異步獲取內容onMounted(() => {setTimeout(() => {valueHtml.value = '<p>模擬 Ajax 異步設置內容</p>'}, 1500)})// 工具欄配置const toolbarConfig = {toolbarKeys: []}// 編輯器配置const editorConfig = { placeholder: '請輸入內容...',MENU_CONF: {}}// 組件銷毀時，也及時銷毀編輯器onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()})// 組件創建時const handleCreated = (editor) => {editorRef.value = editor // 記錄 editor 實例，重要！}</script>

2、自定義工具欄菜單的展示

工具欄菜單的展示，如菜單的順序和分組、添加刪除。26D28資訊網——每日最新資訊28at.com

如果想要自定義，只需修改工具欄配置對象的toolbarKeys屬性。toolbarKeys屬性值是一個數組，內部填寫菜單的key，使用官方API接口editor.getAllMenuKeys()可查詢全部內置菜單的key。26D28資訊網——每日最新資訊28at.com

// 工具欄配置const toolbarConfig = {toolbarKeys: [// 一些常用的菜單 key'bold', // 加粗'italic', // 斜體'through', // 刪除線'underline', // 下劃線'bulletedList', // 無序列表'numberedList', // 有序列表'color', // 文字顏色'insertLink', // 插入鏈接'fontSize', // 字體大小'lineHeight', // 行高'uploadImage', // 上傳圖片'uploadVideo',//上傳視頻'delIndent', // 縮進'indent', // 增進'deleteImage',//刪除圖片'divider', // 分割線'insertTable', // 插入表格'justifyCenter', // 居中對齊'justifyJustify', // 兩端對齊'justifyLeft', // 左對齊'justifyRight', // 右對齊'undo', // 撤銷'redo', // 重做'clearStyle', // 清除格式'fullScreen' // 全屏]}

3、自定義工具欄內置菜單的功能

工具欄菜單的功能，如鏈接、上傳圖片、上傳視頻。26D28資訊網——每日最新資訊28at.com

如果想要自定義，只需修改編輯器配置對象的MENU_CONF屬性。不同的功能都對應著不同的MENU_CONF屬性值，這里我以問題提出者的問題為示例，具體請參考官方文檔，寫的非常不錯的，放下面吧。26D28資訊網——每日最新資訊28at.com

26D28資訊網——每日最新資訊28at.com

https://www.wangeditor.com/v5/menu-config.html.26D28資訊網——每日最新資訊28at.com

// 編輯器配置const editorConfig = { placeholder: '請輸入內容...',MENU_CONF: {// 上傳圖片uploadImage: {// 自定義選擇圖片async customBrowseAndUpload(insertFn: InsertFnType) {// 打開圖片素材庫photoGalleryDialogVisible.value = true},},// 上傳視頻uploadVideo: {// 自定義選擇視頻async customBrowseAndUpload(insertFn: InsertFnType) {// 打開視頻素材庫videoGalleryDialogVisible.value = true},}, }}

4、自定義擴展新功能菜單

（1）定義菜單class

目前可以自定義擴展的功能菜單有按鈕、下拉、下拉面板、模態框。26D28資訊網——每日最新資訊28at.com

新建myButtonMenu.ts文件，把下面代碼放進去。26D28資訊網——每日最新資訊28at.com

import { IButtonMenu, IDomEditor } from '@wangeditor/editor'class MyButtonMenu implements IButtonMenu { // TS 語法// class MyButtonMenu { // JS 語法constructor() {this.title = 'My menu title' // 自定義菜單標題// this.iconSvg = '<svg>...</svg>' // 可選this.tag = 'button'}// 獲取菜單執行時的 value ，用不到則返回空 字符串或 falsegetValue(editor: IDomEditor): string | boolean { // TS 語法// getValue(editor) { // JS 語法return ' hello '}// 菜單是否需要激活（如選中加粗文本，“加粗”菜單會激活），用不到則返回 falseisActive(editor: IDomEditor): boolean { // TS 語法// isActive(editor) { // JS 語法return false}// 菜單是否需要禁用（如選中 H1 ，“引用”菜單被禁用），用不到則返回 falseisDisabled(editor: IDomEditor): boolean { // TS 語法// isDisabled(editor) { // JS 語法return false}// 點擊菜單時觸發的函數exec(editor: IDomEditor, value: string | boolean) { // TS 語法// exec(editor, value) { // JS 語法if (this.isDisabled(editor)) returneditor.insertText(value) // value 即 this.value(editor) 的返回值}}

（2）注冊和插入菜單

定義菜單key時，要保證key唯一，不能和內置菜單key重復。插入菜單時，將對應的菜單key放在toolbarKeys想要的順序位置即可。26D28資訊網——每日最新資訊28at.com

import { Boot } from '@wangeditor/editor'import MyButtonMenu from './myButtonMenu'// 工具欄配置const toolbarConfig = {toolbarKeys: [// 插入菜單key'menu1',]}// 組件創建時const handleCreated = (editor: IDomEditor) => {editorRef.value = editor;const menu1Conf = {key: 'menu1', // 定義 menu key ：要保證唯一、不重復（重要）factory() {return new MyButtonMenu() // 替換為你菜單的 class},}// 注冊菜單Boot.registerMenu(menu1Conf)};

三、問題解析，知識總結

1、如何配置開始使用？

補充幾點注意事項吧，這也是官方提醒：26D28資訊網——每日最新資訊28at.com

  • editorRef 必須用 shallowRef定義。具體原因待研究，用ref似乎也行。
  • 組件銷毀時，要及時銷毀編輯器。

2、如何自定義工具欄菜單的展示？

這里補充幾個官方API：26D28資訊網——每日最新資訊28at.com

  • editor.getAllMenuKeys() 查詢編輯器注冊的所有菜單 key （可能有的不在工具欄上）
  • toolbar.getConfig().toolbarKeys 查看當前菜單排序和分組
  • 這塊其它API挺雞肋的，不用看了就，寫上搞得代碼很亂，直接在工具欄配置對象里操作就好了，比較清晰，自我感覺哈。
import { DomEditor } from '@wangeditor/editor'const toolbar = DomEditor.getToolbar(editor)const toolbarConfig = toolbar.getConfig()// 查看當前菜單排序和分組console.log( toolbarConfig.toolbarKeys )

3、如何自定義工具欄內置菜單的功能？

這里有通用的操作，參考官方，分兩步實現：26D28資訊網——每日最新資訊28at.com

26D28資訊網——每日最新資訊28at.com

4、如何自定義擴展新功能菜單？

這里官方提供了三處參考：定義新菜單、定義插件、定義新元素。26D28資訊網——每日最新資訊28at.com

我認為定義新菜單是比較常用的，這樣其實已經就很靈活了。至于其他兩項有需求的朋友，可以自行研究一番，可能比較燒哈。26D28資訊網——每日最新資訊28at.com

26D28資訊網——每日最新資訊28at.com

最后插一句，WangEditor這個庫，寫的真是挺不錯的！26D28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-35876-0.htmlVue3問題：如何使用WangEditor富文本？能自定義才是真的會用！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 深入了解 React Fiber：應用與源碼實現

下一篇： 如何有效使用Java并發Atomic包的原子類型

標簽：
  • 熱門焦點
Top