Блог

Главная - Вопросы по программированию - Exec Команда Inserth TML не вставляется в нужное место в редактируемом теге Div содержимого

Exec Команда Inserth TML не вставляется в нужное место в редактируемом теге Div содержимого

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

Мне нужно вставить изображение с помощью insertHtml execCommand внутри редактируемого содержимого div. Проверьте приведенный ниже код.

 function createRange(node, chars, range) {
    if (!range) {
        range = document.createRange()
        range.selectNode(node);
        range.setStart(node, 0);
    }

    if (chars.count === 0) {
        range.setEnd(node, chars.count);
    } else if (node amp;amp; chars.count >0) {
        if (node.nodeType === Node.TEXT_NODE) {
            if (node.textContent.length < chars.count) {
                chars.count -= node.textContent.length;
            } else {
                 range.setEnd(node, chars.count);
                 chars.count = 0;
            }
        } else {
            for (var lp = 0; lp < node.childNodes.length; lp  ) {
                range = createRange(node.childNodes[lp], chars, range);

                if (chars.count === 0) {
                   break;
                }
            }
        }
   } 

   return range;
}

function setCurrentCursorPosition(chars) {
    if (chars >= 0) {
        var selection = window.getSelection();

        range = createRange(document.getElementsByTagName('div')[0].parentNode, { count: chars });

        if (range) {
            range.collapse(false);
            selection.removeAllRanges();
            selection.addRange(range);
        }
        
        document.execCommand('inserthtml', false, '<br><img id="img1" alt="" src="https://assets.justinmind.com/wp-content/uploads/2019/04/wireframe-examples-web-and-mobile-header.png" style="width:100%;"><br>');
    }
}  
 <div contenteditable="true">item 1<br>item 2<br><br>item 3<br>item 4<br>item 5<br>...</div>
<button id="addImage" type="button" onclick="setCurrentCursorPosition(24)">Add Image</button>

Как вы можете видеть, изображение вставляется не в том месте. Это пример, но давайте предположим, что пользователь установит курсор в позицию 24, а затем добавит изображение. Изображение должно быть вставлено после части «item 4», но перед этим вставляются символы, что означает, что он рассматривает html-часть, а не только текст, и помещает изображение в неправильную часть. Почему? Что я делаю не так?

Ответ №1:

Он считает возвраты каретки в виде символов. Если вы измените положение курсора на 29, он попадет точно в нужное место.

Если вы хотите увидеть это в действии, просто запустите фрагмент кода, поместите курсор перед пунктом 1, затем нажмите клавишу со стрелкой вправо 29 раз, и вы окажетесь сразу после пункта 4

Комментарии:

1. привет.. Я знаю, что мог бы изменить позицию, но я предполагаю, что пользователь установит позицию курсора после «элемента 4», а затем добавит изображение.. это не добавляет изображение в нужное место..

2. Я скопировал ваш код во внешний HTML-файл, и он работает так, как задумано. Даже несмотря на то, что опубликованный вами фрагмент кода не работает. Очень странно.