Редактор 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 и сохраняет форматирование для вас. Так просто ... спасибо Дэву Гласс за помощь. Проверьте свой пост здесь: 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); 
}