首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在ContentTools中插入来自自定义媒体管理器的图像

在ContentTools中插入来自自定义媒体管理器的图像
EN

Stack Overflow用户
提问于 2016-06-08 12:10:34
回答 1查看 695关注 0票数 1

我在过去几年开发的PHP中实现了一个伟大的内容工具编辑器,但是我已经到了一个死胡同。

我想在当前可编辑区域内的光标位置插入来自自定义媒体管理器(已经实现的)的图像,就像默认的图像工具所做的那样。

我试着遵循教程开发我自己的工具,但我的没有那么好的知识--关于咖啡脚本和JavaScript的知识--阻碍了我。

从我的底座来看,台阶可能是:

  1. 基于图像工具创建新工具
  2. 这些工具将在模式 (iframe)上打开媒体管理器,而不是ContentTools的默认对话框(这是媒体管理器在FW中的工作方式)。
  3. 在媒体经理上做我的工作(上传,裁剪,分类图片,等等)
  4. 从列表中选择图像并单击“插入”
  5. Manager调用一个插入图像的parent.someFunction({ image data }),就像默认的“映像”工具一样。
  6. 完成了!

一些严重的疑问:

  1. 如何用我的模式调用覆盖默认对话框?
  2. 是否必须将区域名称游标位置(?)作为参数传递给iframe,还是将这些信息存储在主作用域的某个地方?(或者.我是否有必要担心这一点,或者编辑器处理这件事中的所有?)
  3. 是否有可能创建一个类似于这样的函数: parent.insertMediaManagerItem({ url:'my-image.png',宽度:‘300 my’,高度:‘200 my’});

再说一遍,我是非常的新在ContentTools主题上失去了。任何帮助都将不胜感激。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-06-08 16:40:39

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

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

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

当我说我们的时候,我指的是我自己和沃特·范·马鲁姆,他们在github 这里上提出并帮助创建了KCFinder示例)

代码语言:javascript
运行
复制
// 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);

我希望这足以帮助您集成媒体经理,但如果不能,您可以提供更多关于媒体管理器工作方式的详细信息(可能是我可以查看的一个例子),我将很高兴地尝试提供一个更完整的解决方案。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37702110

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档