Question

我对javascript有疑问我需要遍历用户选择（突出显示的文本）并从trl或ltr更改文本方向。在这里我做了什么：

this._execCom("FormatBlock",'<div>');
var node = null;
if (this.area.contentWindow.getSelection) {
    node = this.area.contentWindow.getSelection().anchorNode.parentNode;

}
else if (this.area.contentWindow.document.selection) {
    var range = this.area.contentWindow.document.selection.createRange();
    if (range) {
        node = range.parentElement();
    }
    var walker=this.area.contentWindow.document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, null, false);
    while (walker.nextNode())
    {
        x=walker.currentNode.tagName;
        if( x == 'DIV')
            walker.currentNode.style.direction="ltr";
    }

这会改变所有div的方向，即使它们在突出显示的文本内也是如此，我需要对用户选择进行更改。

你能帮帮我吗？

非常感谢

Answer 1

编辑：我误解了你的问题。因此，您只希望用户能够单击并拖动以选择哪些元素应在ltr和rtl之间切换“方向”。我可以选择使用选择范围，这在此解决方案中使用会非常痛苦。

在这里，我使用jQuery来监听'mousemove'事件，检查鼠标左键是否被按下。如果是这样，我切换方向css属性。我还使用自定义数据标志来防止在拖动鼠标时元素闪烁。

还有一点可以防止这些段落被选中，这可能是你的意图，但我觉得很烦人。如果您希望它们能够选择文本，您可以注释掉/删除该部分。

这是小提琴：http://jsfiddle.net/nbWYK/8/

TL; DNR：

$(document).on("mousemove", 'p', function(e) {
    var $this = $(this);

    if ($this.data('ignore-direction-toggle')) return;

    if (e.which == 1) {
        $this.data('ignore-direction-toggle', true);
        $this.css({
            'direction': ($this.css('direction') == 'ltr' ? 'rtl' : 'ltr')
        });
    }
}).on('mouseleave', 'p', function(e) {
    var $this = $(this);
    if ($this.data('ignore-direction-toggle')) $this.data('ignore-direction-toggle', null);
});

循环突出显示文本。

1 个答案: