Вставка содержимого с span в задаче TinyMCE Editor

Question

Я пытался вставить текст с тегом span в Редактор TinyMCE, где находится курсор, но после нажатия ENTER я получаю каждый раз тег тега span.

Это моя функция для вставки текста скнопка:

function Insert(){
    tinymce.activeEditor.execCommand('mceInsertContent', false, '<span class="bgTest" data-prefix="ABC">This is a inserted text</span> ');
}

Это вывод моего браузера: Imgur

Answer 1

Так что, если я правильно понимаю, функция отлично работает с вашей кнопкой.Но затем, когда вы нажимаете Enter во время набора текста, он не отображается должным образом?

Таким образом, похоже, что проблема заключается в поведении клавиш ввода по умолчанию.Вы должны предотвратить поведение по умолчанию клавиши ввода.Вам нужно preventDefault().

Я не изменил вашу функцию Insert(), поэтому она все равно будет работать с вашей кнопкой.

Но я добавил keydown прослушиватель событий к .tinymce, который будет preventDefault() нормальным поведением клавиши ввода (то есть добавить разрыв строки).Тогда вы активируете свою функцию Insert().

function Insert(){
    tinymce.activeEditor.execCommand('mceInsertContent', false, '<span class="bgTest" data-prefix="ABC">This is a inserted text</span> ');
}

document.querySelector(".tinymce").addEventListener("keydown", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        Insert();
    }
});

Надеюсь, это поможет.Дайте мне знать, если вам нужна дополнительная помощь :).