8

ドラッグ アンド ドロップをサポートするようになったため、textangular を 1.2.2 にアップグレードしました。

ただし、textAngualrSetup 内で defaultFileDropHandler を見たことがありますが、これをサポートするドキュメントや使用方法を見つけるのに苦労しています。

defaultFileDropHandler:
    /* istanbul ignore next: untestable image processing */
    function (file, insertAction)
    {
        debugger;
        var reader = new FileReader();
        if(file.type.substring(0, 5) === 'image'){
            reader.onload = function() {
                if(reader.result !== '') insertAction('insertImage', reader.result, true);
            };

            reader.readAsDataURL(file);
            return true;
        }
        return false;
    }

基本的に、ユーザーが複数の PDF やワード ドキュメントなどをドラッグして、送信時にアップロードできるようにしたいと考えています。

設定ページ内の defaultFileDropHandler に機能を追加する方法で、これを機能させることができます。

:- によって ta を実装します。

<div text-angular data-ng-model="NoteText" ></div>

ただし、これを達成するためのよりクリーンな方法はありますか?

4

2 に答える 2

9

書類不備ですみません！

element.on("drop")基本的に、HTMLイベントが発生すると defaultFileDropHandler がトリガーされます。

textAngularSetup ファイルを介してこれを実装しても問題ありませんが、すべてのインスタンスにグローバルに適用されます。textAngular の 1 つのインスタンスだけにハンドラーを適用するにはta-file-drop、 と同じシグネチャを持つスコープ上の関数の名前である属性を使用しますdefaultFileDropHandler。例えば：

コントローラー内のJS

$scope.dropHandler = function(file, insertAction){...};

HTML

<div text-angular data-ng-model="NoteText" ta-file-drop="dropHandler"></div>
于 2015-01-20T00:30:48.000 に答える
3

どちらも素晴らしい答えです、ありがとう！

コードはスニペットにすぎないため、グローバルなケースをカバーするために完全なコードを公開したいと思います...

app.config( function( $provide ) {
    $provide.decorator( 'taOptions', [ '$delegate', function( taOptions ) {

        taOptions.defaultFileDropHandler = function( file, insertAction ) {
            // validation
            if( file.type.substring( 0, 5 ) !== "image" ) {
                // add your own code here
                alert( "only images can be added" );
                return;
            }
            if( file.size > 500000 ) {
                // add your own code here
                alert( "file size cannot exceed 0.5MB" );
                return;
            }

            // create a base64 string
            var reader = new FileReader();
            reader.onload = function() {
                reader.result && insertAction( "insertImage", reader.result, true );
            };

            reader.readAsDataURL(file);
            return true;
        };

        return taOptions;
    }]);
});
于 2016-07-20T02:35:11.573 に答える