Не удается ввести контент, содержащий вставленный элемент div - PullRequest
Новая
       28

Не удается ввести контент, содержащий вставленный элемент div

0 голосов
/ 05 августа 2020

Контекст

Я использую rangy для вставки текста в contenteditable div, но проблема, с которой я столкнулся, относится к non-rangy коду. Когда я нажимаю кнопку жирным шрифтом , я хочу, чтобы тег <b> был вставлен в мой контентный div. Когда пользователь нажимает на contenteditable div или вводит в него типы, я использую rangy для установки нового диапазона: 

$(".article").on("click keydown", debounce(function() { //create range to be used later on article click and keydown

    range = getFirstRange(); //get selection/range

}, 200));

После установки этого диапазона при нажатии кнопки bold я вставьте тег <b> в div, вызвав функцию insertNodeAtRange(range, "b"), которая принимает диапазон и полужирный тег: 

function insertNodeAtRange(range, node) {

        if (range) { //if selection works

            var el = document.createElement(node);

            el.appendChild(document.createTextNode());
            range.insertNode(el);
            rangy.getSelection().setSingleRange(range);                 

        }

}

В результате теги <b></b> вставляются туда, где последний раз щелкнули по статье примерно так: 

<div contenteditable="true">
    <div>Random content</div>
    <div><b></b></div> //mouse was here last, so tags are inserted inside of div
</div>

Однако, когда я действительно начинаю печатать на том месте, где был мой курсор, теги <b></b> не применяются; текст выходит за пределы тегов, например: 

<div contenteditable="true">
    <div>Random content</div>
    <div><b></b> typing random content that is not contained in the bold </div>
</div>

Когда он должен быть внутри тегов <b></b>: 

<div contenteditable="true">
    <div>Random content</div>
    <div><b> typing random content that is not contained in the bold </b></div>
</div>

Вопрос

Как мне набирать внутри полужирных тегов, когда я вставляю их в контентный div вместо того, чтобы печатать вне тегов? Сообщите мне, если возникнет путаница. Спасибо.

...