如何限制Textarea（Redactor）中的行数？

Question

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

我有一个计算出的 observable，它根据文本中的换行数确定行数，并返回正确的值：

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

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

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，但没有运气。我不关心用户将值粘贴到 textarea 中，也不关心自动换行。有什么建议吗？

单独的回调：

        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 并注意到当我按下回车键时，没有插入 <br>，而是创建了新的 <p> 标签。空段落将包含<p><br></p>。所以实际的 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 和 keyup 似乎有 2 个单独的回调：

您可以在此回调中返回 false 以防止 Redactor 处理 Enter/Return 键输入。它允许您开发自定义 此事件的处理程序。

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

另外，如果你查看他们的Limiter plugin，它只会返回 false：

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