将复选框添加到ckeditor工具栏，以在img元素中添加addClass / removeClass

Question

我想编写一个ckeditor插件，在工具栏中添加一个复选框。

• 选择img元素时，复选框应反映图像是否具有某个类。
• 如果选择了除图像以外的其他内容，则复选框应为 残疾人，或者看不见。
• 当我选中或取消选中该复选框时，应该在img中添加/删除该类。

换句话说，我想在工具栏中添加除按钮以外的东西（使用editor.ui.addButton添加的按钮），并且应该是一个复选框。

我该怎么做？

Answer 1

无论如何，我设法使用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');
    }
  }
});

Answer 2

CKEditor不包含向工具栏添加复选框的选项，因此您的第一步是查看其代码并对其进行扩展以添加复选框。

然后查看其他按钮如何修改内容并检测编辑器中的选择何时更改以反映其新状态，并将这些想法应用于您的复选框。