老师好, 我想请教一个关于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 功能,当初不应该加的,加上了反而出现了很多不好解决的问题。
00
相似问题