wangEditor已经开启了v5版本，同时提供了官方的vue插件，请参考安装

本项目不再继续更新！！

npm Version

vue-wangeditor-awesome

English Doc|中文文档

中文富文本编辑工具wangEditor的 Vue 插件封装

wangEditor 4.0 版本文档

[toc]

Install

NPM

npm install vue-wangeditor-awesome --save
# or
yarn add vue-wangeditor-awesome

Browser

使用 dist/ 目录的 umd.js 文件（或者）

<script src="https://cdn.jsdelivr.net/npm/vue-wangeditor-awesome"></script>
or
<script src="https://cdn.jsdelivr.net/npm/vue-wangeditor-awesome/dist/vue-wangeditor-awesome.umd.js"></script>

Usage

global register/全局组件

import Vue from 'vue'
import VueWangEditor from 'vue-wangeditor-awesome'

Vue.use(VueWangEditor, /* { default global options } */)

local import/局部引入

import { vueEditor } from 'vue-wangeditor-awesome'

export default {
  components: {
    vueEditor
  }
}

Features

wangEditor的所有配置及功能（包括4.0版本新增特性）
菜单和编辑区域分离特性，通过splitLayout属性开启
一些自定义menu扩展，参考内置的自定义menu

内置的自定义menu

实验阶段

为了方便，添加一些自定义menu扩展，通过other-extended-menus prop启用

addClass

修改选中元素的class属性

浏览器兼容性

兼容常见的 PC 浏览器：Chrome，Firefox，Safar，Edge，QQ 浏览器，IE11。

不支持移动端。

API

通过 props 配置，并暴露了 wangEditor 的一些 methods 和 events

全局options

在Vue.use中传入的options，除 directiveName外，其他会作为wangEditor配置的默认值。

directiveName用来指定Vue组件名称

Vue.use(VueWangEditor, {
  directiveName: 'wangEditor'
})

// in template
`<wang-editor v-model="content"></wang-editor>`

prop options

options属性会合并全局 options 后，在结合下面的更多属性，赋值给 wangEditor 的 config，产生最终配置。

more props

为了方便，把wangEditor 的 config属性也 hack(利用 $attrs)到组件的 props 中。例如下面的 menus、colors，这些配置的优先级最高。

所以你可以这么用

<WangEditor
  v-model="content"
  :options="options"
  debug
  :menus="['???']"
  :colors="['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff']"
  :disabled="false"
  @change="onEditorChange"
  ref="myEditor"
>
</WangEditor>

disabled-menus

为了方便定制 menus(toolbar)，加了一个 disabled-menusprop，方便从 menus 中剔除。在 config.excludeMenus后生效。

与wangEditor的editor.config.excludeMenus属性功能一致，但由于生效时机不同，暂时不会去掉这个属性

<WangEditor v-model="content" :options="options" :disabled-menus="['video']" @change="onEditorChange" ref="myEditor">
</WangEditor>

split-layout

添加 split-layoutprop 属性，用来支持 menu 和 container 拆分创建。

<WangEditor v-model="content" :options="options" split-layout :disabled="false" @change="onEditorChange" class="editor c-scroll" ref="myEditor">
</WangEditor>

highlight

支持代码高亮，参考代码高亮

<template>
		<WangEditor
      v-model="content"
      :options="options"
      :highlight="hljs"
    >
    </WangEditor>
</template>

<script>
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai_sublime.css'
  
export default {
  data() {
    return {
      hljs
    }
  },
}
</script>

i18next

参考关于国际化

extended-menus

参考自定义扩展菜单，根据文档中的方法建立扩展menu

全局使用

class AlertMenu {}

Vue.use(VueWangEditor, {
  extendedMenus: { alertMenu: AlertMenu }
})

组件prop

将扩展菜单名字-扩展菜单实现类的键值对（Object）传入 extended-menus prop，会在创建时注册这些扩展菜单

<template>
    <WangEditor
      v-model="content"
      :options="options"
      :menus="['newMenu']"
      :extended-menus="{newMenu: NewMenu}"
    >
    </WangEditor>
</template>

<script>
import { vueEditor, Editor } from 'vue-wangeditor-awesome/src/index'
const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = Editor.menuConstructors

class NewMenu extends BtnMenu {}
  
export default {
  data() {
    return {
      NewMenu
    }
  },
}
</script>

other-extended-menus

Boolean | Array

指定启用哪些组件提供的自定义menu

other-extended-menus=“true”
other-extended-menus=“[]”

wangEditor props

selection

返回 this.wang.selection，参考选区范围 API

生命周期钩子

为了能全面定制wangEditor实例，添加了几个钩子

instanceCreated

在wangEditor实例创建后立即执行

Function类型，接受两个参数，如果明确返回 false，则终止wangEditor创建编辑器的后续过程（即不执行create方法），并执行销毁处理。

名称	描述	组件内部值
instance	wangEditor的实例	this.wang
options	merge后的options	this._options

可以在这个钩子中修改options，或者进行一些高级操作，例如自定义 tooltip

// instanceCreated(this.wang, this._options)

    <WangEditor
      v-model="content"
      :before-ready=“doSomeConfig”
    >
    </WangEditor>

afterConfig

在wangEditor的设置完毕后，调用create前执行。可以在这个钩子中对wangEditor的config进行最终修改。

Function类型，接受两个参数，如果明确返回 false，则终止wangEditor创建编辑器的后续过程（即不执行create方法），并执行销毁处理。

名称	描述	组件内部值
instance	wangEditor的实例	this.wang
config	wangEditor实例的config对象	this.wang.config

Methods

把部分方法挂到了组件的methods中，其他方法可以通过vm.wang获取wangEditor实例后调用

append

创建编辑器之后，继续追加内容

insertHtml

返回 this.wang.cmd.do，参考内容操作 API

getJSON

暴露 wangEditor 的 getJSON方法，参考获取 JSON

setJSON

暴露 wangEditor 的 setJSON方法

clear

暴露 wangEditor 的 clear方法，清除内容

Events

在没有通过 onxxx options修改wangEidtor的回调时，默认emit 下面事件

除了 input和 change，其他事件回调的参数都是 wangEditor 实例(this.wang)本身

ready

wangEditor 实例初始化完毕

注意，可能相关 DOM 还没有渲染完成

input

this.$emit('input', this._content)

change

this.$emit('change', { html, text, wang })

blur

focus

Themes/主题

wangEditor 没有官方主题

在使用时，可以借用其他主题

<WangEditor v-model="content" class="ql-editor"></WangEditor>

<div v-html="content" class="ql-editor"></div>

ChangeLog

see CHANGELOG.md

其他

图片

默认开启了 uploadImgShowBase64选项，这样可以 0 配置支持图标。

优化参考：

wangEditor 上传图片

关于版本

跟随wangEditor版本

关于国际化

把i18next传入prop i18next，会启用国际化特性，参考多语言

<template>
		<WangEditor
      v-model="content"
      :options="options"
      :i18next="i18n"
      lang="en"
    >
    </WangEditor>
</template>

<script>
import i18n from 'i18next'
  
export default {
  data() {
    return {
      i18n
    }
  },
}
</script>

关于source-maps

4.0的wangEditor npm包没有source maps，导致该组件也暂时无法提供source maps

Files

README.zh_CN.md

Latest commit

History