在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

最新文章

热门文章