0

如何在 Aloha 编辑器中切换 ui 按钮，例如“粗体”？这似乎是一个简单的任务，但我似乎无法弄清楚......

aloha(document.querySelector('#editable'));

// Assuming I have a button with class "action-bold"
$('.action-bold').click(function(event) {
   if ($(event.target).attr('class') === 'active') {
      return aloha.ui.command(aloha.ui.commands.unformat);
   } else {
      return aloha.ui.command(aloha.ui.commands[command]);
   }
});

function middleware(event) {
    $('.active').removeClass('active');
    if ('leave' !== event.type) {
        var states = aloha.ui.states(aloha.ui.commands, event);
        for (var selector in states) {
            $('.action-' + selector).toggleClass('active', states[selector]);
        }
    }
    return event;
}

aloha.editor.stack.unshift(middleware);
4

1 回答 1

0

有类似的问题，必须说 Aloha Editor 文档非常糟糕。到达某个地方的唯一方法是阅读代码。这是我切换工具栏按钮的解决方案：

for (var command in aloha.ui.commands) {
  $('.action-' + command).on( 'click',
        function (e) {
            var cmd = aloha.ui.commands[$(this).attr('class').substr(7)];
            var applyTag = !$(this).attr('active');
            aloha.ui.command({
                'action': function(bnds) {
                    return aloha.editing.wrap(cmd.node.toUpperCase(), bnds[0], bnds[1], applyTag);
                }
            })(e);
        }
  );
}

这假设您没有在按钮上设置额外的类##active##，而只是添加一个额外的属性 active 到它。

我写了一篇关于它的小帖子以及我是如何从中得出的：http: //me-kono.eu/blog/2015/06/aloha-editor-how-to-create-toggling-toolbar-buttons/

于 2015-06-24T14:29:02.843 回答