Javascript getSelection

Question

我还有一个关于getSelection的问题。

我正在开发一个WYSIWYG文本编辑器，并使用自定义函数将HTML效果应用于选定的文本。到目前为止一切都很顺利。

当前，它的工作方式是无论您突出显示什么，它用您选择的内容替换文本区域中的整个文本体。我试图找出如何使它应用所需的效果，而不移除身体的其他所有东西。

有什么想法？

function button(type) {
    var txt = '';

    editor_body = document.getElementById('editor').contentWindow.document;

    if (editor_body.getSelection()) {
        txt = editor_body.getSelection();
    } else if (editor_body.selection.createRange()) {
        txt = editor_body.selection.createRange();
    } else return;

    switch (type) {
        case "bold": txt = '<b>' + txt + '</b>'; break
        case "italic": txt = '<i>' + txt + '</i>'; break
        case "underline": txt = '<u>' + txt + '</u>'; break
        case "strike": txt = '<strike>' + txt + '</strike>'; break
        case "supscript": txt = '<sup>' + txt + '</sup>'; break
        case "subscript": txt = '<sub>' + txt + '</sub>'; break
        case "alignleft": txt = '<div style="text-align: left;">' + txt + '</div>'; break
        case "aligncenter": txt = '<div style="text-align: center;">' + txt + '</div>'; break
        case "alignright": txt = '<div style="text-align: right;">' + txt + '</div>'; break
        case "alignjustify": txt = '<div style="text-align: justify;">' + txt + '</div>'; break
        case "ol": txt = '<ol>' + txt + '</ol>'; break
        case "ul": txt = '<ul>' + txt + '</ul>'; break
        case "insertlink": insertlink = prompt("Enter image URL:", "http://"); if ((insertlink != null) && (insertlink != "")) {txt = '<a href="' + insertlink + '">' + txt + '</a>'; } break
        case "insertimage": insertimage = prompt("Enter image URL:", "http://"); if ((insertimage != null) && (insertimage != "")) {txt = '<img src="' + insertimage + '">'; } break
        case 'insertvideo': insertvideo = prompt("Enter video URL:", "http://"); if ((insertvideo != null) && (insertvideo != "")) {txt = '<object type="application/x-shockwave-flash" data="' + insertvideo + '" width="640" height="385"><param name="movie" value="' + insertvideo + '" /></object>';} break
    }

    editor_body.body.innerHTML = txt;
    document.getElementById('editor').contentWindow.focus();
}

function Start() {
    var e;

    document.getElementById('editor').contentWindow.document.designMode = "on";

    try {
        document.getElementById('editor').contentWindow.document.execCommand("styleWithCSS", false, "false");
    } catch (e) {
    }

    try {
        document.getElementById('editor').contentWindow.document.execCommand("undo", false, null);
        editormode = "true";
    } catch (e) {
        editormode = "false";
    }

    if (document.addEventListener) {
        document.addEventListener("mouseup", dismissmenu, true);
        document.getElementById("editor").contentWindow.document.addEventListener("mouseup", dismissmenu, true);
        document.addEventListener("keypress", dismissmenu, true);
        document.getElementById("editor").contentWindow.document.addEventListener("keypress", dismissmenu, true);
    } else if (document.attachEvent) {
        document.attachEvent("mouseup", dismissmenu, true);
        document.getElementById("editor").contentWindow.document.attachEvent("mouseup", dismissmenu, true);
        document.attachEvent("keypress", dismissmenu, true);
        document.getElementById("editor").contentWindow.document.attachEvent("keypress", dismissmenu, true);
    }
}

Answer 1

几点想法：

每次执行自定义命令时，

1. 都会替换iframe主体的innerHTML，这是一个错误，原因有几个。一个是它将是缓慢的，特别是对于大量的内容。另一个是你会失去选择。另一个原因是，您可能会丢失添加到可编辑内容中的元素中的任何事件处理程序。
2. 大多数要应用的函数都在浏览器中具有内置命令，这些命令可以通过iframe的document的execCommand方法访问。为什么不用呢？它们将比您的等价物更快，保留所选内容，并将其添加到撤销stack.
3. window.prompt中，因为IE7默认禁用了它，给用户一个启用它的选项(如果幸运的话)。

更新

与其使用innerHTML，不如对所选内容中包含的DOM节点进行操作。您可以使用我自己的名为Rangy ( http://code.google.com/p.rangy )的库，它抽象了IE和其他浏览器的选择和范围对象之间的差异，还添加了一些在选定节点内处理的方便方法。下面是一个非常简单的示例，说明如何实现粗体命令(实际上，您希望检查每个区域是否已经完全粗体，并在包围它之前检查每个文本节点是否大胆)：

var iframe = document.getElementById("your_iframe");
var iframeDoc = iframe.contentDocument, iframeWin;
if (iframeDoc) {
    iframeWin = iframeDoc.defaultView;
} else {
    iframeWin = iframe.contentWindow;
    iframeDoc = iframeWin.document;
}

var sel = rangy.getSelection(iframeWin);
if (sel.rangeCount) {
    var range = sel.getRangeAt(0);

    // If the range has either boundary within a text node, split that text node
    // so that we can work with the part that is selected
    range.splitBoundaries();

    // Get an array of all text nodes within the 
    var textNodes = range.getNodes([3]); // [3] specifies the types of node required

    // Surround each text node
    for (var i = 0, len = textNodes.length, el, n; i < len; ++i) {
        n = textNodes[i];
        el = iframeDoc.createElement("b");
        n.parentNode.insertBefore(el, n);
        el.appendChild(n);
    }
}