老师好, 我想请教一个关于wangEditor的问题

来源:1-2 框架面试导学

weixin_慕斯卡4157084

2023-03-02

就是关于wangEditor, 我有个问题时关于maxLength
当我复制内容进入到编辑框时maxLength配置总是失效,但是手动输入的话又没有问题。
请问您有什么好办法解决吗?
如果方便能私聊一下吗? 万分感谢
下面是我的页面
图片描述

限制字数为100
下面贴出了我的代码

<template>
  <div>
    <div class="editor" style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :default-config="toolbarConfig"
      />
      <!-- 编辑器 -->
      <Editor
        id="editorContainer"
        v-model="html"
        :mode="'simple'"
        style="height: 400px; overflow-y: hidden"
        :default-config="editorConfig"
        @onChange="onChange"
        @onCreated="onCreated"
        @onMaxLength="onMaxLengthCustome"
      />
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  name: 'MyEditor',
  components: { Editor, Toolbar },
  props: {
    value: {
      type: String,
      default: ''
    },
    customeDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editor: null,
      editor1: null,
      html: this.value,
      aleadyInputNumber: 0,
      toolbarConfig: {
        toolbarKeys: [
          'bold', // 粗体
          'fontSize', // 字号
          'color', // 文字颜色
          'insertLink' // 插入链接
        ],
        excludeKeys: ['bgColor', 'bulletedList']
      },
      editorConfig: {
        maxLength: 100,

        placeholder: '请输入内容...',
        // autoFocus: false,
        // 所有的菜单配置,都要在 MENU_CONF 属性下
        MENU_CONF: {
          fontSize: {
            fontSizeList: ['12px', '14px', '16px', '18px', '20px']
          }
        }
      }
    }
  },

  beforeDestroy() {
    const { editor } = this
    if (editor == null) return
    editor.destroy() // 组件销毁时,及时销毁 editor ,重要!!!
  },
  methods: {
    onMaxLengthCustome(editor) {
      console.log('超过了', editor.getText())
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
      console.log('this.editor: ', this.editor)
    },
    onChange(editor) {
      console.log('onChange', editor.getText().length) // onChange 时获取编辑器最新内容

      this.$emit('input', editor.getHtml())
    }
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="sass"></style>
写回答

1回答

双越

2023-03-03

关于编辑器的粘贴,则是一个比较头疼的问题。和粘贴相关的很多地方,目前都还有 bug ,github issues 也积累了好些,我还没精力去处理。

我目前也没啥好办法。

其实我现在都有点后悔在 wangEditor5 加入 maxlength 功能,当初不应该加的,加上了反而出现了很多不好解决的问题。

0
0

2024版 前端框架及项目面试 聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4665 学习 · 1644 问题

查看课程