wangEditor一款好用的编辑器插件

wangEditor一款好用的编辑器插件

最近公司需要用网页做一个编辑器，功能还比较复杂，需要在编辑器里面输入表情，以及一些特定的标签。如此复杂的需求，经过过我不屑的寻找，终于找到了一款强大的网页编辑器插件wangEditor。下面我们就来具体介绍下这款插件。

wangEditor是一款轻量级的web富文本编辑器。国产，基于javascript和css开发的web富文本编辑器，开源免费，上传图片可以控制尺寸。

 

介绍

1.wangEditor优势

• 基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用
• WangEditor富文本编辑器配置方便、使用简单、且开源免费
• 各项基本配置基本齐全，适合功能需求简单的项目构建兼容性是支持IE10+的浏览器
• 默认正文p、字体样式以span标签的行内样式添加

2. 功能介绍

功能基本包括：【标题设置、字体加粗、斜体、下划线、删除、文字颜色、背景颜色、链接、列表（有序、无序）、表情、图片（网络图片、本地上传）、表格、视频、代码块、返回上一步、返回下一步（但其实ctrl+z快捷键也可以）】，也可以写自定义插件。

在vue中使用wangEditor

1.安装

npm install wangeditor

2.引入

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
    components: { Editor, Toolbar },
}

3.使用

<div class="editor-block">
            <Editor style="height: 100%; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
                @onCreated="onCreated" @onFocus="onFocus" @onBlur="onBlur" />
</div>


<div class="Aa-block"
                <Toolbar style="border-radius: 12px;overflow: hidden;" :editor="editor" :defaultConfig="toolbarConfig"
                    :mode="mode" />
</div>


export default {
    components: { Editor, Toolbar, HqCard1 },
    data() {
        return {
            editor: null,
            html: '',
            toolbarConfig: {
                toolbarKeys: [   // 重新配置工具栏，显示哪些菜单，以及菜单的排序、分组。
                    "bold", // 加粗
                    "italic", // 斜体
                    "underline", // 下划线
                    "bulletedList", // 无序列表
                    "numberedList", // 有序列表
                ]
            },
            editorConfig: {
                placeholder: '请输入内容...',
                hoverbarKeys: {
                    text: {
                        menuKeys: [
                            "bold", // 加粗
                            "italic", // 斜体
                            "underline", // 下划线
                            "bulletedList", // 无序列表
                            "numberedList", // 有序列表
                        ]
                    },
                    image: {
                        menuKeys: [
                            // "editImage",// 编辑图片
                            "deleteImage" // 删除图片
                        ]
                    }
                }
                // MENU_CONF: {
                //     color: {colors: ['#000', '#333', '#666']}
                // }
            },
            mode: 'default', // or 'simple
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        onFocus() {
            
        },
        onBlur() {
           
        },
    }
    
}

toolbarConfig 是工具栏配置，hoverbarKeys是选中输入元素的悬浮窗配置，更多配置可参考wangEidtor官方文档。

 

编辑器Api

editor.getConfig() // 获取编辑器所有配置

editor.getMenuConfig(menuKey) //获取单个 menu 的配置

editor.getAllMenuKeys() // 获取编辑器所有 menu 的 key

editor.getHtml() // 获取非格式化的 html

editor.getText() // 获取当前编辑器的纯文本内容

editor.setHtml('<p>hello</p>') //重置编辑器的 HTML 内容。//【注意】只能解析 editor.getHtml() 返回的 HTML 格式，不支持自定义 HTML 格式。如果想插入一段 HTML ，请使用 dangerouslyInsertHtml

editor.isEmpty()// 判断当前编辑器内容是否为空（只有一个空段落）

editor.getSelectionText()// 获取选中的文本

editor.getElemsByType('image') // getElemsByType所有图片 通过 type 获取编辑器的 element 列表
editor.getElemsByType('link') // 所有链接

editor.getElemsByTypePrefix('header') //通过 type 前缀获取编辑器的 element 列表

editor.deleteBackward()//向后删除，相当于按 backspace 键。

editor.deleteForward()//向后删除，相当于按 delete 键（部分键盘没有这个键）

editor.deleteFragment()//删除选中的内容

editor.getFragment()//获取选中的内容，json 格式

editor.insertBreak()//在选区回车换行

editor.insertText('xxx')//在选区插入文本

editor.dangerouslyInsertHtml()// 插入html,如果是 editor.getHtml() 获取的 HTML 格式，可以完美解析,如果是其他的 HTML 格式，则不能保证语义正确

editor.clear()// 清空编辑器内容

editor.undo()//撤销

editor.redo()//重做

更多api参考wangEditor官方文档

下篇将介绍在使用中的一些踩坑问题。