Find N3入網(wǎng)：最高支持16+1TB
OPPO將于近期登場的Find N3折疊屏目前已經(jīng)正式入網(wǎng)，型號(hào)為PHN110。本次Find N3在外觀方面相比前兩代有很大的變化，不再是小號(hào)的橫向折疊屏，而是跟別的廠商一樣采用了較為常見的
使用富文本進(jìn)行內(nèi)容編輯，要求自定義工具欄菜單順序及其分組，并且要求自定義選擇圖片、自定義選擇視頻。
實(shí)現(xiàn)代碼如下，復(fù)制粘貼即可直接使用。
如果你有時(shí)間，具體問題梳理、代碼分析、知識(shí)總結(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'// 編輯器實(shí)例，必須用 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: '請(qǐng)輸入內(nèi)容...',MENU_CONF: {}}// 組件銷毀時(shí)，也及時(shí)銷毀編輯器onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()})// 組件創(chuàng)建時(shí)const handleCreated = (editor) => {editorRef.value = editor // 記錄 editor 實(shí)例，重要！}</script>工具欄菜單的展示，如菜單的順序和分組、添加刪除。
如果想要自定義，只需修改工具欄配置對(duì)象的toolbarKeys屬性。toolbarKeys屬性值是一個(gè)數(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', // 縮進(jìn)'indent', // 增進(jìn)'deleteImage',//刪除圖片'divider', // 分割線'insertTable', // 插入表格'justifyCenter', // 居中對(duì)齊'justifyJustify', // 兩端對(duì)齊'justifyLeft', // 左對(duì)齊'justifyRight', // 右對(duì)齊'undo', // 撤銷'redo', // 重做'clearStyle', // 清除格式'fullScreen' // 全屏]}工具欄菜單的功能，如鏈接、上傳圖片、上傳視頻。
如果想要自定義，只需修改編輯器配置對(duì)象的MENU_CONF屬性。不同的功能都對(duì)應(yīng)著不同的MENU_CONF屬性值，這里我以問題提出者的問題為示例，具體請(qǐng)參考官方文檔，寫的非常不錯(cuò)的，放下面吧。
https://www.wangeditor.com/v5/menu-config.html.
// 編輯器配置const editorConfig = { placeholder: '請(qǐng)輸入內(nèi)容...',MENU_CONF: {// 上傳圖片uploadImage: {// 自定義選擇圖片async customBrowseAndUpload(insertFn: InsertFnType) {// 打開圖片素材庫photoGalleryDialogVisible.value = true},},// 上傳視頻uploadVideo: {// 自定義選擇視頻async customBrowseAndUpload(insertFn: InsertFnType) {// 打開視頻素材庫videoGalleryDialogVisible.value = true},}, }}目前可以自定義擴(kuò)展的功能菜單有按鈕、下拉、下拉面板、模態(tài)框。
新建myButtonMenu.ts文件，把下面代碼放進(jìn)去。
import { IButtonMenu, IDomEditor } from '@wangeditor/editor'class MyButtonMenu implements IButtonMenu { // TS 語法// class MyButtonMenu { // JS 語法constructor() {this.title = 'My menu title' // 自定義菜單標(biāo)題// this.iconSvg = '<svg>...</svg>' // 可選this.tag = 'button'}// 獲取菜單執(zhí)行時(shí)的 value ，用不到則返回空 字符串或 falsegetValue(editor: IDomEditor): string | boolean { // TS 語法// getValue(editor) { // JS 語法return ' hello '}// 菜單是否需要激活（如選中加粗文本，“加粗”菜單會(huì)激活），用不到則返回 falseisActive(editor: IDomEditor): boolean { // TS 語法// isActive(editor) { // JS 語法return false}// 菜單是否需要禁用（如選中 H1 ，“引用”菜單被禁用），用不到則返回 falseisDisabled(editor: IDomEditor): boolean { // TS 語法// isDisabled(editor) { // JS 語法return false}// 點(diǎn)擊菜單時(shí)觸發(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時(shí)，要保證key唯一，不能和內(nèi)置菜單key重復(fù)。插入菜單時(shí)，將對(duì)應(yīng)的菜單key放在toolbarKeys想要的順序位置即可。
import { Boot } from '@wangeditor/editor'import MyButtonMenu from './myButtonMenu'// 工具欄配置const toolbarConfig = {toolbarKeys: [// 插入菜單key'menu1',]}// 組件創(chuàng)建時(shí)const handleCreated = (editor: IDomEditor) => {editorRef.value = editor;const menu1Conf = {key: 'menu1', // 定義 menu key ：要保證唯一、不重復(fù)（重要）factory() {return new MyButtonMenu() // 替換為你菜單的 class},}// 注冊(cè)菜單Boot.registerMenu(menu1Conf)};補(bǔ)充幾點(diǎn)注意事項(xiàng)吧，這也是官方提醒：
這里補(bǔ)充幾個(gè)官方API：
import { DomEditor } from '@wangeditor/editor'const toolbar = DomEditor.getToolbar(editor)const toolbarConfig = toolbar.getConfig()// 查看當(dāng)前菜單排序和分組console.log( toolbarConfig.toolbarKeys )這里有通用的操作，參考官方，分兩步實(shí)現(xiàn)：
這里官方提供了三處參考：定義新菜單、定義插件、定義新元素。
我認(rèn)為定義新菜單是比較常用的，這樣其實(shí)已經(jīng)就很靈活了。至于其他兩項(xiàng)有需求的朋友，可以自行研究一番，可能比較燒哈。
最后插一句，WangEditor這個(gè)庫，寫的真是挺不錯(cuò)的！
本文鏈接：http://www.www897cc.com/showinfo-26-35876-0.htmlVue3問題：如何使用WangEditor富文本？能自定義才是真的會(huì)用！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)