contentEditable div 中的粗体选定文本，使用纯 JavaScript，不使用 jQuery 等库

Posted 2023-03-06

【中文标题】contentEditable div 中的粗体选定文本，使用纯 JavaScript，不使用 jQuery 等库

【英文标题】：Bold Selected Text in contentEditable div, using pure JavaScript without libraries such as jQuery

【发布时间】：2015-07-09 04:35:53

【问题描述】：

我们有一个可编辑的 div，我们希望在单击按钮时更改用户选择的文本样式；就像这个编辑器的粗体或斜体按钮一样。

但是当我们点击按钮时，我们选择的文本会被取消选择。

那么，即使可编辑的焦点关闭并更改样式，如何保持我们选定的文本突出显示。

我的代码：

可编辑的分区：

var textbox= document.createElement("div");
textbox.setAttribute("contenteditable", "true");

按钮：

var bold = document.createElement("div");
bold.innerhtml = "B";

按钮点击：

bold.addEventListener("click", function()
        getSelectedText();
,false);

    function getSelectedText()
    
       var html = "";
       if (window.getSelection) 
         html = window.getSelection().toString();
        

       else if (document.selection && document.selection.type != "Control") 
            html = document.selection.createRange().text;
       
       alert(html);
    

【问题讨论】：

可能需要一个监听器来存储创建的模糊范围。至少我是这样处理的。

这里似乎正在发生一些事情。包含的所有代码都会提醒突出显示的文本，并且按预期工作。

你不能用一个实际的按钮来代替 div 吗？选择将保留。

@Samurai 一个实际的按钮可以完成我的工作，但我只能使用 div 抱歉。

【参考方案1】：

您可以通过收听contentEditable 的onmouseup 来获得选择并将其存储在变量中。单击 div 后，将选择恢复为原来的样子：

Javascript：

var range = "";

function getSelected() 
    var selection = window.getSelection()
    range = selection.getRangeAt(0);


function reselect() 
    var selection = window.getSelection();  
    selection.removeAllRanges();
    selection.addRange(range);

jsfiddle DEMO 为按钮使用了一个按钮和一个 div，因此您可以看到区别。

【讨论】：

你的 jsfiddle 粗体按钮什么都不做

在 jsfiddle 中提供的选定文本在单击按钮（或 div）时被保留。问题是单击按钮时取消选择的选定文本（并且文本失去焦点）。

感谢您的澄清，在这种情况下它确实有效，这是另一种方法：***.com/a/11787147/175071

顺便说一句，这个答案是不完整的。你应该修好按钮。

【参考方案2】：

要么使用mousedown 事件而不是click 事件，要么将<div> 按钮设置为不可选择。

详情请见this answer。