我在PHP框架中实现了伟大的Content Tools编辑器,我在过去几年一直在发展,但我已经走到了尽头。
我想在当前可编辑区域内的光标位置插入来自自定义媒体管理器(已实现)的图像,就像默认图像工具一样。
我尝试按照教程来开发我的自己的工具,但我的不太好的知识的Coffee Script和JavaScript正在举行我回来了。
parent.someFunction({ image data })
来插入图像,就像默认的"图像" 工具一样。是否可以创建一个可以像这样调用的函数:
parent.insertMediaManagerItem({
url: 'my-image.png',
width: '300px',
height: '200px'
});
同样,我在ContentTools主题上非常新和丢失。任何帮助将不胜感激。
答案 0 :(得分:3)
我能提供的最好的例子是用于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);
我希望这足以帮助您整合您的媒体管理器,但如果没有,您可以提供有关媒体管理器工作方式的更多详细信息(也许是我可以查看的示例),我很乐意尝试提供更完整的解决方案