wangEditor如何禁止输入空格？

Question

如题，我的插件一输入空格就会数量统计就会增加一个字符，但是内容却不会多出个空格，标签内会多个&/nbsp;失焦后还获取不了焦点，该如何直接禁止输入空格？

<Editor
    :id="`editor${num}`" :ref="`wangeditor${num}`" class="wangeditor-editor" :default-config="editorConfig" :editor-id="`wangeditor${num}`"
    @onChange="onChange" @onCreated="editorCreated" @onFocus="onFocus" @onBlur="onBlur"
/>

onChange: debounce(function(editor) {
    // @弹框移动
    this.$nextTick(() => {
        try {
            this.position = editor.getSelectionPosition();
            // 保持输入内容在底部
            const wang = document.getElementById(`wangeditor-container${this.num}`);
            wang.scrollTop = wang.scrollHeight;
        } catch (e) {
            console.error(e);
        }
    });

    
    if (this.isFirstChange) {
        this.isFirstChange = false;
    }
    this.getEditContent()
}, 500),
// 获取编辑框内容
getEditContent() {
    const msgList = this.editorIns.children
    let showText = '' // 显示的内容
    msgList.forEach(k => {
        k.children.forEach(m => {
            if (m.text) {
                showText += m.text
            }
        })
    })
    const echoText = this.editorIns.getHtml() // 回显的内容
    this.$emit('getTextCont', showText, echoText)
},

Answer 1

要禁止wangEditor中输入空格，可以通过监听onchange事件并使用正则表达式替换空格实现。以下是如何在wangEditor中禁止输入空格的示例：

// 引入wangEditor
import WangEditor from 'wangeditor';

// 初始化editor
const editor = new WangEditor('#div1');

// 监听内容变化
editor.config.onchange = (newHtml) => {
  // 使用正则表达式替换所有空格
  const htmlWithoutSpaces = newHtml.replace(/\s/g, '');

  // 将内容设置回编辑器
  editor.txt.html(htmlWithoutSpaces);
};

// 创建编辑器
editor.create();

这段代码将删除编辑器中的所有空格。如果你只想禁止连续输入空格，可以使用以下正则表达式：

const htmlWithoutMultipleSpaces = newHtml.replace(/\s{2,}/g, ' ');

这将保留单个空格，但删除两个或更多连续空格。

Answer 2

显示前与输入后用正则将空白字符全部替换掉\s

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。