我有一个应用程序使用 Toast UI Editor 来允许用户输入 markdown。 Markdown 存储在数据库中,并且字段长度有限制。因此,我希望在客户端进行某种验证,以防止用户超出字符限制,其工作原理类似于
maxlength
HTML 属性。
到目前为止,我无法在文档中找到任何指定这一点的选项。如何设置编辑器的字符限制?
这是一个基本的实现,您可能需要根据您的具体要求进一步定制它,例如处理不同类型的内容或提供更人性化的反馈。
document.addEventListener('DOMContentLoaded', function() {
var editor = new toastui.Editor({
el: document.querySelector('#editor'),
height: '300px'
});
var maxCharacters = 1000; // Change this to your desired character limit
editor.on('change', function() {
var content = editor.getMarkdown();
var currentLength = content.length;
if (currentLength > maxCharacters) {
// Trim the content to the maximum length
var trimmedContent = content.substring(0, maxCharacters);
editor.setMarkdown(trimmedContent);
// Optionally, you can provide feedback to the user
alert('Maximum character limit reached');
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Toast UI Editor with Character Limit</title>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css">
</head>
<body>
<div id="editor"></div>
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
</body>
</html>