Vue中Neditor实现字数统计相关回调

Neditor实际上是基于Ueditor开发的,所以Ueditor理论上也可以实现同样功能,但笔者未做测试

Vue版本Neditor传送门

参考neditor.all.js第15184行,可得知有字数统计事件

UE.plugins["wordcount"] = function() {
  var me = this;
  me.setOpt("wordCount", true);
  me.addListener("contentchange", function() {
    me.fireEvent("wordcount");
  });
  ...

参考32153行,有字数统计超出事件

var count = editor.getContentLength(true);
if (count > max) {
   countDom.innerHTML = errMsg;
   editor.fireEvent("wordcountoverflow");
} else {
   countDom.innerHTML = msg
   .replace("{#leave}", max - count)
   .replace("{#count}", count);
}

在Vue组件中,在Neditor实例化时注册这2个事件的回调

  // 实例化编辑器
    _initEditor(value) {
      this.$nextTick(() => {
        this.init();
        console.log(this.mixedConfig);
        this.editor = window.UE.getEditor(this.id, this.mixedConfig);
        // this.readyValue = value;
        this.editor.addListener("ready", () => {
          this.isReady = true;
          this.$emit("ready", this.editor);
          this.editor.setContent(this.readyValue);
          //当编辑器加载完成时,统计当前字数
          this.$emit("wordcount", this.editor.getContentLength(true));
          //添加编辑器字数超出事件回调
          this.editor.addListener("wordcountoverflow", () => {
            this.$emit("wordcountoverflow");
          });
          //添加字数统计事件回调
          this.editor.addListener("wordcount", () => {
            this.$emit("wordcount", this.editor.getContentLength(true));
          });
          this.editor.addListener("contentChange", () => {
            this.$emit("input", this.editor.getContent());
          });
        });
      });
    },

使用

<!-- vue template -->
<template>
 		<neditor
            ref="neditor"
            :config="ueditorConfig"
            :destroy="false"
            v-model="form.content"
            @wordcountoverflow="form.contentOverflow = true"
            @wordcount="wordCount"
          ></neditor>
</template>