ueditor插件

/**可能我说ueditor插件，”老人们“都知道是什么了，但是对于一些小菜鸟来说很陌生，简单点就是类似word文档编辑器一样有很多选择，上个图片大家更容易懂

那么要如何使用呢，如果大家是原生得来写项目直接下载一个版本就ok了，注意下载下来的都放到项目中以免有些东西无法

使用出现问题，下载地址： http://ueditor.baidu.com/website/download.html

就算是页面中显示出来了也会有一些问题会有报错，因为本人也是帮同学看没有真正做过也没有深入去研究，只是听”老人“说和后台得配合，还有就是页面中如果有两个的时候也会有问题，等等。

但是如果时vue中要使用应该如何操作呢？给大家看一下我的

如果下载的ueditor包在vue中按我的方法无法显示出来，可以使用我的

https://github.com/Myboy74/ueditor.git

**/

vue配置：

这是我放置得目录

1. ueditor.config.js

2. Main.js 引入（具体地址输入自己的哦）

import '../static/ueditor/ueditor.config.js'
import '../static/ueditor/ueditor.all.min.js'
import '../static/ueditor/lang/zh-cn/zh-cn.js'
import '../static/ueditor/ueditor.parse.min.js'

3.text.vue

<template>
    <div>
        <div id="editor" style="width: 80%; height: 250px; margin: 0 auto"></div>
    </div>
</template>
<script>
    export default {
        name: 'UE',
        data () {
            return {
                editor: null
            }
        },
        props: {
            defaultMsg: {
                type: String
            },
            config: {
                type: Object
            }
        },
        mounted() {
            const _this = this;
            this.editor = UE.getEditor('editor', this.config); // 初始化UE
            this.editor.addListener("ready", function () {
                _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
            });
        },
        methods: {
            getUEContent() { // 获取内容方法
                return this.editor.getContent()
            }
        },
        destroyed() {
            this.editor.destroy();
        }
    }
</script>

猜你喜欢