Vue.js中使用wangEditor富文本编辑器

前端html

<script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.js"></script>
<link href="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.css" rel="stylesheet">

<div id="app" style="margin-top: 60px;">
    <el-row>
        <el-col :span="16" :offset="4">
            <div id="editor">
                <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
            </div>
        </el-col>
        <el-col :span="4" :offset="16" style="margin-top: 20px;">
            <el-button type="primary" @click="handleAdd" id="btn1">添加</el-button>
        </el-col>
    </el-row>
</div>

前端JS

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            editor: null
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                const E = window.wangEditor;
                this.editor = new E(document.getElementById('editor'));
                this.editor.customConfig.uploadImgServer = '/upload_img/';
                this.editor.customConfig.showLinkImg = false;
                this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
                this.editor.customConfig.uploadImgMaxLength = 5;
                this.editor.customConfig.withCredentials = true;
                this.editor.create();
            },
            handleAdd() {
                console.log(this.editor.txt.html());
                console.log(this.editor.txt.text());
                axios.post(site_url + "create_blog/", {"content": this.editor.txt.html()}).then(res => {
                    if (res.data.result) {
                        this.$message.success('添加内容成功');
                    } else {
                        this.$message.error('添加内容失败');
                    }
                }, 'json');
            }
        }
    })
</script>