Question

我正在尝试在Jquery中使用星号和下划线（例如在whatsapp中）实现粗体和斜体。通过使用Madapaja's Selection Library，我可以添加星号或下划线，但是如果在所选文本的前后都存在星号或下划线，则无法弄清楚如何删除。我知道有重复的问题，但是我想通过使用库来实现这一点，因为它具有跨浏览器的支持。

我正在添加这样的星星：

$(document).ready(function () {
    $('#boldButton').click(function () {

        var selection = $("#inputQuestion").selection();

        if (selection.trim()) {//not empty or not whitespace
            $('#inputQuestion')
            .selection('insert', { text: '*', mode: 'before' })
            .selection('insert', { text: '*', mode: 'after' });
        }
    });
});

此html：

<button id="boldButton" type="button" class="btn btn-default"><b>B</b></button>
<textarea class="form-control" rows="10" id="inputQuestion"></textarea>

您可以检查wiki和source code

任何帮助或任何其他方法将不胜感激！

更新：有了dpren的回答，我做到了：

$(document).ready(function () {
    $('#boldButton').click(function () {

        var selection = $("#inputQuestion").selection();
        var selectedPos = $("#inputQuestion").selection('getPos');

        if (selection.trim()) {//not empty or not whitespace
            var before = $('#inputQuestion')
                .selection('setPos', { start: selectedPos.start - 1, end: selectedPos.start })
                .selection();

            var after = $('#inputQuestion')
                .selection('setPos', { start: selectedPos.end, end: selectedPos.end + 1 })
                .selection();

            if (before == '*' && after == '*') { //already bold -> remove stars
                var before = $('#inputQuestion')
                    .selection('setPos', { start: selectedPos.start - 1, end: selectedPos.start })
                    .selection();

                $('#inputQuestion').selection('replace', { text: '' });

                var after = $('#inputSoru') //since we remove 'before', positions will decrese by one
                    .selection('setPos', { start: selectedPos.end-1, end: selectedPos.end })
                    .selection();

                $('#inputSoru').selection('replace', { text: ''});

            } else { // not bold -> make it bold
                $('#inputQuestion') //get back to user's selection
                .selection('setPos', { start: selectedPos.start, end: selectedPos.end })
                .selection();

                $('#inputSoru')
                    .selection('insert', { text: '*', mode: 'before' })
                    .selection('insert', { text: '*', mode: 'after' });
            }
        }
    });
});

但是，我认为这段代码具有重新定位的含义。有没有一种方法可以通过编辑选择库来实现？

Answer 1

对于您的整体解析问题，可能有一个更简单的解决方案，但是对于您的紧迫问题，可以在插入操作之后使用getPos和setPos来扩展选择范围。

var position = $('#inputQuestion')
    .selection('insert', { text: '*', mode: 'before' })
    .selection('insert', { text: '*', mode: 'after' })
    .selection('getPos');

var newSelection = $('#inputQuestion')
    .selection('setPos', {start: position.start - 1, end: position.end + 1})
    .selection();

JSFiddle demo

如何获得所选文本输入的前后

1 个答案: