在vue中使用Ueditor

Posted shengnan-2017

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在vue中使用Ueditor相关的知识,希望对你有一定的参考价值。

今天研究的主角是:UEditor

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。

版本有很多

技术分享图片

我用的是:[1.4.3.3 php 版本] UTF-8版 

下载地址:http://ueditor.baidu.com/website/download.html

安装下载之后,将插件解压放在static目录下: static/ue/

技术分享图片

修改ueditor.config.js,配置目录 :

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

技术分享图片

ps:这个插件的代码写的真的是”与众不同“,如果你用eslint检查代码,并且是个强迫症患者,那就很欢乐了。

 

下面是相关代码:

新建组件 /src/base/ueditor/ueditor.vue

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
export default {
  name: "ue",
  data() {
    return {
      editor: null
    };
  },
  props: {
    value: "",
    config: {}
  },
  mounted() {
    const _this = this;
    this.editor = window.UE.getEditor("editor", this.config);
    // 初始化UE
    this.editor.addListener("ready", function() {
      _this.editor.setContent(_this.value);
      // 确保UE加载完成后,放入内容。
    });
  },
  methods: {
    getUEContent() {
      // 获取内容方法
      return this.editor.getContent();
    }
  },
  destroyed() {
    this.editor.destroy();
  }
};
</script>

在组件中引用

<template>
    <div>
        <Ueditor :value="ueditor.value" :config="ueditor.config" ref="ue"></Ueditor>
        <input type="button" value="显示编辑器内容(从控制台查看)" @click="returnContent">
      </div>

</template>

<script>
import Ueditor from "../../base/ueditor/ueditor";
export default {
  data() {
    return {
      dat: {
        content: "",
      },
      ueditor: {
        value: "编辑默认文字",
        config: {}
      }
    };
  },
  methods: {
    returnContent() {
      this.dat.content = this.$refs.ue.getUEContent();
      console.log(this.dat.content);
    },
    showContent() {
      this.show = !this.show;
    }
  },
  components: {
    Ueditor
  }
};
</script>

下面来看看要实现的效果:

技术分享图片

 

以上是关于在vue中使用Ueditor的主要内容,如果未能解决你的问题,请参考以下文章

在Vue2.0中集成UEditor 富文本编辑器

vue 中 使用百度编辑器 UEditor

在vue中使用Ueditor

vue中使用Ueditor编辑器

vue中使用Ueditor编辑器

vue 使用Ueditor富文本的配置