1

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

  • 当一个 img 元素被选中时，复选框应该反映图像是否具有特定的类。
  • When something else than an image is selected, the checkbox should be disabled, or maybe invisible.
  • 当我选中或取消选中复选框时，应将类添加到 img 中/从 img 中删除。

换句话说，我想在工具栏中添加除按钮之外的其他内容（使用 editor.ui.addButton 添加的那些），并且应该是复选框。

我怎么做？

4

2 回答 2

2

无论如何，我设法做到了，使用 editor.ui.add 和 editor.ui.addHandler。这是一个屏幕截图：

截屏

插件.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 回答