自己的 RTE - 获取和设置选择样式

Question

我必须使用 javascript 或 JQuery 构建自己的 RTE。 但是我真的找不到一些好的、评论的、工作的例子或教程，只是一段代码。但我不想要一个解决方案，我想了解我在做什么！

我知道如何使选定的文本变为粗体（获取选择，创建一个范围，然后在它周围加上一个 b-tag 或 span-tag，包括 font-weight:bold。）

但是我怎样才能得到任何选择的所有样式呢？

示例：文本文本文本[//]文本文本文本（[//]应该是图像） 现在用户选择包含图像的文本，然后选择的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)

}

Answer 1

这是一个指针：execCommand 允许您查询插入符号位置文本的粗体或斜体。