Éditeur YUI (RTE): Comment envelopper la sélection avec un <span> et ne pas perdre le formatage?

Question

Ok, j'ai un problème sur lequel je travaille depuis une semaine et j'ai essayé tout ce que je sais ou que j'ai pu trouver. J'utilise YUI 2.x éditeur où les utilisateurs vont faire un formatage lourd. J'ai un bouton externe sur la page qui doit envelopper le texte sélectionné dans un <span> lorsque l'utilisateur clique dessus, mais il doit le faire sans perdre tout formatage. Pour une raison de faire ce qui suit aime effacer toutes la mise en forme dans la sélection:

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

Donc, pour résoudre ce problème, je pense que la meilleure façon est d'utiliser _getSelectedElement() avec _createCurrentElement('span') pour rajouter les éléments de style. Voici ce que j'ai jusqu'à présent:

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]; 
} 

Cela fonctionne très bien si _getSelectedElement() retourne correctement l'élément avec les styles corrects, mais j'ai trouvé que si un utilisateur sélectionne un paragraphe entier, il retournera le BODY. Et puisque le BODY n'a aucun style, ils se perdent à nouveau.

Fondamentalement, j'ai besoin de lui pour se comporter comme le bouton Gras sur la barre d'outils, mais utiliser un <span> et non <b>. Pourquoi est-ce si difficile?

Des idées ou des suggestions? Merci!

Answer 1

Transforme tout ce que vous avez à faire est:

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

_createCurrentElement crée en interne un nouvel élément à la sélection actuelle comme innerHTML et conserve la mise en forme pour vous. Si simple ... merci à Dav Glass pour son aide. Consultez son poste ici: http://yuilibrary.com/forum/viewtopic.php?f=89&t=5436&p=18659#p18659

Answer 2

Essayez ceci:

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); 
}