javascript 文本编辑器 - 如何捕获选择答案

【问题标题】：javascript text editor - how to capture selectionjavascript 文本编辑器 - 如何捕获选择
【发布时间】：2015-06-01 22:01:20
【问题描述】：

我正在尝试编写一个简单的网络文本编辑器。我想要做的是让用户在 textarea（或类似 textarea 的输入）上键入，然后用鼠标或 shift 键选择文本，然后单击按钮以应用基于颜色的效果。我的问题是这样的：

如何以不丢失的方式捕获选择按钮被点击
如何保存文本和选择
如何实现所见即所得

附言我不想要一个完整的富文本编辑器。我只需要一种效果

谢谢

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如何在单击按钮时以不丢失的方式捕获选择

如何保存文本和选择

这完全归功于@TimDown's answer to a different question here。它用另一个字符串替换当前选择。

我们通过获取颜色选择器的值并将其放入 span 标签并插入当前选定的文本来创建字符串。

如何实现所见即所得

使用contenteditable div 并在表单提交时将输出集中到隐藏的文本区域。

这一切都在一起。同样，第一个函数replaceSelection() 不是我的代码。

document.getElementById('color').onchange = function() {
    var replace = document.createElement('span');
    replace.style.color = this.value;
    replace.textContent = window.getSelection().toString();
    replaceSelection(replace.outerHTML, true);
}

document.getElementById('wysiwyg').onsubmit = function() {
    document.getElementById('result').textContent = document.getElementById('#input').innerHTML;
}


// @TimDown
function replaceSelection(html, selectInserted) {
    var sel, range, fragment;    
    sel = window.getSelection();
    
    // Test that the Selection object contains at least one Range
    if (sel.getRangeAt && sel.rangeCount) {
        // Get the first Range (only Firefox supports more than one)
        range = window.getSelection().getRangeAt(0);
        range.deleteContents();
        
        // Create a DocumentFragment to insert and populate it with HTML
        // Need to test for the existence of range.createContextualFragment
        // because it's non-standard and IE 9 does not support it
        if (range.createContextualFragment) {
            fragment = range.createContextualFragment(html);
        } else {
            // In IE 9 we need to use innerHTML of a temporary element
            var div = document.createElement("div"), child;
            div.innerHTML = html;
            fragment = document.createDocumentFragment();
            while ( (child = div.firstChild) ) {
                fragment.appendChild(child);
            }
        }
        var firstInsertedNode = fragment.firstChild;
        var lastInsertedNode = fragment.lastChild;
        range.insertNode(fragment);
        if (selectInserted) {
            if (firstInsertedNode) {
                range.setStartBefore(firstInsertedNode);
                range.setEndAfter(lastInsertedNode);
            }
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

#input {
    min-height: 100px; 
    border-radius: 5px; 
    border: 1px solid #ccc;
    padding: 5px;
    margin-bottom: 1px;
}
#result {
    display: none;
}
#wysiwyg input[type="submit"] {
    height: 2em;
    float: right;
}

<form action="" method="post" id="wysiwyg">
    <div id="input" contenteditable="true"></div>
    <textarea name="result" id="result"></textarea>
    <input type="color" id="color" />
    <input type="submit" value="submit" />
</form>

【讨论】：

再次感谢。新的认为不适用于 chrome 和 firefox
这将创建嵌套的 span 标签。相反，它应该更新跨度中的现有样式。

【解决方案2】：

如何在单击按钮时以不丢失的方式捕获选择

您可以使用window.getSelection方法获取选中的文本。

如何保存文本和选择

将其保存在变量中。

例如：var selection = window.getSelection().toString();

如何做到所见即所得

您可以使用window.execCommand 方法执行不同的操作，例如加粗、下划线或斜体文本（和许多其他操作）。

我创建了一个简单的所见即所得编辑器，它对所选文本进行粗体、下划线和斜体。

Check it here.

【讨论】：