vue-wangeditor-awesome

English Doc|中文文档

Vue component for RichText editor wangEditor

wangEditor version 4.0 document

[toc]

Install

NPM

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

Browser

Use the umd.js file in the dist/

<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 component

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

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

local component

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

export default {
  components: {
    vueEditor
  }
}

Features

• All configurations and features of wangEditor
• feature, which is enabled through the splitLayout property
• Some custom menu extensions, refer to [Built-in custom menu (experimental stage)](#Built-in custom menu)

Built-in custom menu

experimental stage

For convenience, add some custom menu extensions, use other-extended-menus to enable them

addClass

Modify the class attribute of the selected element

Browser compatibility

Compatible with common PC browsers: Chrome, Firefox, Safar, Edge, QQ browser, IE11.

Mobile terminal is not supported.

API

Configure via component props，also expose some methods and events of wangEditor.

global options

The options passed to Vue.use(), except for directiveName, other props will be the default values configured for wangEditor.

use directiveName to specify the name of the Vue component.

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

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

prop options

The options attribute will be merged with the global options, more props below. Finally assign merged result to the config of wangEditor, used as the final configuration.

more props

For convenience, hack(using $attrs) wangEditor's config to component's props. For example, the following menus, colors.

those configurations have the highest priority.

So you can:

<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

As a easier way to customize menus (toolbar), use disabled-menus prop to remove item from the menus. Apply after config.excludeMenus.

Same as editor.config.excludeMenus属性. Not applied at same time, will not be removed soon.

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

split-layout

Use the split-layout prop to support Separation of menu and editing area feature.

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

highlight

Support code highlighting, Refer to Code 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

Refer to [About Internationalization](#About Internationalization)

extended-menus

Refer to [Customized Extended Menu](http://www.wangeditor.com/doc/pages/11-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%89%A9%E5 %B1%95%E8%8F%9C%E5%8D%95/)

first, build an extended menu according to the method in the document

global options

class AlertMenu {}

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

component prop

Pass the key-value pair (Object, key extended menu name and value is extended menu class) into the extended-menus prop, and these extended menus will be registered when they are created

<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

Specify which custom menus to enable

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

wangEditor props

selection

return this.wang.selection，参考Selection Area API

Lifecycle hook

In order to fully customize the wangEditor instance, several hooks have been added

instanceCreated

Execute immediately after the wangEditor instance is created

Function type, accepts two parameters, if explicitly returns false, the subsequent process of wangEditor creating the editor will be terminated ( the create method not call), then call destroy.

| Name | Description | Component inner value | | -------- | ------------------- | --------------------- | | instance | wangEditor instance | this.wang | | options | merged options | this._options |

You can modify the options in this hook, or perform some advanced operations, such as Customize tooltip

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

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

afterConfig

After the wangEditor is configured, and before calling create. The config of wangEditor can be finally modified in this hook.

Function type, accepts two parameters, if explicitly returns false, the subsequent process of wangEditor creating the editor will be terminated ( the create method not call), then call destroy.

| Name | Description | Component inner value | | -------- | ------------------------------------ | --------------------- | | instance | wangEditor instance | this.wang | | config | config object of wangEditor instance | this.wang.config |

Methods

Methods

append

After creating the editor, append content to it

insertHtml

Return to this.wang.cmd.do, refer to Content Operation API

getJSON

Expose the getJSON method of wangEditor, Refer to 获取 JSON

setJSON

Expose the setJSON method of wangEditor

clear

Expose the clear method of wangEditor, use to clear the content

Events

When the callback of wangEidtor is not modified through onxxx options, the following events are emitted by default

Except for input and change, the parameters of other event callback are the wangEditor instance (this.wang)

ready

wangEditor instance is initialized

Note that: the relevant DOM may not be rendered

input

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

change

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

blur

focus

Themes

wangEditor has no official theme, you can use other editor's theme

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

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

ChangeLog

see CHANGELOG.md

More

Images

The uploadImgShowBase64 option is turned on by default, so that ti support images with no extra configurations.

Better choice reffer to:

wangEditor upload picture

About version

Follow the wangEditor version

About internationalization

Passing i18next to prop i18next will enable the internationalization feature, refer to Multilingual

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

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

About source-maps

The 4.0 npm package of wangEditor does not have source maps, so the component is temporarily unable to provide source maps