YUI 编辑器 (RTE)：如何用 包装选择而不丢失格式？答案

【问题标题】：YUI editor (RTE): How to wrap selection with a and NOT lose formatting?YUI 编辑器 (RTE)：如何用 包装选择而不丢失格式？
【发布时间】：2023-03-09 21:46:01
【问题描述】：

好的，所以我遇到了一个问题，我在过去一周左右一直在解决问题，并且尝试了我所知道或可以找到的所有内容。我正在使用 YUI 2.x 编辑器，用户将在其中进行一些繁重的格式化。我在页面上有一个外部按钮，当用户单击它时，它需要将选定的文本包装在  中，但它必须这样做不丢失任何格式。出于某种原因，执行以下操作会删除所选内容中的所有格式：

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 没有任何样式，它们再次迷路了。

基本上，我需要它的行为类似于工具栏上的粗体按钮，但使用 而不是。为什么这么难？

有什么想法或建议吗？谢谢！

【问题讨论】：

标签： javascript editor yui rte yui-editor

【解决方案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

【讨论】：

其实这还是不行。任何帮助将不胜感激。

【解决方案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);
}

【讨论】：