Question

当前，基于在单独下拉列表中选择的语言，我可以将编辑器附加到文本字段并使用所选语言的语言方向，如下所示：

this.$('#description').redactor({
    buttons: ['formatting', 'bold', 'italic', 'underline'],
    breakline: true,
    direction: this.direction,
    ...
});

但是，如果我在下拉菜单中更改语言，我想动态更改编辑器字段的方向。如果我尝试以下操作，将无法正常工作：

this.$('#description').redactor({direction: this.direction});

有人知道这样做的正确方法吗？

Answer 1

此代码：

this.$('#description').redactor({direction: this.direction});

将永远无法工作，因为您需要start / stop编辑器应用程序。因此，代码可以是：

$R('#description', 'stop');
app.opts.direction = (app.opts.direction == 'ltr') ? 'rtl' : 'ltr';
$R('#description', 'start');

另一个解决方案可以是：

Access through the application object
获取具有Direction属性的div并进行更改

var app = $('#description').redactor({ // <---------------------
    buttons: ['formatting', 'bold', 'italic', 'underline'],
    breakline: true,
    direction: 'ltr'
});
$('#tglDirection').on('click', function(e) {
    $R('#description', 'stop');
    app.opts.direction = (app.opts.direction == 'ltr') ? 'rtl' : 'ltr';
    $R('#description', 'start');
    return;
    //---------------------------
    $(app.container.$container.nodes).find('div[dir]').addBack().attr('dir', function(idx, attr) {
        return (attr == 'ltr') ? 'rtl' : 'ltr';
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://imperavi.com/assets/redactor/redactor.min.css?b100">
<script src="https://imperavi.com/assets/redactor/redactor3.js"></script>
<button id="tglDirection">Toggle Direction ltr/rtl</button>
<textarea id="description">
    Could you do an actual logo instead of a font I cant pay you? Can we try some other colors maybe? I cant pay you. You might wanna give it another shot, so make it pop and this is just a 5 minutes job the target audience makes and families aged zero and up will royalties in the company do instead of cash.
</textarea>

如何使用jQuery动态更改Imperavi redactor的文本方向

1 个答案: