1

私は過去数年にわたって開発してきた PHP フレームワークに優れたコンテンツ ツールエディターを実装していますが、行き止まりに達しています。

デフォルトの画像ツールと同じように、現在の編集可能領域内のカーソル位置にカスタム メディア マネージャー(既に実装されています)から画像を挿入したいと考えています。

独自のツールを開発するためのチュートリアルに従おうとしましたが、 Coffee Script と JavaScript の知識があまりないため、足を引っ張っています。

私の理解では、おそらく手順は次のようになります。

  1. 画像ツールに基づいて新しいツールを作成する
  2. ツールは、ContentTools の既定のダイアログではなく、モーダル(iframe) で Media Manager を開きます (これが、FW での Media Manager の動作です)。
  3. Media Manager で自分の作業を行います (アップロード、トリミング、画像の分類など)。
  4. リストから画像を選択し、「挿入」をクリックします
  5. Media Manager iframe は、デフォルトの「画像」ツールとparent.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 で使用したツール コードの修正版です。

私が私たちと言うとき、私は私自身と、github で KCFinder の例を作成し、作成するのを手伝った Wouter Van Marrum のことを言っています。 )

// 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 に答える