如何为Toast UI Editor设置字符限制？

由于官方没有内置的maxlength配置项，可通过监听编辑器的内容变更事件，手动实现字符校验与限制，具体步骤如下：

• 监听内容变更事件
  利用Toast UI Editor的change事件，同时补充监听paste事件覆盖手动输入和粘贴场景，确保所有内容变更都会触发校验逻辑。

• 计算内容长度
  根据数据库的限制类型选择对应计算方式：

  • 若限制为字符数：直接获取编辑器的Markdown源内容长度，用editor.getMarkdown().length
  • 若限制为字节数（如数据库字段按字节限制）：将内容转为Blob计算字节数，new Blob([editor.getMarkdown()]).size

• 超出限制时处理
  当内容长度超过设定值时，截断到允许的最大长度并重新设置回编辑器，同时给用户清晰提示。

示例代码 #

// 初始化编辑器
const editor = new toastui.Editor({
  el: document.querySelector('#editor'),
  initialEditType: 'markdown',
  height: '500px'
});

// 设定字符限制（示例为2000字符，可根据数据库字段调整）
const MAX_LENGTH = 2000;

// 抽离校验逻辑为复用函数
function checkContentLength() {
  const currentContent = editor.getMarkdown();
  const currentLength = currentContent.length;

  if (currentLength > MAX_LENGTH) {
    // 截断内容到最大限制长度
    const truncatedContent = currentContent.slice(0, MAX_LENGTH);
    // 临时关闭事件监听避免循环触发
    editor.off('change', checkContentLength);
    editor.setMarkdown(truncatedContent);
    editor.on('change', checkContentLength);
    // 提示用户（可替换为更友好的UI提示）
    alert(`内容已超出${MAX_LENGTH}字符限制，已自动截断`);
  }
}

// 绑定内容变更事件
editor.on('change', checkContentLength);

// 处理粘贴场景，防止大内容粘贴绕过实时校验
editor.getEditorElement().addEventListener('paste', () => {
  setTimeout(checkContentLength, 0);
});

注意事项 #

• 截断时可能破坏Markdown语法完整性（如未闭合的链接、列表），若需兼顾语法，可在截断后做简单修正（如移除末尾未闭合的标记），或优先提示用户手动删减。
• 若数据库按字节限制，需注意中文等多字节字符的计算，new Blob([content]).size可准确获取UTF-8编码下的字节数。
• 提示方式可替换为页面内的内嵌提示条，提升用户体验。

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