如何限制 Textarea (Redactor) 中的行数？

Question

在达到最大行数后，我目前很难让 Enter 键停止在我的文本区域中创建新行。行数作为我制作的组件中的参数传递。我的 textarea 是一个 Redactor 编辑器，新行由换行符分隔。

我有一个计算的可观察值，它根据文本中换行符的数量确定行数，并且返回正确的值：

self.numberOfRows = ko.computed(function () {
        return self.value().split(/<br>/).length;
    }, this);

在我的 Redactor 设置中，我有一个 keydownCallback 函数，该函数将行数与最大行数进行比较，并且应该在达到或超过最大值时防止回车键创建新行：

keydownCallback: function (e) {
            if (e.keyCode > 48 || e.keyCode === 32) {
                if (self.remainingCharacters() <= 0) {                    
                    e.preventDefault();
                }
            } else if (e.keyCode === 13) {
                if (self.maxRows != null) {
                    if (self.numberOfRows() >= self.maxRows) {
                        e.preventDefault();
                    }
                }
            }
        },

回调函数的第一部分限制了字符数并且工作正常，但是回车键仍然会创建新行。我还尝试了 "return false;" 而不是 preventDefault，并且我还在 preventDefault 之前尝试了 stopPropagation，但没有成功。我不关心用户将值粘贴到文本区域，也不关心自动换行。建议？

分离回调：

        enterCallback: function(e) {
            if (self.maxRows != null) {
                if (self.numberOfRows() >= self.maxRows) {
                    return false;
                }
            }
        },
        keydownCallback: function (e) {
            if (e.keyCode > 48 || e.keyCode === 32) {
                if (self.remainingCharacters() <= 0) {
                    e.preventDefault();
                }
            }
        },

Answer 1

更新

有机会尝试使用 Redactor 并注意到当我按下 return 时，没有插入   而是创建了新的  标签。空段落将包含  。所以实际的 textarea 值是这样的：

<h2>Foo</h2>
<p>Bar
</p>
<p>Buz
</p>

我整理了一个关于如何处理的最小概念证明

$('#content').redactor({
    focus: true,
    enterCallback: function(e)
    {
        var lines = this.code.get().split(/\r?\n/g).length;
        console.log(this.code.get(), lines);
        if (lines > 3) { // self.numberOfRows()
            return false;
        }
    },
    keydownCallback: function(e)
    {
        //
    }
});

我不确定按新行拆分是否比按 this.code.get().split(/<\/(p|h[1-6])>/).

这样的关闭标签拆分更可靠

我会更新 self.numberOfRows 函数内的正则表达式，以换行或结束标记分隔

原始答案

你检查过他们的 docs 了吗？ enter and keyup:

似乎有 2 个单独的回调

You can return false in this callback to prevent Redactor from handling Enter/Return key inputs. It allows you to develop custom handlers for this event.

$('#redactor').redactor({
    callbacks: {
        enter: function(e)
        {
            console.log(this.code.get());
            return false;
        }
    }   
});

此外，如果您查看他们的 Limiter plugin，它只是 return 错误：

if (count >= this.opts.limiter)
{
    return false;
}

如何限制 Textarea (Redactor) 中的行数？

How to limit number of lines in Textarea (Redactor)?

javascript

knockout.js

redactor