如何使用 AngularJS 实现粗体的非粗体功能

Posted 2023-04-14

【中文标题】如何使用 AngularJS 实现粗体的非粗体功能

【英文标题】：How to implement bold unbold functionality with AngularJS

【发布时间】：2013-08-05 15:17:07

【问题描述】：

我正在尝试实现一些客户端文本格式化功能。就像任何其他编辑器一样。基本上当用户选择文本并单击粗体时，它应该加粗文本，当再次选择相同的文本时，单击粗体。它应该取消它。我可以通过简单地使用 jQuery 的 wrap 和 unwrap 函数来实现这个功能。

我遇到的问题是，如果用户选择的文本是周围已经有粗体标签的东西的子字符串。例如<b>Some text "I am the selection" some text</b> 在这种情况下，单击按钮应该取消“我是选择”的粗体，并使其周围的文本保持粗体。该项目也是基于 angularJS 构建的。

问题： 解决这个问题的最佳方法是什么？ （我的最后一个选择是将文本作为字符串处理并对其进行手动替换，这是我真正想避免的） 有角度的做法吗？ 是否有专门用于此功能的好插件（我不想要完整的工具栏，因为我已经创建了自己的工具栏来配合项目，我只想要功能）

http://plnkr.co/edit/KmVBjOeUps302NrdV89k?p=catalogue

【参考方案1】：

我认为你应该能够做这样的事情：

function getSelectedText() 
    if (window.getSelection) 
        return window.getSelection();
    
    else if (document.selection) 
        return document.selection.createRange().text;
    
    return '';

$(document).ready(function()
    $("#button").click(function()
        var myObj = $('#highlight');
        myObj.html( myObj.html().replace(getSelectedText(),
            '<b>'+getSelectedText()+'</b>')
        );
    );
);

#highlight 是您要从中选择的段落的 ID。这只会加粗该区域，我会把不加粗的留给你；）