vue 项目采用wangedit富文本编辑器始末,重点在图片上传

 

官网文档很详细，建议先看文档了解一番。

我在使用过程中主要遇到上传图片和调整编辑器高度的问题

安装：

npm install wangeditor

编写组件以便日后复用，将wangedit封装为独立组件：

<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left;"></div>
  </div>
</template>
<script>
    import E from 'wangeditor'
    import axios from 'axios'
    import {Loading, Message} from 'element-ui'

    export default {
        name: 'editorElem',
        data() {
            return {
                editor: null,
                editorContent: ''
            }
        },
        props: ['catchData', 'content'],    // 接收父组件的方法
        watch: {
            content() {
                this.editor.txt.html(this.content)
            }
        },