将复选框添加到ckeditor工具栏，以在img元素中添加类/移除类

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

• 选择img元素时，复选框应反映图像是否具有特定类别
• 如果选择了图像以外的内容，则应选中该复选框 残疾的，或者看不见的
• 当我选中或取消选中该复选框时，该类应添加/删除到img中

换句话说，我想在工具栏中添加一些按钮以外的东西（那些是通过editor.ui.addButton添加的），这些东西应该是一个复选框

---

如何操作？

CKEditor不包括向工具栏添加复选框的选项，因此您的第一步是查看他们的代码并扩展它以添加复选框

---

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

我还是通过使用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');
    }
  }
});

CKEDITOR.plugins.add（'add\u zoomable\u to\u image'，
{
init：函数（编辑器）
{
var禁用_span_color=“#CCCC”；
已启用var_span_color=“#000000”；
var cb；
var跨度；
变量html=
"" +
"" +
“将可缩放添加到图像”+
"" +
"";
add（'add_zoomable_to_image'，“zoomable_button”，{}）；
editor.ui.addHandler（“可缩放按钮”，
{
创建：函数（）
{
返回{
渲染：函数（编辑器、输出）
{
push（html）；
返回{}；
}
};
}
});
关于（“selectionChange”，function（））
{
var sel=editor.getSelection（）；
var ranges=sel.getRanges（）；
如果（ranges.length==1）
{
var el=sel.getStartElement（）；
如果（标高为（'img'））
{
启用_输入（）；
if（el.hasClass（'zoomable'））
检查_cb（）；
其他的
取消选中_cb（）；
}
其他的
禁用_输入（）；
}
其他的
禁用_输入（）；
});
on（“instancerady”，函数（）
{
cb=$（'.添加可缩放的cb'）；
span=$（'.添加可缩放的span'）；
cb.变更（功能（）
{
var元素=editor.getSelection（）.getStartElement（）；
如果（cb.is（'：checked'））
元素addClass（'zoomable'）；
其他的
element.removeClass（'zoomable'）；
});
});
函数启用_输入（）
{
cb.removeAttr（“禁用”）；
css（'color'，已启用span\u color）；
}
函数禁用_输入（）
{
取消选中_cb（）；
cb.attr（“禁用”、“禁用”）；
css（'color'，禁用span\u color）；
}
函数检查_cb（）
{
cb.attr（“已检查”、“已检查”）；
}
函数取消选中_cb（）
{
cb.removeAttr（“选中”）；
}
}
});