CODEWITHSUNDEEP
javascriptjqueryrangeselectionrte
Leo
Leo

Reputation: 1768

own RTE - get and set Style of Selection

I have to build my own RTE with javascript or JQuery. But I couldn't really find some good, commented, working example or tutorial just single pieces of code. But I don't want just a solution, I want understand what I'm doing!

I know how to make a selected Text bold (get the selection, create a range and then around it whit a b-tag or span-tag including a font-weight:bold.)

But how could I get all styles of any selection?

Example: text text text [//] text text text ( [//] should be an image ) Now the user selects the text including the image, then the selected html code is like 'text text text text text text'. Now i could not simple around the selected range with an tag.

Other example: aaa bbb ccc ddd If i select 'cc d' I get the 'cc' like that: cc But when I'm selecting 'ccc' I get just 'ccc'. But I have to know all the styles of the selection to highlight the (eg. bold-) button.

To sum up, I've to know how I handle (getting) / setting of styles for selections.

I hope could help me! Best Regards Lenny

Here some code I actually have (but this code doesn't fix my problem anyway)

function getSelectedNodes_txt(){
var sel = window.getSelection();
try{var frag=sel.getRangeAt(0).cloneContents()}catch(e){return(false);}
var tempspan = document.createElement("span");
tempspan.appendChild(frag);
console.log(tempspan);
window.selnodes = tempspan.childNodes;
var output = ''
for(var i=0, u=selnodes.length;i<u;i++){
    if (typeof selnodes[i].tagName !== 'undefined'){
      output += "A "+selnodes[i].tagName+" was found";
      output += " - Containing: "+selnodes[i].textContent+"\n";
    }else{
        output += "Some text was found: '"+selnodes[i].textContent+"'";
        output += " - Parent: '"+selnodes[i].parentNode.tagName+"'\n";
     }
    //do something cool with each element here...
}
return(output)

}

Upvotes: 2

Views: 322

Answers (1)

Kernel James
Kernel James

Reputation: 4064

Here's a pointer: execCommand allows you to query the boldness or italicness of the text at the caret position.

Upvotes: 1

Related Questions