wangeditor

一、簡單用法

首先：npm install wangeditor --save

<div id="richText" style="height: 400px;background-color: #fff;" ></div> import { ref, onMounted } from 'vue' import E from 'wangeditor' const phoneEditor = ref('') onMounted(() => {phoneEditor.value = new E('#richText')// 上傳圖片到服務器，base64形式phoneEditor.value.config.uploadImgShowBase64 = true// 隱藏網絡圖片phoneEditor.value.config.showLinkImg = false// 創建一個富文本編輯器phoneEditor.value.create()// 富文本內容phoneEditor.value.txt.html() })

二、官網使用步驟

安裝

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

?

<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> import '@wangeditor/editor/dist/css/style.css' // 引入 cssimport { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue' import { Editor, Toolbar } from '@wangeditor/editor-for-vue' export default {components: { Editor, Toolbar },setup () {// 編輯器實例，必須用 shallowRefconst editorRef = shallowRef()// 內容 HTMLconst valueHtml = ref('<p>hello</p>')// 模擬 ajax 異步獲取內容onMounted(() => {setTimeout(() => {valueHtml.value = '<p>模擬 Ajax 異步設置內容</p>'}, 1500)})const toolbarConfig = { }const editorConfig = { placeholder: '請輸入內容...' }// 組件銷毀時，也及時銷毀編輯器onBeforeUnmount(() => {const editor = editorRef.value if (editor == null) returneditor.destroy()})const handleCreated = (editor) => {editorRef.value = editor // 記錄 editor 實例，重要！}return {editorRef,valueHtml,mode: 'default',toolbarConfig,editorConfig,handleCreated}} } </script>

?注意：如果需要自定義工具欄的配置，可以在toolbarConfig里面寫入。如果想要添加指定菜單，使用toolbarKeys，如果需要排除某一些菜單，使用excludeKeys即可。如：

const toolbarConfig = {toolbarKeys: ['bold', // 加粗'italic', // 斜體'through', // 刪除線'underline', // 下劃線'bulletedList', // 無序列表'numberedList', // 有序列表'color', // 文字顏色'insertLink', // 插入鏈接'fontSize', // 字體大小'lineHeight', // 行高'uploadImage', // 上傳圖片'delIndent', // 縮進'indent', // 增進'deleteImage',//刪除圖片'divider', // 分割線'insertImage', // 網絡圖片'insertTable', // 插入表格'justifyCenter', // 居中對齊'justifyJustify', // 兩端對齊'justifyLeft', // 左對齊'justifyRight', // 右對齊'undo', // 撤銷'redo', // 重做'clearStyle', // 清除格式'fullScreen' // 全屏] } const toolbarConfig = {excludeKeys: ['bgColor', // 背景色'blockquote', // 引用'codeBlock', // 代碼段'emotion', // 表情'fontFamily', // 字體'headerSelect' // 標題 ]}

傳送門：wangEditor

總結

以上是生活随笔為你收集整理的vue3 富文本编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。