Member 12731696 Ответов: 0

Как получить текущую позицию каретки в Редакторе iframe ?

Когда включен режим проектирования тела iframe то если мы нажмем клавишу enter то div будет добавлен к телу документа следующим образом:


<body>

<div><br/></div>
</body>




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

Мой подход к применению Blockquote и CodeBlock заключается в том, что я определил CSS и добавил бы классы к соответствующий элемент div/кода

Чтобы применить классы на div, мне нужно знать, где именно находится моя каретка . Так, например, я нахожусь в теле и добавил некоторый текст для blockquote, тогда как я могу знать, в каком дочернем элементе (div) содержится мой текст для форматирования.

Что я уже пробовал:

var editor = document.getElementById("rtf-iframe").contentWindow.document.body;
editor.document.designMode = 'On';
var editor = document.getElementById("rtf-iframe").contentWindow.document.body;


Я попробовал это сделать с помощью щелчка мыши, всякий раз, когда я нажимаю на Редактор, я могу получить позицию ребенка, щелкнутого :-

var currentLineClicked;


function setIndexOfClicked() {
    for (var i = 0, len = editor.children.length; i < len; i++)
    {
        (function(index){
            editor.children[i].onclick = function(){
                //   alert(index)  ;
                  currentLineClicked =index;
                  console.log("clicked div index is :"+currentLineClicked);  
            }    
        })(i);  
    }    
    

}



После этого я могу успешно добавить класс в этот div :

function applyBlockquote(){

    var currentIndex = currentLineClicked;
    console.log(editor.children[currentIndex]);

    editor.children[currentIndex].className = "bquote";

}



Но что делать, если пользователь добавляет несколько дополнительных детей в тело, нажав enter ? Я попробовал поиграть с ним. Mutationobserver'а чтобы определить, какие изменения происходят в узле, но не удалось найти, как получить текущее положение курсора/курсора ?

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList, observer) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();



Очень близкая ссылка/пример к моей идее такова Редактор Markdown :

Я вижу, что здесь используется скрытая текстовая область.(Изображение проверяемого элемента)

0 Ответов