Package Exports

@wangeditor/editor-for-vue
@wangeditor/editor-for-vue/dist/index.esm.js
@wangeditor/editor-for-vue/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@wangeditor/editor-for-vue) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

wangEditor for Vue

English documentation

介绍

基于 wangEditor 封装的开箱即用的 vue2 组件

安装

安装 wangeditor 核心包

yarn add @wangeditor/editor

安装组件包

yarn add @wangeditor/editor-for-vue

使用

模板

<div>
  <div>
    <button @click="insertText">insert text</button>
  </div>
  <div style="border: 1px solid #ccc;">
    <!-- 工具栏 -->
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editorId="editorId"
      :defaultConfig="toolbarConfig"
    />

    <!-- 编辑器 -->
    <Editor
      style="height: 500px"
      :editorId="editorId"
      :defaultConfig="editorConfig"
      :defaultContent="getDefaultContent"
      @onChange="onChange"
    />
  </div>
</div>

Script

import Vue from 'vue';
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue';
import cloneDeep from 'lodash.clonedeep';

export default Vue.extend({
  components: { Editor, Toolbar },
  data() {
    return {
      //【特别注意】
      // 1. editorId Toolbar 和 Editor 的关联，要保持一致
      // 2. 多个编辑器时，每个的 editorId 要唯一
      editorId: 'w-e-1',
      toolbarConfig: {},
      defaultContent: [],
      editorConfig: {
        placeholder: '请输入内容...',
      },
    };
  },

  computed: {
    // 注意，深度拷贝 content ，否则会报错
    getDefaultContent() {
      return cloneDeep(this.defaultContent);
    },
  },

  methods: {
    onChange(editor) {
      console.log('onChange', editor.children);
      this.curContent = editor.children;
    },
    // 及时销毁 editor
    beforeDestroy() {
      const editor = getEditor(this.editorId);
      if (editor == null) return;
      // 销毁，并移除 editor
      editor.destroy();
      removeEditor(this.editorId);
    },
});