Question

嘿，你们所有的聪明人，

我需要一些用户输入的帮助。我正在创建一个基本的文字处理器，我需要将某个选定区域设为粗体。用户将使用鼠标突出显示该区域，然后按按钮。然后，计算机将用<b>+originaltext+</b>替换其突出显示的文本，据称将其加粗。问题是，计算机正在将那些打开和关闭的胡萝卜变成<，从而阻止它完成它的工作。

如何强制计算机将其作为真正的粗体标记移交？

以下是我的基本做法：

function replaceSelectedText() {
var sel, range, txtstuff;
if (window.getSelection) {
    txtstuff = '<b>'+window.getSelection()+'</b>'
    sel = window.getSelection();
    alert(txtstuff, sel);
    if (sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();
        range.insertNode(document.createTextNode(txtstuff));
    }
} else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    range.text = txtstuff;
}
}

提前感谢您的帮助！

更新：这是一个可编辑的div。

Answer 1

工作代码：

function replaceSelectedText() {
    var sel, range, txtstuff;
    if (window.getSelection) {
        txtstuff = '<b>'+window.getSelection()+'</b>'
        sel = window.getSelection();
        alert(txtstuff, sel);
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var b = document.createElement('b');
            b.innerHTML = txtstuff;
            range.insertNode(b);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.text = txtstuff;
    }
}

Answer 2

阅读document.execCommand https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla

您的案例中的语法是：

document.execCommand('bold');

即使是Mozilla的文档，这也是非常跨浏览器的。它也不依赖于可能有错误的光标选择。

使HTML识别用户输入标签

2 个答案: