vue2+wangeditor rich text field

renderings

Please add a picture description

install dependencies

npm i @wangeditor/editor @wangeditor/editor-for-vue

initialization

<template>
  <div class="editor-box">
    <Toolbar
      :defaultConfig="toolbarConfig"
      :editor="editor"
      :mode="mode" />
    <Editor
      class="editor-box__textarea"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated" />
  </div>
</template>

<script>
import {
    
     Toolbar, Editor } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
export default {
    
    
  name: 'App',
  components: {
    
    
    Toolbar, Editor
  },
  data() {
    
    
    return {
    
    
      editor: null,
      mode: 'default',
      toolbarConfig: {
    
    },
      editorConfig: {
    
    },
    }
  },
  beforeDestroy() {
    
    
    const editor = this.editor
    if(editor === null) return
    editor.destroy()
  },
  methods: {
    
    
    onCreated(editor) {
    
    
      this.editor = Object.seal(editor)
    }
  }
}
</script>

wangeditorThere is no border by default. In order to better see the rich text field, add a border to the container and increase the height of the edited text field

<style>
.editor-box{
    
    
  border: 1px solid #e5e5e5;
}
.editor-box__textarea{
    
    
  height: 200px;
}
</style>

The effect at this time:
insert image description here

simple mode

If you think there are too many functions and you want a more concise rich text field, you can directly set modeto simple, the rendering:
insert image description here

custom mode

If simpleneither defaultand can fully meet your needs, and you want to customize not to display the specified function, you can use the toolbarConfigsetting item.

toolbarConfig: {
    
    
	excludeKeys: ['emotion', ...]
}

excludeKeysThe inside keyis the function item that you don't want to display. How to get this key?
Console F12Open the inspection element and find the page element of the rich text field: the value
insert image description here
of the element data-menu-keyis this keyvalue.

picture settings

Only base64 mode is allowed

Here, for convenience, the set pictures must be converted into base64 format

editorConfig: {
    
    
  placeholder: '请输入内容',
  MENU_CONF: {
    
    
    uploadImage: {
    
    
      server: 'xxx',
      base64LimitSize: 1 * 1024 * 1024, // > 1M 的图片不转成base64
      onBeforeUpload(file) {
    
    
        const keys = Object.keys(file)
        if(file[keys[0]].size / (1024 * 1024) > 1) {
    
    
          alert('图片大小不能超过 1M.')
        }
      }
    }
  }
}

base64LimitSizeSet the image limit value of the maximum converted base64 to 1M
When the size of the uploaded image is > 1M, the image server will be used, that is, servera servervalue must be given, if it is empty, an error will be reported: the server address is empty
In order to prevent pictures > 1M from the false server address we set, set onBeforeUpload the method, judge the size of the picture, and give a prompt if it is larger than 1M

Support image server

Not yet involved, waiting to be added...

more configuration

For more configuration details, see wangEditor Chinese documentation

project dependencies

"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^1.0.2",
"vue": "^2.6.14"

project code

code repository