wangEditor has stared new V5 version, and the official Vue plug-in. Please go to Install.
Vue component for RichText editor wangEditor
wangEditor version 4.0 document
[toc]
npm install vue-wangeditor-awesome --save
# or
yarn add vue-wangeditor-awesome
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>
import Vue from 'vue'
import VueWangEditor from 'vue-wangeditor-awesome'
Vue.use(VueWangEditor, /* { default global options } */)
import { vueEditor } from 'vue-wangeditor-awesome'
export default {
components: {
vueEditor
}
}
- 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)
experimental stage
For convenience, add some custom menu extensions, use other-extended-menus to enable them
Modify the class
attribute of the selected element
Compatible with common PC browsers: Chrome, Firefox, Safar, Edge, QQ browser, IE11.
Mobile terminal is not supported.
Configure via component props,also expose some methods and events of wangEditor.
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>`
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.
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>
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>
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>
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>
Refer to [About Internationalization](#About Internationalization)
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
class AlertMenu {}
Vue.use(VueWangEditor, {
extendedMenus: { alertMenu: AlertMenu }
})
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>
Boolean | Array
Specify which custom menus to enable
other-extended-menus=“true”
other-extended-menus=“[]”
return this.wang.selection
,参考Selection Area API
In order to fully customize the wangEditor instance, several hooks have been added
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>
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 |
After creating the editor, append content to it
Return to this.wang.cmd.do
, refer to Content Operation API
Expose the getJSON
method of wangEditor, Refer to 获取 JSON
Expose the setJSON
method of wangEditor
Expose the clear
method of wangEditor, use to clear the content
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)
wangEditor instance is initialized
Note that: the relevant DOM may not be rendered
this.$emit('input', this._content)
this.$emit('change', { html, text, wang })
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>
see CHANGELOG.md
The uploadImgShowBase64
option is turned on by default, so that ti support images with no extra configurations.
Better choice reffer to:
Follow the wangEditor version
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>
The 4.0 npm package of wangEditor does not have source maps, so the component is temporarily unable to provide source maps