собственный RTE - получить и установить Style of Selection

Мне нужно создать свой собственный RTE с помощью javascript или JQuery. Но я не мог найти хороший, прокомментированный, рабочий пример или учебник, только отдельные фрагменты кода. Но я не хочу просто решения, я хочу понять, что я делаю!

Я знаю, как сделать выделенный текст полужирным (получить выделение, создать диапазон, а затем вокруг него добавить b-тег или тег span, включая вес шрифта: полужирный.)

Но как я могу получить все стили любого выбора?

Пример: текст текст текст [//] текст текст текст ([//] должно быть изображением) Теперь пользователь выбирает текст, включая изображение, затем выбранный HTML-код выглядит как «текст текст текст текст текст текст текст». Теперь я не мог просто обойти выбранный диапазон с помощью тега.

Другой пример: aaa bbb ccc ddd Если я выбираю «cc d», я получаю «cc» следующим образом: cc Но когда я выбираю «ccc», я получаю просто 'ccc'. Но я должен знать все стили выбора, чтобы выделить кнопку (например, жирным шрифтом).

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

Я надеюсь, что смог помочь мне! С наилучшими пожеланиями Ленни Полезно Бесполезно

Вот некоторый код, который у меня есть (но этот код все равно не решает мою проблему)

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)

}