vue使用UEditor富文本编辑器

1：下载富文本编辑器
放到static目录下

 

全局main.js引入

// 引入 UEditor，注意顺序

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'

 

2：封装组件（由于不是经常用，注册局部组件）

<template>

    <div id="vueUEditor" class="ueditor-box">

      <script id="editor" type="text/plain">

      </script>

    </div>

</template>

<script>

    export default {

        name: 'vueUEditor',

        data () {

            return {

               editor: null 

            }

        },

        props: {

            defaultMsg: {

                type: String

            },

            config: {

                type: Object

            }

        },

        mounted () {

            var that = this;

            that.editor = UE.getEditor('editor', that.config);

        },

        destroyed () {

            this.editor.destroy();

        },

        methods: {

            getUEContent () {

                return this.editor.getContent();

            }

        },

    }

</script>

<style lang='less' type='text/less'>

    #editor {

        > div{

            width: 100% !important;

            > div {

                width: 100% !important;

            }

        }

    }

</style>

 

3：这个要后台配置图片上传路径

 

static目录UEditor，php，config.json可配置文件上传路径

 

4：引入调用

import vueUEditor from '../../../components/vueUEditor/vueUEditor'

components: { vueUEditor },

<vueUEditor :config="config" ref="ue"></vueUEditor>

 

data里面配置

config: {

          // initialframeWidth: 800,

          // initialframeHeight: 500

        },

 

获取编辑器的内容（html模板）

this.$refs.ue.getUEContent();

 

设置编辑器的内容（html模板）

var ue = UE.getEditor('editor');

ue.ready(function() { // 准备好再调用setContent

     ue.setContent(detail)

});

editor为ID，detail为变量