1

ツールバーにチェックボックスを追加するckeditorプラグインを作成したいと思います。

  • img要素が選択されている場合、チェックボックスは画像に特定のクラスがあるかどうかを反映する必要があります。
  • 画像以外のものを選択した場合は、チェックボックスを無効にするか、非表示にする必要があります。
  • チェックボックスをオンまたはオフにすると、クラスがimgに追加/imgから削除されます。

つまり、ツールバーにボタン以外のもの（editor.ui.addButtonで追加されたもの）を追加したいので、その何かをチェックボックスにする必要があります。

それ、どうやったら出来るの？

4

2 に答える 2

2

とにかく、editor.ui.addとeditor.ui.addHandlerを使用してそれを行うことができました。これがスクリーンショットです：

スクリーンショット

plugin.js：

CKEDITOR.plugins.add('add_zoomable_to_image',
{
  init: function( editor )
  {
    var disabled_span_color = "#cccccc";
    var enabled_span_color = "#000000";

    var cb;
    var span;

    var html =
      "<div style='height: 25px; display: inline-block'>" +
          "<div style='margin: 5px'><input class='add_zoomable_cb' type='checkbox' disabled='disabled'>" +
              "<span class='add_zoomable_span' style='color: " + disabled_span_color + "'> Add zoomable to image</span>" +
          "</div>" +
      "</div>";

    editor.ui.add('add_zoomable_to_image', "zoomable_button", {});
    editor.ui.addHandler("zoomable_button",
    {
      create: function ()
      {
        return {
          render: function (editor, output)
          {
            output.push(html);

            return {};
          }
        };
      }
    });

    editor.on("selectionChange", function()
    {
      var sel = editor.getSelection();
      var ranges = sel.getRanges();

      if (ranges.length == 1)
      {
        var el = sel.getStartElement();

        if (el.is('img'))
        {
          enable_input();

          if (el.hasClass('zoomable'))
            check_cb();
          else
            uncheck_cb();
        }
        else
          disable_input();
      }
      else
        disable_input();
    });

    editor.on("instanceReady", function ()
    {
      cb = $('.add_zoomable_cb');
      span = $('.add_zoomable_span');

      cb.change(function()
      {
        var element = editor.getSelection().getStartElement();

        if (cb.is(':checked'))
          element.addClass('zoomable');
        else
          element.removeClass('zoomable');
      });

    });

    function enable_input()
    {
      cb.removeAttr('disabled');
      span.css('color', enabled_span_color);
    }

    function disable_input()
    {
      uncheck_cb();
      cb.attr('disabled', 'disabled');
      span.css('color', disabled_span_color);
    }

    function check_cb()
    {
      cb.attr('checked', 'checked');
    }

    function uncheck_cb()
    {
      cb.removeAttr('checked');
    }
  }
});
于 2013-02-14T07:50:58.443 に答える
0

CKEditor にはツールバーにチェックボックスを追加するオプションが含まれていないため、最初のステップはコードを確認し、それを拡張してチェックボックスを追加することです。

次に、他のボタンがどのようにコンテンツを変更するかを調べ、エディターでの選択が変更されて新しい状態を反映するタイミングを検出し、それらのアイデアをチェックボックスに適用します。

于 2013-02-13T19:11:14.400 に答える