如何设置jQuery轻量富文本编辑器插件的行数与高度

解决方案 #

1. 修复初始化参数语法错误

你之前传入参数失效的核心原因是语法错误：height:100px写法不符合JS规范，非数字类型的参数值需要加引号声明为字符串，直接写100px会触发JS执行报错，导致富文本编辑器初始化完全失败。你写的height:5会被插件识别为5像素高度，不符合使用需求。

正确的初始化代码如下，可同时适配两个不同高度的编辑器实例：

$(document).ready(function() {  
    // 5行编辑器，按实际行高调整像素值，常规行高下5行约120px
    $("#fullDescription").richText({
        height: '120px'
    });
    // 10行编辑器，常规行高下约240px
    $("#otherEditor").richText({
        height: '240px'
    });
});

2. 优先级更高的CSS覆盖方案

如果插件参数仍不生效，可直接通过CSS强制指定编辑区高度，插件初始化后会隐藏原生textarea，生成类名为.richText-editor的可编辑容器，直接指定该容器样式即可：

/* 适配5行的第一个编辑器 */
#fullDescription + .richText .richText-editor {
    height: 120px !important;
    overflow-y: auto;
}
/* 适配10行的第二个编辑器 */
#otherEditor + .richText .richText-editor {
    height: 240px !important;
    overflow-y: auto;
}

添加overflow-y: auto后，内容超过容器高度时会自动出现滚动条，不会无限撑开页面高度。

3. 严格限制输入行数的补充方案

如果需要禁止用户输入超过指定行数的内容，可添加输入监听逻辑：

$('.richText-editor').on('input', function() {
    // 提前给两个编辑器的编辑区分别设置data-max-rows属性为5、10
    const maxRows = parseInt($(this).data('max-rows'));
    const lineHeight = parseInt($(this).css('line-height'));
    const maxAllowHeight = lineHeight * maxRows;
    if($(this).height() > maxAllowHeight) {
        document.execCommand('undo');
    }
});

内容的提问来源于stack exchange，提问作者Phil Freihofner