YUI编辑器（RTE）：如何用<span>包装选择而不会丢失格式？

Question

好吧，所以我有一个问题，我一直在努力上个星期左右，并尝试了一切我知道或可以找到。我正在使用YUI 2.x编辑器，用户将在其中进行大量格式化。我在页面上有一个外部按钮，当用户点击它时，需要将所选文本包装在<span>中，但它必须执行此操作而不是丢失任何格式。出于某种原因做如下喜欢擦除所有格式的选择：

var sel = myEditor._getSelection(); 
var newEl = '<span>' + sel + '</span>'; 
myEditor.execCommand('inserthtml', newEl); 

因此，要解决这个问题，我认为最好的方法是使用_getSelectedElement()随着_createCurrentElement('span')加回的风格元素。下面是我到目前为止有：

function createSpan() { 
    var el = myEditor._getSelectedElement(); 
    var sel = myEditor._getSelection(); 

    // IE support 
    if (document.selection) { 
    sel = myEditor._getDoc().selection.createRange(); 
    newText = sel.text; 
    } 
    else { 
    newText = sel; 
    } 

    // Create the new element with the old styles 
    myEditor._createCurrentElement('span', {color: el.style.color, fontSize: el.style.fontSize, fontFamily: el.style.fontFamily}); 
    myEditor._selectNode(myEditor.currentElement[0]); 
    myEditor.currentElement[0].innerHTML = newText; 
    return myEditor.currentElement[0]; 
} 

这个伟大的工程，如果_getSelectedElement()正确用正确的方式返回的元素，但我发现，如果用户选择整个段落，它将返回BODY。而且由于BODY没有任何款式，他们又会迷路。

基本上，我需要它的行为像工具栏上的粗体按钮，但使用<span>而不是<b>。为什么这么难？

任何想法或建议吗？谢谢！

Answer 1

原来所有你需要做的是：

myEditor._createCurrentElement('span'); 
newEl = myEditor.currentElement[0]; 

_createCurrentElement内部创建与当前选择的innerHTML的一个新元素，并保留格式为您服务。非常简单......感谢Dav Glass的帮助。 看看他的帖子在这里：http://yuilibrary.com/forum/viewtopic.php?f=89&t=5436&p=18659#p18659

Answer 2

试试这个：

function toHTML(docFragment) { 
    var d = this._getDoc().createElement('div'); 
    d.appendChild(docFragment); 
    return d.innerHTML; 
} 

var ie = false; 
if (this._getWindow().getSelection) { 
    var selectedText = this._getWindow().getSelection(); 
} else if (this._getDoc().getSelection) { 
    var selectedText = this._getDoc().getSelection(); 
} else if (this._getDoc().selection) { 
    ie = true; 
    var selectedText = this._getDoc().selection.createRange(); 
} 
if (!ie) { 
    var theParent = selectedText.getRangeAt(0).cloneContents(); 
    var selection = toHTML(theParent); 
} else { 
    var selection = selectedText.htmlText; 
} 

var span = this._getDoc().createElement('span'); 

span.innerHTML = selection; 

if (!ie) { 
    var rang = selectedText.getRangeAt(0); 
    if ($.browser.mozilla) { 
     var rangeObj = this._getDoc().createRange(); 
     var documentFragment = rangeObj.createContextualFragment(span.outerHTML); 
    } else { 
     var d = this._getDoc().createElement('div'); 
     d.innerHTML = span.outerHTML; 
     var docFrag = this._getDoc().createDocumentFragment(); 
     while (d.firstChild) { 
      docFrag.appendChild(d.firstChild); 
     }; 
     var documentFragment = docFrag; 
    } 
    rang.collapse(false); 
    rang.deleteContents(); 
    rang.insertNode(documentFragment); 
} else { 
    this._getDoc().selection.createRange().pasteHTML(span.outerHTML); 
}