我正在最近几年一直在开发的PHP框架中实现出色的Content Tools编辑器，但是我已经走到了尽头。
我想从自定义媒体管理器（已实现）在当前可编辑区域内的光标位置插入图像，就像默认图像工具一样。
我尝试遵循有关开发自己的工具的教程，但是我对Coffee Script和JavaScript的不太了解使我退缩。
从我的理解，也许这些步骤将是：
基于图像工具创建一个新工具
这些工具将以模式（iframe）而不是ContentTools的默认对话框打开媒体管理器（这就是媒体管理器在固件中的工作方式）
在媒体管理器上做我的事情（上传，裁剪，分类图像等）
从列表中选择一个图像，然后单击“插入”
媒体管理器iframe调用parent.someFunction({ image data })来插入图像，就像默认的“图像”工具一样。
做完了！
一些严重的疑问：
如何使用我的模态调用覆盖默认对话框？
我是否必须将区域名称和光标位置（？）作为参数传递给iframe或此信息存储在主作用域中的某个位置？ （或者...我什至不必担心这件事，还是编辑器可以处理所有事情？）
是否有可能创建一个可以像这样调用的函数：
parent.insertMediaManagerItem({
url: 'my-image.png',
width: '300px',
height: '200px'
});
同样，我是一个新手，对ContentTools主题迷失了。任何帮助，将不胜感激。
最佳答案
我可以提供的最好的示例是用于KCFinder的实现，KCFinder是另一个用PHP编写的媒体管理器，我相信它（至少在我帮助过的实现中）使用新窗口而不是iframe，但我相信原理是相同的。
正如您已经指出的，最简单的解决方案是编写自己的映像工具来替换默认工具，这样，通过CT映像对话框和ImageUploader类讨论的上载和/或返回映像的责任将切换到自定义媒体管理器。本教程。
以下是我们用于KCFinder的工具代码的修改版本：
当我说我们是指我自己和沃特·范·马鲁姆（Wouter Van Marrum）时，他们提出并帮助在github here上创建了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);
我希望能提供足够的帮助您集成您的媒体管理器，但如果不能，那么您可以提供有关媒体管理器工作方式的更多详细信息（也许我可以查看一个示例），我将很乐意尝试并提供一个更完整的解决方案。