vue wangeditor 富文本编辑器的使用

wangeditor 富文本编辑器，是实现类似CSDN文章编辑功能的插件（CSDN官方使用的是CKEditor 富文本编辑器）。

一、使用步骤

1.引入库

wangEditor官方文档

（1）

npm install @wangeditor/editor --save

（2）根据自己项目使用的框架，采取不同的引入方式，如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字以内）" />
              <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 },
    // 文章编辑相关配置
    data(){
        let that = this;
        return{
            editor: null,
            defaultHtml: '',   // 这里的 HTML 内容必须是 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: 微软雅黑;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;从这里开始写正文...</span></p>',
                MENU_CONF:{
                    // 插入图片
                    uploadImage: {

                        base64LimitSize: 1024 * 1024 * 10 // 10MB 小于该值就插入 base64 格式（而不上传），默认为 0
                    },
                }
            },
            mode: 'default', // 'default' or 'simple'
        }
    },
    methods:{
        // 编辑器创建完毕时的回调函数。
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },

        // 对用户剪切板内容的处理
        customPaste(editor, event){
            // event 是 ClipboardEvent 类型，可以拿到粘贴的数据
            const text = event.clipboardData.getData('text/plain'); // 获取粘贴的纯文本
            editor.insertText(text);
            event.preventDefault(); // 阻止默认的粘贴行为
            return false;
        }
    }
}
</script>


<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
.editor-box{
     width: 800px;    // 配置编辑器宽度
     height: auto;
     margin: 0 40px 20px 0;
     border: 1px solid #dddddd;  // 编辑器外边框
}
</style>

---

上例配置的效果：

---

 3、配置参数

以vue2中的配置为例：Vue2中使用wangeditor

（1）工具栏配置——也就是字体、对齐方式、字号等配置

官网工具栏配置

        自定义工具栏：在data中配置toolbarConfig

（2）编辑器配置——默认的placeholder、配置颜色、字体、链接校验、上传图片等

 官网编辑器配置

  自定义工具栏：在data中配置editorConfig

  拓展：自定义插入图片，上传到七牛云

---

拓展1：将标题栏单列出来

        需求中要求把标题栏单列出来，也就是示例图片中"请输入文章标题..."栏，直接写在editor的placeholder会导致上传文章后，无法判断为正文内容还是文章标题，所以可以看到我在引入的工具栏和编辑器中间加了一个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"]
          }
    ]
},

最终效果