如何使用 jquery 动态更改 Imperavi 编辑器的文本方向

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 redactor 应用程序。 因此代码可以是：

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

另一种解决方案可以是：

• Access through the application object
• 获取具有方向属性的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>