Vue实现ueditor编辑器

1、安装npm

npm install --save vue-ueditor-wrap

2、HTML部分

<el-col :span="24">
    <el-form-item label="文章内容" prop="articleContent">
        <vue-ueditor-wrap v-model="dataForm.articleContent" :config="myConfig"></vue-ueditor-wrap>
    </el-form-item>
</el-col>

3、vue.js

<script>
import Cookies from 'js-cookie'
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
    components: { VueUeditorWrap },
    data () {
        return {
            myConfig: {
                // 上传接口
                serverUrl: `${window.SITE_CONFIG['apiURL']}/oss/file/ueditorConfig?token=${Cookies.get('token')}`,
                // 你的UEditor资源存放的路径,相对于打包后的index.html
                UEDITOR_HOME_URL: '/ueditor/',
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 工具栏是否可以浮动
                autoFloatEnabled: false,
                // 初始容器高度
                initialFrameHeight: 350,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 关闭自动保存
                enableAutoSave: false
              },
            dataForm: {
                articleContent
            }
        }
    }
}
</script>