Как установить позицию курсора на предыдущую позицию после нажатия кнопки в элементе contenteditable (div)? - PullRequest
Новая
       47

Как установить позицию курсора на предыдущую позицию после нажатия кнопки в элементе contenteditable (div)?

0 голосов
/ 05 ноября 2019

Я создаю собственный редактор wysiwyg.

У меня есть этот простой html 

<div contenteditable="true" class="editor"></div>

Когда я выбираю текст в div:

Selected Text

и нажмите кнопку «B», чтобы выделить выделенный текст:

Bolded text

Мой курсор находится в первом ряду, перед словом «привет». Я хочу, чтобы курсор был за жирным текстом.

Эта функция вызывается, когда я нажимаю на кнопку: (Элемент параметра: "b") 

    function handleToolbarButtonClick(element) {
        let selection = window.getSelection();
        let editor = $('.wysiwyg-editor .editor[contenteditable]');

        if (selection.baseOffset === selection.anchorOffset &&
            selection.baseOffset === selection.extentOffset &&
            selection.baseOffset === selection.focusOffset) {
            //Toggle the html element tag.
            Wysiwyg.config.tags[element].enabled = Wysiwyg.config.tags[element].enabled
                ? false
                : true;
        } else {
            //Wrap the selected text
            wrapSelectedText(element);
        }

        //Focus editor to set the cursor position
        let range = new Range();

        editor.focus();

    }

Я хочу включить жирный стиль, когда я нажимаю кнопку, и контент не выбирается. Выбран ли контент, я хочу обернуть контент с помощью этой функции. 

    function wrapSelectedText(wrapElement) {
        if (window.getSelection) {
            // not IE case
            let selectedText = window.getSelection();
            let selectedRange = selectedText.getRangeAt(0);

            let newElement = document.createElement(wrapElement);
            let documentFragment = selectedRange.extractContents();
            newElement.appendChild(documentFragment);
            selectedRange.insertNode(newElement);

            selectedText.removeAllRanges();
        } else if (document.selection && document.selection.createRange && document.selection.type !== "None") {
            // IE case
            let range = document.selection.createRange();
            let selectedText = range.htmlText;
            let newText = '<' + wrapElement + '>' + selectedText + '</' + wrapElement + '>';
            document.selection.createRange().pasteHTML(newText);
        }
    }

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

Знаете ли вы, как?

И когда я нажимаюи выделенный текст выделен жирным шрифтом, знаете ли вы хороший трюк для удаления жирного тега?

С уважением

PS: я создал эту функцию на codepen Пример

...