1

我目前正在将所有 TinyMCE 插件迁移到 CKeditor 并且在使用 InsertInline 插件时遇到问题。

在 TinyMCE 我有这样的代码：

(function ($) {
Drupal.wysiwyg.plugins['insertinline'] = {

  /**
   * Return whether the passed node belongs to this plugin.
   */
  isNode: function(node) {
    return ($(node).is('img.wysiwyg-inline-image'));
  },


  /**
   * Execute the button.
   */
  invoke: function(data, settings, instanceId) {
    alert(Drupal.t('This is a pseudo plugin/button.\nIt does not insert an inline image.\n\nPlease use the INSERT button from the image upload fieldset.'));
  },


  /**
   * Replace all <!-- INLINE:xxx;w=x;h=x --> tags with images.
   */
  attach: function(content, settings, instanceId) {
    that = this;

    // Replace inline images with physical image
    content = content.replace(new RegExp('<!-- INLINE:([0-9]*);w=([0-9]*);h=([0-9]*) -->', 'gi'), function($0, $1, $2, $3) { return that._getPlaceholder($1, $2, $3); });

    return content;
  },


  /**
   * Replace images with <!-- INLINE:xxx;w=x;h=x --> tags in content upon detaching editor.
   */
  detach: function(content, settings, instanceId) {
    var $content = $('<div>' + content + '</div>'); // No .outerHTML() in jQuery :(

    $.each($('img.wysiwyg-inline-image', $content), function (i, elem) {
      altText = ' ' + Drupal.checkPlain(elem.getAttribute('alt')) + ' ';

      if (elem.parentNode && elem.parentNode.parentNode && elem.parentNode.tagName == 'H2') {
        // Moving the current element to left side of H2 tag 
        elem.parentNode.parentNode.insertBefore(document.createComment(altText), elem.parentNode);
        elem.parentNode.removeChild(elem);
      }
      else {
        elem.parentNode.insertBefore(document.createComment(altText), elem);
        elem.parentNode.removeChild(elem);
      }
    });
    return $content.html();
  },


  /**
   * Helper function to return a HTML placeholder.
   */
  _getPlaceholder: function (fid, w, h) {
    if (!fid) {
      fid = '';
    }
    if (!w) {
      w = '240';
    }
    if (!h) {
      h = '240';
    }

    // Grab image detail data
    var imgData = Drupal.cnngo_inline.getInlineImageDetail(fid, w, h);

    // Build and return image tag
    return '<img src="' + imgData.src + '" alt="' + imgData.alt + '" title="' + imgData.title + '" class="wysiwyg-inline-image" width="' + w + '" height="' + h + '" />';
  }
};
})(jQuery);

这个怎么运作：

假设我上传了一张 600x600 像素的图片，我将其插入所见即所得的区域，默认情况下它会插入一个 img 标签

在此处输入图像描述

当我单击图像中所述的“插入”按钮时。它将像这样插入 img 标签

<img class="wysiwyg-inline-image" title="Inline image 240x240" src="http://mydomain.com/sites/default/files/styles/inline_image_temp_240x240/public/2013/05/28/600x600_1.png" alt="INLINE:142879;w=240;h=240" width="240" height="240" data-mce-src="http://mydomain.com/sites/default/files/styles/inline_image_temp_240x240/public/2013/05/28/600x600_1.png">

见下图。

在此处输入图像描述

现在，如果我要分离编辑器（单击切换到纯文本），img 标签将替换为

<p><!-- INLINE:142879;w=240;h=240 --></p>

在此处输入图像描述

当我重新打开编辑器时，它会显示 img 标签（将呈现 img）。

有人可以指出我在 Ckeditor 中相当于 detact/attach 的正确方向吗？

我在谷歌上花了几个小时，但找不到确切的答案（也许我的问题不对）。

4

0 回答 0