提问人:Leon Kardaš 提问时间:11/17/2023 更新时间:11/17/2023 访问量:14
Summernote 专注于应用任何东西后的行开始
Summernote focusing on start of line after applying anything
问:
我正在尝试使用一个简单的富文本编辑器,我正在尝试使用 Summernote 实现这一点。JQuery 和 Bootstrap 都是导入的。当我在 HTML 中使用 Summernote RTE 时,它可以完美地工作。但是现在我需要使用 Javascript 创建许多动态 RTE。我使用命令式 JS 创建 RTE,它出现了,然后我初始化它,我看起来应该这样做。它还可以像应有的那样保存。但是,每当您尝试说粗体、斜体或更改字体颜色时,它都会将您的光标发送到行的开头。如果您随后开始键入它,它可以工作,但我需要能够突出显示文本,然后应用修改。
这是我用于创建 RTE(稍后附加到文档)代码的 JS 函数:
function createRTE(lang, field_name = 'description', required = true) {
const rte_div = document.createElement('div');
const rte = document.createElement('div');
rte.setAttribute('name', 'content[' + global_counter + '][' + field_name +']['+lang+']');
rte.setAttribute('class', 'summernote');
rte.setAttribute('data-textarea', 'rte_' + global_counter + '_' + lang);
const rte_textarea = document.createElement('textarea');
rte_textarea.setAttribute('name', 'content[' + global_counter + '][' + field_name +']['+lang+']');
rte_textarea.setAttribute('id', 'rte_' + global_counter + '_' + lang);
rte_textarea.setAttribute('hidden', 'true');
rte_div.appendChild(rte_textarea);
rte_div.appendChild(rte);
return rte_div;
}
这是我的初始化:
function initSummernote(selector = '.summernote') {
if (!$.fn.summernote) {
return;
}
const elems = document.querySelectorAll(selector);
for (const elem of elems) {
$(elem).summernote({
dialogsFade: true,
dialogsInBody: true,
height: elem.dataset.height ?? 300,
fontNames: [],
maximumImageFileSize: 1024 * 1024,
tableClassName: 'table table-hover table-bordered',
toolbar: [
['actions', ['undo', 'redo']],
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph', 'hr']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
],
callbacks: {
onChange(contents) {
if (elem.dataset.textarea) {
document.getElementById(elem.dataset.textarea).value = $(elem).summernote('isEmpty') ? '' : contents.trim();
}
}
}
});
}
}
答: 暂无答案
评论