vue 使用Ueditor富文本的配置

1，首先把官网下载的Ueditor资源，放入静态资源src/static中。(我这下载的是1.4.3.3 Jsp 版本的[UTF-8版])，官网下载地址：https://ueditor.baidu.com/website/download.html

2018-12-12_091429.png
2，修改ueditor.config.js中的window.UEDITOR_HOME_URL配置，如下图：
2018-12-12_092032.png
3，在vue项目中的main.js中引入js和css

//富文本ue需要的js和css
import'../static/Ueditor/ueditor.config.js'
import'../static/Ueditor/ueditor.all.js'
import'../static/Ueditor/lang/zh-cn/zh-cn.js'
import'../static/Ueditor/ueditor.parse.min.js'

4,配置一个全局的组件

<comment>
    # 组件注释
  此组建需要
  defaultMsg=====>富文本内容（最好是后台返回什么这里就是什么）
  defaultMsg: {
  type: String
  },
  config=====>富文本的配置项（详细见:http://fex.baidu.com/ueditor/#start-config）
  config: {
  type: Object
  }
</comment>
<template>
    <div class="Ue">
      <!--editor的div为富文本的承载容器-->
      　　　　<script id="editor" type="text/plain"></script>
    </div>
</template>
<script>
 export default {
        name: 'Ue',
        components: {},
        data() {
            return {
              editor: null,
            }
        },
        props: {
          defaultMsg: {
            type: String
          },
          config: {
            type: Object
          }
        },
        watch: {},
        methods: {
          getUEContent() { // 获取内容方法
            return this.editor.getContent()
          }

        },
        computed: {},
        created() {
        },
        mounted() {
        },
        destroyed() {
          this.editor.destroy();
        }
</script>

5,在组建中引用

<template>
  <div class='foot'>
      <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
      <button @click="getUEContent()">获取内容</button>
  </div>
</template>
<script type="text/javascript">
  import UE from '../components/Ueditor/Ue'
  export default {
    name: 'foot',
    components: {
      UE
    },
    data() {
      return {
        defaultMsg: null,
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        }
      }
    },
    props: {},
    watch: {},
    methods: {
      getUEContent() {
        let content = this.$refs.ue.getUEContent();
        this.$notify({
          title: '获取成功，可在控制台查看！',
          message: content,
          type: 'success'
        });
        console.log(content)
      }
    },
    computed: {},
    created() {
    },
    mounted() {
      this.defaultMsg = '<img src="/static/img/Logo_touming.aacdf29.png" alt="">'
    },
    destroyed() {
    }
  }
</script>

这样其实已经ok了，不过会报出后台配置项的错，如图：

1110357-20170915104106157-1552111700.png

出现此种现象的原因是配置ueditor的图片以及文件的后台上传接口不正确；

如果Ueditor不需要使用文件以及图片的上传则在ueditor.config.js中进行如下配置：（将serverUrl注释掉）

// 服务器统一请求接口路径

// serverUrl: URL + "jsp/controller.jsp",

以后将不会再出现上述报错，但是也将无法进行图片的上传：如下图：

1110357-20170915104117907-234721436.png

如果Ueditor需要使用文件以及图片的上传则在ueditor.config.js中进行如下配置：

// 服务器统一请求接口路径，配置的服务端接口

    　　serverUrl: "http://127.0.0.1:9999/api/UE",

//或者如果使用了代理，则可以如下进行配置

  　　  serverUrl: "/api/ue",

好了配置就说到这，下一篇再介绍ue+plupload前端上传图片