Vue使用Editor文本编辑器

最近的项目中需要使用到 Editor文本编辑器，于是做个随笔记录下，下载JS那些我就不说了，主要记录下Vue里面的东西

Vue 页面   

<div id="editor" ></div>

 

在Vue的JS中加载引入 这四个JS （UEditor/ueditor.config.js、UEditor/ueditor.all.min.js、UEditor/ueditor.parse.min.js、UEditor/lang/zh-cn/zh-cn.js）

import '../../../../static/UEditor/ueditor.config.js'

 

    export default {

         data () {

           return {

                  editor: '' //初始化的变量

                   }

                },

            mounted () {   

                 this.editor = UE.getEditor('editor')// 这里初始化，就写这一条也可以，但是路由页面返回的时候，编辑器会不显示 ， 这里标出只做提示， 请使用下面的初始化语句

                 UE.delEditor('editor')  //初始化

                 this.editor = UE.getEditor('editor', this.config)

              }，

          methods: {

                  // 获取文本内容 console.log(this.editor.getContent())

           }

 

            }

 

  接下来说下  Editor文本编辑器的配置

  在UEditor/ueditor.config.js 里面 配置

        window.UEDITOR_HOME_URL = "/static//UEditor/";

        var URL = window.UEDITOR_HOME_URL || getUEBasePath();

 

   可能控制台会显示报错，上传图片报错这样的错误,  可以更改   serverUrl: "/api/ueditorAction/exec" 这个路径, 如果不需要用到上传功能,可注释，看实际需求

    

    toolbars: [[   ]]  这个里面的内容就是文本的编辑器的功能配置，可能根据需求更改