码迷,mamicode.com
首页 > 其他好文 > 详细

vue集成ueditor

时间:2017-03-15 18:44:31      阅读:1151      评论:0      收藏:0      [点我收藏+]

标签:nbu   uga   pxe   qml   ffd   dia   poc   文件   brk   

相关代码见github

1.引入ueditor相关的文件,具体目录见下图如下

      我将下载的文件放在static下面,这里专门用来放置相关的静态文件

在ueditor.config.js需要配置一下路径 var URL = window.UEDITOR_HOME_URL || ‘/static/ueditor_1/‘)根据自己的文件路径各自处理

技术分享

2.新建一个Ueditor.vue组件对象,该组件用来封装ueditor,用来进行复用.

<template>
  <div>
    <!--下面通过传递进来的id完成初始化-->
    <script :id="randomId"  type="text/plain"></script>
  </div>
</template>

<script>

  //需要修改  ueditor.config.js 的路径
  //var URL = window.UEDITOR_HOME_URL || ‘/static/ueditor_1/‘;

  //主体文件引入
  import ../../static/ueditor_1/ueditor.config.js
  import ../../static/ueditor_1/ueditor.all.min.js
  import ../../static/ueditor_1/lang/zh-cn/zh-cn.js
  //主体文件引入


  export default {
    props: {
      //配置可以传递进来
      ueditorConfig:{}
    },
    data () {
      return {
        //每个编辑器生成不同的id,以防止冲突
        randomId: editor_ + (Math.random() * 100000000000000000),
        //编辑器实例
        instance: null,
      };
    },
    //此时--el挂载到实例上去了,可以初始化对应的编辑器了
    mounted () {
      this.initEditor()
    },

    beforeDestroy () {
      // 组件销毁的时候,要销毁 UEditor 实例
      if (this.instance !== null && this.instance.destroy) {
        this.instance.destroy();
      }
    },
    methods: {
      initEditor () {
        //dom元素已经挂载上去了
          this.$nextTick(() => {
            this.instance = UE.getEditor(this.randomId, this.ueditorConfig);
            // 绑定事件,当 UEditor 初始化完成后,将编辑器实例通过自定义的 ready 事件交出去
            this.instance.addListener(ready, () => {
              this.$emit(ready, this.instance);
            });
          });
        }
    }
  };
</script>

 

3.Ueditor的使用,通过对组件的监听可以实现回调,把ueditor传回父组件.

<template>
  <div id="app">
    vue_ueditor
    <div>
      //此时监听子组件的事件,编辑器实例回调
      <Ueditor @ready="editorReady" style="width: 500px;height: 440px;"></Ueditor>
    </div>

  </div>
</template>

<script>
  import Ueditor from ./components/Ueditor

  export default {
    data(){
      return{
        content:‘‘
      }
    },
    name: app,
    components: {
      Ueditor
    },
    methods: {
      editorReady (instance) {
        instance.setContent(‘‘);

        instance.addListener(contentChange, () => {
          this.content = instance.getContent();
        });
      },
    },
  }
</script>

 

4.此时封装基本完成,但是上传图片功能还没实现,接下来实现图片上传功能.

// 服务器统一请求接口路径
//在ueditor.config.js里面进行配置,本项目使用的是php后台,后台按照文档配置好,直接通过链接过去即可
//测试发现在本地上传比较慢
//项目打包上传服务器之后,速度回复正常
    serverUrl: http://xxx.com/Public/Home/ueditor/php/controller.php,

 

 

5.温馨提示 通过设置index.js进行跨域调试(改完需要重新run dev)

  dev: {
    env: require(./dev.env),
    port: 8085,
    assetsSubDirectory: static,
    assetsPublicPath: /,
//跨域测试接口 proxyTable: {
/baseUrl: { target: http://xxx.com/index.php, changeOrigin: true, pathRewrite: { ^/baseUrl: ‘‘ } },
//跨域测试图片上传
/baseImgUrl: { target: http://xxx.com, changeOrigin: true, pathRewrite: { ^/baseImgUrl: ‘‘ } } },

 

vue集成ueditor

标签:nbu   uga   pxe   qml   ffd   dia   poc   文件   brk   

原文地址:http://www.cnblogs.com/cshhs/p/6555398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!