Vue.js结合Ueditor富文本编辑器的实例代码

this.editor.ready(function f2() {
this.editor.setContent(this.value);

this.editor.addListener("contentChange", function () {
const wordCount = this.editor.getContentLength(true);
const content = this.editor.getContent();
const plainTxt = this.editor.getPlainTxt();
this.$emit('input', { wordCount: wordCount, content: content, plainTxt: plainTxt });
}.bind(this));

this.$emit('ready', this.editor);
}.bind(this));
});
},
};
</script>

<style>
body{
background-color:#ff0000;
}
</style>

3. 编辑器的使用

使用编辑器模板的时候我需要通过props传入config以及初始文本value。

<template xmlns:v-on="http://www.w3.org/1999/xhtml">
 <div class="edit-area">
  <ueditor v-bind:value=defaultMsg v-bind:config=config v-on:input="input" v-on:ready="ready"></ueditor>
 </div>
</template>
<script>
 import ueditor from './ueditor.vue';
 export default {
 components: {
  ueditor,
 },
 data() {
  return {
  defaultMsg: '初始文本',
  config: {
   initialFrameWidth: null,
   initialFrameHeight: 320,
  },
  };
 },
 };
</script>

如果需要让Ueditor上传图片的话，还需要在后台配置一个接口。这部分还没有时间研究，等过几天补上