0

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

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

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

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

4

1 回答 1

0

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

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。这只会加粗该区域，我会把不加粗的留给你；）

于 2013-08-05T17:13:34.747 回答