1

我在过去几年一直在开发的 PHP 框架中实现了出色的内容工具编辑器，但我已经走到了死胡同。

我想在当前可编辑区域内的光标位置插入来自自定义媒体管理器（已实现）的图像，就像默认图像工具一样。

我曾尝试按照教程来开发自己的工具，但我对 Coffee Script 和 JavaScript 的了解并不多，这让我望而却步。

据我了解，也许步骤是：

  1. 基于图像工具新建一个工具
  2. 这些工具将在模态（iframe）上打开媒体管理器，而不是 ContentTools 中的默认对话框（这就是媒体管理器在固件中的工作方式）
  3. 在媒体管理器上做我的事情（上传、裁剪、分类图像等）
  4. 从列表中选择一个图像，然后单击“插入”
  5. 媒体管理器 iframe 调用 aparent.someFunction({ image data })来插入图像，就像默认的“图像”工具一样。
  6. 完毕！

一些严重的疑问：

  1. 如何用我的模态调用覆盖默认对话框？

  2. 我是否必须将区域名称和光标位置（？）作为参数传递给 iframe，或者这些信息是否存储在主范围内的某个地方？（或者......我什至必须担心这一点，或者编辑会处理这件事的所有事情？）

  3. 是否可以创建一个可以像这样调用的函数：

    parent.insertMediaManagerItem({
  url: 'my-image.png',
  width: '300px',
  height: '200px'
});

同样，我对 ContentTools 主题很陌生并且迷失了方向。任何帮助，将不胜感激。

4

1 回答 1

3

我能提供的最好的例子是用于 KCFinder 的实现，这是另一个用 PHP 编写的媒体管理器，我相信它使用（至少在我帮助的实现中）一个新窗口而不是 iframe，但我相信主体将是相同的。

正如您所指出的，最简单的解决方案是编写自己的图像工具来替换默认工具，这样上传和/或返回图像的责任就会通过 CT 图像对话框和 ImageUploader 类中讨论的切换到您的自定义媒体管理器教程。

以下是我们用于 KCFinder 的工具代码的修改版本：

当我说我们时，我指的是我自己和 Wouter Van Marrum，他们在这里提出并帮助在 github 上创建了 KCFinder 示例）

// So this little bundle of variables is required because I'm using CoffeeScript
// constructs and this code will potentially not have access to these.
var __slice = [].slice,
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

// Define out custom image tool
var CustomImageTool = (function(_super) {
    __extends(CustomImageTool, _super);

    function CustomImageTool() {
      return CustomImageTool.__super__.constructor.apply(this, arguments);
    }

    // Register the tool with ContentTools (in this case we overwrite the 
    // default image tool).
    ContentTools.ToolShelf.stow(CustomImageTool, 'image');

    // Set the label and icon we'll use 
    CustomImageTool.label = 'Image';
    CustomImageTool.icon = 'image';

    CustomImageTool.canApply = function(element, selection) {    
        // So long as there's an image defined we can alwasy insert an image
        return true;
    };

    CustomImageTool.apply = function(element, selection, callback) {

        // First define a function that we can send the custom media manager
        // when an image is ready to insert.
        function _insertImage(url, width, height) {
            // Once the user has selected an image insert it

            // Create the image element
            var image = new ContentEdit.Image({src: url});

            // Insert the image
            var insertAt = CustomImageTool._insertAt(element);
            insertAt[0].parent().attach(image, insertAt[1]);

            // Set the image as having focus
            image.focus();

            // Call the given tool callback
            return callback(true);

            window.KCFinder = null;
        }

        // Make the new function accessible to your iframe
        window.parent.CustomMediaManager = {_inserImage: _insertImage};

        // Hand off to your custom media manager
        //
        // This bit you'll need to figure out for yourself or provide more
        // details about how your media manager works, for example in 
        // KCFinder here we open a new window and point it at the KCFinder
        // browse.php script. In your case you may be looking to insert an
        // iframe element and/or set the src for that iframe. 
        //
        // When the user uploads/selects an image in your media manager you
        // are ready to call the `_insertImage` function defined above. The
        // function is accessed against the iframe parent using:
        //
        //     window.parent.CustomMediaManager._insertImage(url, width, height);
        //

    };

    return CustomImageTool;

})(ContentTools.Tool);

我希望这足以帮助您集成媒体管理器，但如果不能，您能否提供有关媒体管理器工作方式的更多详细信息（也许我可以查看一个示例），我很乐意尝试提供更完整的解决方案。

于 2016-06-08T16:40:39.183 回答