拥有RTE - 获取并设置选择样式

时间:2012-10-30 09:05:59

标签: javascript jquery range selection rte

我必须使用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)

}

1 个答案:

答案 0 :(得分:1)

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