Summernote 专注于应用任何东西后的行开始

Summernote focusing on start of line after applying anything

提问人:Leon Kardaš 提问时间:11/17/2023 更新时间:11/17/2023 访问量:14

问:

我正在尝试使用一个简单的富文本编辑器,我正在尝试使用 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();
                        }
                    }
                }
            });
        }
    }

Highlighting text and pressing modification

After i click any modification

javascript jquery bootstrap-5 富文本编辑器 summernote

评论


答: 暂无答案