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 に答える