问题
Ok so I've got a problem I've been working on for the last week or so and have tried everything I know or could find. I am using YUI 2.x editor where users will be doing some heavy formatting. I have an external button on the page that needs to wrap the selected text in a <span>
when the user clicks it, but it must do this without loosing any formatting. For some reason doing the following likes to erase all of the formatting in the selection:
var sel = myEditor._getSelection();
var newEl = '<span>' + sel + '</span>';
myEditor.execCommand('inserthtml', newEl);
So to solve this, I think the best way is to use _getSelectedElement()
along with _createCurrentElement('span')
to add back the style elements. Here's what I've got so far:
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];
}
This works great if _getSelectedElement()
properly returns the element with the correct styles, but I have found that if a user selects an entire paragraph, it will return the BODY
. And since the BODY
doesn't have any styles, they again get lost.
Basically, I need it to behave like the Bold button on the toolbar but use a <span>
and not <b>
. Why is this so hard?
Any ideas or suggestions? Thanks!
回答1:
Turns out all you have to do is:
myEditor._createCurrentElement('span');
newEl = myEditor.currentElement[0];
_createCurrentElement
internally creates a new element with the current selection as the innerHTML and preserves the formatting for you. So simple...thanks to Dav Glass for his help.
Check out his post here: http://yuilibrary.com/forum/viewtopic.php?f=89&t=5436&p=18659#p18659
回答2:
Try this:
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);
}
来源:https://stackoverflow.com/questions/4077806/yui-editor-rte-how-to-wrap-selection-with-a-span-and-not-lose-formatting