Iview 集成 wangEditor富本本编辑器

wangEditor文档地址

1.安装wangEditor（打开命令行进入项目目录）

npm install wangeditor --save

2.Vue文件template块内容

    <div>
        <Row>
            <Col span="24">
                <Card>
                    <Form :label-width="80" ref="formValidate" :model="formValidate"  >
                        <FormItem>
                            <div id="editorElem" style="text-align:left"></div>
                        </FormItem>
                        <br>
                        <Button  @click="handleSubmit('formValidate')" long   type="primary" >提交</Button>
                    </Form>
                </Card>
            </Col>
        </Row>
    </div>

3.Vue文件script块内容

import { SERVER_BASE_URL } from '../../api/config.js'
import E from 'wangeditor'
export default {
    name: 'wangEditor',
    data () {
        return {
            formValidate:{
                content:""
            }
        };
     },
     methods:{
        handleSubmit(name){
            let params = JSON.parse(JSON.stringify(this[name]));
            // 提交富文本逻辑
            // this.$api.blog.addBlog(params).then((data) => {
            //     //TODO 填写判断添加属否成功跳转逻辑
            //    // this.$router.push({path:'/blog/index'})
            // })
        }
     },
    mounted () {
        var editor = new E('#editorElem')
        editor.customConfig.onchange = (html) => {
          this.formValidate.content = html;
        }
        // 富文本上传图片处理
        // editor.customConfig.uploadFileName = 'photo'
        // editor.customConfig.zIndex = 100
        // editor.customConfig.uploadImgServer = `${SERVER_BASE_URL}/blog/addPhoto`
        // editor.customConfig.uploadImgHooks = {
        //     customInsert: function (insertImg, result, editor) {
        //         console.log(result)
        //         var url =  `${IMAGE_URL}${result.data}`
        //         insertImg(url)
        //     }
        // }
        editor.create()
    }
};