Вставьте изображение из пользовательского медиа-менеджера в ContentTools

Лучшим примером, который я могу привести, является реализация, используемая для KCFinder, другого медиа-менеджера, написанного на PHP, который, как мне кажется, использует (по крайней мере, в реализации, с которой я помогал) новое окно вместо iframe, но я полагаю, что принцип будет таким же.

Как вы указали, самым простым решением является написать свой собственный инструмент для работы с изображениями, который заменит инструмент по умолчанию, таким образом, ответственность за загрузку и/или возврат изображения будет передана вашему пользовательскому медиа-менеджеру через диалоговое окно изображения CT и класс ImageUploader, описанный в учебник.

Ниже приведена модифицированная версия кода инструмента, который мы использовали для KCFinder:

Когда я говорю мы, я имею в виду себя и Воутера Ван Маррума, которые подняли и помогли создать пример KCFinder на github здесь)

// 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);

Я надеюсь, что этого достаточно, чтобы помочь вам интегрировать ваш медиа-менеджер, но если нет, не могли бы вы предоставить более подробную информацию о том, как работает ваш медиа-менеджер (возможно, пример, который я могу просмотреть), и я с радостью попытаюсь предложить более полное решение.