讓我們一起聊聊文件的操作
文件【1】文件是什么？文件是保存數(shù)據(jù)的地方，是數(shù)據(jù)源的一種，比如大家經(jīng)常使用的word文檔、txt文件、excel文件、jpg文件...都是文件。文件最主要的作用就是保存數(shù)據(jù)，它既可以保
使用富文本進行內(nèi)容編輯，要求自定義工具欄菜單順序及其分組，并且要求自定義選擇圖片、自定義選擇視頻。
實現(xiàn)代碼如下，復(fù)制粘貼即可直接使用。
如果你有時間，具體問題梳理、代碼分析、知識總結(jié)，可見第三部分。
npm i @wangeditor/editor @wangeditor/editor-for-vue// 引入 cssimport '@wangeditor/editor/dist/css/style.css' // 引入 組件import { Editor, Toolbar } from '@wangeditor/editor-for-vue'// 引入 接口類型import { IDomEditor, IEditorConfig } from "@wangeditor/editor";<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()// 內(nèi)容 HTMLconst valueHtml = ref('<p>hello</p>')// 模擬 ajax 異步獲取內(nèi)容onMounted(() => {setTimeout(() => {valueHtml.value = '<p>模擬 Ajax 異步設(shè)置內(nèi)容</p>'}, 1500)})// 工具欄配置const toolbarConfig = {toolbarKeys: []}// 編輯器配置const editorConfig = { placeholder: '請輸入內(nèi)容...',MENU_CONF: {}}// 組件銷毀時，也及時銷毀編輯器onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()})// 組件創(chuàng)建時const handleCreated = (editor) => {editorRef.value = editor // 記錄 editor 實例，重要！}</script>工具欄菜單的展示，如菜單的順序和分組、添加刪除。
如果想要自定義，只需修改工具欄配置對象的toolbarKeys屬性。toolbarKeys屬性值是一個數(shù)組，內(nèi)部填寫菜單的key，使用官方API接口editor.getAllMenuKeys()可查詢?nèi)績?nèi)置菜單的key。
// 工具欄配置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' // 全屏]}工具欄菜單的功能，如鏈接、上傳圖片、上傳視頻。
如果想要自定義，只需修改編輯器配置對象的MENU_CONF屬性。不同的功能都對應(yīng)著不同的MENU_CONF屬性值，這里我以問題提出者的問題為示例，具體請參考官方文檔，寫的非常不錯的，放下面吧。
https://www.wangeditor.com/v5/menu-config.html.
// 編輯器配置const editorConfig = { placeholder: '請輸入內(nèi)容...',MENU_CONF: {// 上傳圖片uploadImage: {// 自定義選擇圖片async customBrowseAndUpload(insertFn: InsertFnType) {// 打開圖片素材庫photoGalleryDialogVisible.value = true},},// 上傳視頻uploadVideo: {// 自定義選擇視頻async customBrowseAndUpload(insertFn: InsertFnType) {// 打開視頻素材庫videoGalleryDialogVisible.value = true},}, }}目前可以自定義擴展的功能菜單有按鈕、下拉、下拉面板、模態(tài)框。
新建myButtonMenu.ts文件，把下面代碼放進去。
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'}// 獲取菜單執(zhí)行時的 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}// 點擊菜單時觸發(fā)的函數(shù)exec(editor: IDomEditor, value: string | boolean) { // TS 語法// exec(editor, value) { // JS 語法if (this.isDisabled(editor)) returneditor.insertText(value) // value 即 this.value(editor) 的返回值}}定義菜單key時，要保證key唯一，不能和內(nèi)置菜單key重復(fù)。插入菜單時，將對應(yīng)的菜單key放在toolbarKeys想要的順序位置即可。
import { Boot } from '@wangeditor/editor'import MyButtonMenu from './myButtonMenu'// 工具欄配置const toolbarConfig = {toolbarKeys: [// 插入菜單key'menu1',]}// 組件創(chuàng)建時const handleCreated = (editor: IDomEditor) => {editorRef.value = editor;const menu1Conf = {key: 'menu1', // 定義 menu key ：要保證唯一、不重復(fù)（重要）factory() {return new MyButtonMenu() // 替換為你菜單的 class},}// 注冊菜單Boot.registerMenu(menu1Conf)};補充幾點注意事項吧，這也是官方提醒：
這里補充幾個官方API：
import { DomEditor } from '@wangeditor/editor'const toolbar = DomEditor.getToolbar(editor)const toolbarConfig = toolbar.getConfig()// 查看當前菜單排序和分組console.log( toolbarConfig.toolbarKeys )這里有通用的操作，參考官方，分兩步實現(xiàn)：
這里官方提供了三處參考：定義新菜單、定義插件、定義新元素。
我認為定義新菜單是比較常用的，這樣其實已經(jīng)就很靈活了。至于其他兩項有需求的朋友，可以自行研究一番，可能比較燒哈。
最后插一句，WangEditor這個庫，寫的真是挺不錯的！
本文鏈接：http://www.www897cc.com/showinfo-26-35876-0.htmlVue3問題：如何使用WangEditor富文本？能自定義才是真的會用！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號