wangeditor 富文本編輯器，是實現(xiàn)類似CSDN文章編輯功能的插件（CSDN官方使用的是CKEditor 富文本編輯器）。
一、使用步驟
1.引入庫
wangEditor官方文檔
根據(jù)自己項目使用的框架，采取不同的引入方式，如vue2：
npm install @wangeditor/editor-for-vue --save
2.在頁面中使用
在vue2中使用wangeditor? （官方文檔配置）
<template>
<div>
<!-- 富文本編輯器 -->
<div class="editor-box">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<input v-model="articleForm.title" class="article-title-box" maxlength="30" :border="false" placeholder="請輸入文章標題（2~30字以內(nèi)）" />
<Editor
style="height: 500px;overflow-y: hidden;"
v-model="defaultHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
@customPaste="customPaste"
/>
</div>
</div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
export default {
components: { Editor, Toolbar },
// 文章編輯相關(guān)配置
data(){
let that = this;
return{
editor: null,
defaultHtml: '', // 這里的 HTML 內(nèi)容必須是 wangEditor 生成的（即 editor.getHtml() 返回的） HTML 格式，不可以自己隨意寫
toolbarConfig: { // 工具欄配置
toolbarKeys:[ // 重新配置工具欄，顯示哪些菜單，以及菜單的排序、分組。
"fontSize", // 字號
// "fontFamily", // 字體
// "color", // 顏色
"bold", // 加粗
"italic", // 斜體
"underline", // 下劃線
"insertLink",// 插入鏈接
"bulletedList", // 無序列表
"numberedList", // 有序列表
// 對齊
{
key: "group-justify",
title: "對齊",
iconSvg:"<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
menuKeys: ['justifyLeft',"justifyRight","justifyCenter","justifyJustify"]
},
"uploadImage", // 上傳圖片
]
},
editorConfig: { // 編輯器配置（圖片如配置顏色、字體、鏈接校驗、上傳圖片等）
placeholder: '<p><span style="color: rgb(140, 140, 140); font-size: 16px; font-family: 微軟雅黑;"> 從這里開始寫正文...</span></p>',
MENU_CONF:{
// 插入圖片
uploadImage: {
base64LimitSize: 1024 * 1024 * 10 // 10MB 小于該值就插入 base64 格式（而不上傳），默認為 0
},
}
},
mode: 'default', // 'default' or 'simple'
}
},
methods:{
// 編輯器創(chuàng)建完畢時的回調(diào)函數(shù)。
onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否則會報錯
},
// 對用戶剪切板內(nèi)容的處理
customPaste(editor, event){
// event 是 ClipboardEvent 類型，可以拿到粘貼的數(shù)據(jù)
const text = event.clipboardData.getData('text/plain'); // 獲取粘貼的純文本
editor.insertText(text);
event.preventDefault(); // 阻止默認的粘貼行為
return false;
}
}
}
</script>
<style>
.editor-box{
width: 800px; // 配置編輯器寬度
height: auto;
margin: 0 40px 20px 0;
border: 1px solid #dddddd; // 編輯器外邊框
}
</style>上例配置的效果：
?3、配置參數(shù)
以vue2中的配置為例：Vue2中使用wangeditor
（1）工具欄配置——也就是字體、對齊方式、字號等配置
官網(wǎng)工具欄配置
????????自定義工具欄：在data中配置toolbarConfig
（2）編輯器配置——默認的placeholder、配置顏色、字體、鏈接校驗、上傳圖片等
?官網(wǎng)編輯器配置
??自定義工具欄：在data中配置editorConfig
? 拓展：自定義插入圖片，上傳到七牛云
拓展1：將標題欄單列出來
????????需求中要求把標題欄單列出來，也就是示例圖片中"請輸入文章標題..."欄，直接寫在editor的placeholder會導(dǎo)致上傳文章后，無法判斷為正文內(nèi)容還是文章標題，所以可以看到我在引入的工具欄和編輯器中間加了一個input標簽，完美融入整個編輯器（當然，得修改input框的樣式，讓它融合的更好）。???♀?
拓展2：配置首行縮進2個字符
? ? ? ? 在工具欄的配置中新增一個字段： “group-indent”
toolbarConfig: { // 菜單欄配置
toolbarKeys:[ // 重新配置工具欄，顯示哪些菜單，以及菜單的排序、分組。
"fontSize", // 字號
"fontFamily", // 字體
// 首行縮進2個字符
{
key: "group-indent",
title: "縮進",
iconSvg:"<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
menuKeys: ["indent","delIndent"]
}
]
},
?文章來源：http://www.zghlxwxcb.cn/news/detail-619442.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-619442.html
到了這里，關(guān)于vue wangeditor 富文本編輯器的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
