vue+element-ui中使用WangEditor编辑器

WangEditor是一个比较新开源在线编辑器，支持将图片转base64按文本文件提交，在一些简单的系统中可以省不少事（至少免去了搞上传系统和附件管理系统）。

如何将WangEditor和Vue+Element-UI整合起来，官网语焉不详，仅提供了一个范例。我看了一些博客的引入办法是直接在页面中引入的，这里我把我的组件式引入方法和踩的坑介绍一下。

先在npm下安装wangeditor:

npm install wangeditor --save

首先，查看官网的Vue引入编辑器源码，可以看到Vue是以组件形式引入的：

（源码位于wangEditor/example/demo/in-vue/src/路径下）

我们将这个组件取名为Editor.vue放到我们工程的component目录下，在需要引用的页面内加入：

就可以了。这样，编辑器就是以组件形式引入工程的。

然后，我们还要做的是从父组件（表单页）获取子组件（编辑器）的内容：

同时，子组件做了以下修改：

1.增加content属性，接收父组件传值。

2.分离编辑器和工具栏，实现编辑器尺寸自动变化。

3.绑定content和editorContent的值，以便父页面获取。