How to get the current position of the caret in an iframe editor ?

Question

0.00/5 (No votes)

See more:

When the design mode is on of an iframe body then if we press the enter key we a div is appended to the document body like this:

<body>

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

Which is pretty much good for my use case as i am working on a text editor with a support for code block and blockquote along with bold,italics,underline.

My approach to apply Blockquote and CodeBlock is that i have defined a CSS and would add the classes to the respective div/code element

In order to apply the classes on the div, i need to know that where exactly is my caret at . So for example i am in the body and added some text for blockquote then how can i know at which child element (div) holds my text to be formatted.

What I have tried:

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

editor.document.designMode = 'On';

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

I tried it via a click, whenever i click on the editor i can get the position of the child clicked :-

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);  
    }    
    

}

After that i can successfully add a class to this div :

function applyBlockquote(){

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

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

}

But what if a user adds some extra children in the body by pressing enter ? I tried playing with the MutationObserver to detect what kind of changes are being done in the Node but couldn't find how to get the current position of the caret/cursor ?

// 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();

A very close reference/example to my idea is this Markdown Editor :

I can see that a hidden text area is being used here.(Image of Inspected Element)

Posted 28-Oct-18 1:26am

Member 12731696

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)