vue使用UEditor

vue使用UEditor

官网下载

[1.4.3.3 PHP版本] UTF-8版本

https://ueditor.baidu.com/website/download.html

---

1. 把php版本中的内容添加到 /static/UE/
   (php 文件夹 / index.html不添加)
2. main.js 全局引入需要的文件

    //引入UEditor需要的文件，顺序很重要
    import '../static/UE/ueditor.config'
    import '../static/UE/ueditor.all.min'
    import '../static/UE/lang/zh-cn/zh-cn'
    import '../static/UE/ueditor.parse.min'

3. 修改 /static/UE/ueditor.config.js

    window.UEDITOR_HOME_URL = "/static/UE/";        //根目录相对路径

4. components单独定义 UEditor.vue 组件

<template>
  <div id="UEditor">
    <script id="editor" type="text/plain"></script>
  </div>
</template>

<script>
    export default {
        name: "UEditor",
        data(){
          return{
            editor:null
          }
        },
        props:{
          defaultMsg:{type:String},
          config:{type:Object}
        },
        mounted(){
          //初始化UE
          const _this = this;
          _this.editor = UE.getEditor('editor',_this.config);
        },
        methods:{
          getUEContent(){
            //获取内容方法
            return this.editor.getUEContent()
          }
        },
        destoryed(){
          this.editor.destory();
        }
    }
</script>

5. 父组件中使用UEditor组件

<template>
  <div class="docMain">
    <UEditor :config=config ref="ue"></UEditor>
  </div>
</template>

<script>
    import UEditor from '../components/UEditor'
    export default {
        name: "test",
        data(){
          return{
            config:{
              initialFrameWidth:900,
              initialFrameHeight:650
            },
            docTitle:"",
            docDescription:"",
            docMain:"",
          }
        },
        components:{
          UEditor
        }
    }
</script>