2016-05-07 7 views
0

私はtinyMCEのドキュメントをチェックしましたが、ドラッグ&ドロップでまたはアップロード/参照ボタンをドラッグしてイメージをアップロードするには、完全に動作するスクリプトを取得できません。私は今使用しています何TinyMCEを使用して画像をアップロードするにはどうすればよいですか?

が怒鳴るです:

<script src='//cdn.tinymce.com/4/tinymce.min.js'></script> 
<script> 
tinymce.init({ 
    selector: "textarea", 
    relative_urls : true, 
    remove_script_host : false, 
    convert_urls : true, 
    default_link_target:"_blank", 
    images_upload_base_path: '../images/tinymce', 
    automatic_uploads: true, 
    file_browser_callback_types: 'file image media', 
    images_upload_url: 'postAcceptor.php', 

    plugins: [ 
    "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker", 
    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", 
    "table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern" 
    ], 

    toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect", 
    toolbar2: "image | media | cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor code | insertdatetime preview | forecolor backcolor", 
    toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft", 
//image, media from toolbar2 
    menubar: false, 
    toolbar_items_size: 'small', 
    height: 300, 
    style_formats: [{ 
    title: 'Bold text', 
    inline: 'b' 
    }, { 
    title: 'Red text', 
    inline: 'span', 
    styles: { 
     color: '#ff0000' 
    } 
    }, { 
    title: 'Red header', 
    block: 'h1', 
    styles: { 
     color: '#ff0000' 
    } 
    }, { 
    title: 'Example 1', 
    inline: 'span', 
    classes: 'example1' 
    }, { 
    title: 'Example 2', 
    inline: 'span', 
    classes: 'example2' 
    }, { 
    title: 'Table styles' 
    }, { 
    title: 'Table row 1', 
    selector: 'tr', 
    classes: 'tablerow1' 
    }], 

    templates: [{ 
    title: 'Test template 1', 
    content: 'Test 1' 
    }, { 
    title: 'Test template 2', 
    content: 'Test 2' 
    }], 
    content_css: [ 
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css', 
    '//www.tinymce.com/css/codepen.min.css', 
    "dist/css/AdminLTE.min.css", 
    ] 
}); 
</script> 

あなたは私が有効またはTinyMCEのを使用して画像をアップロードすることができますどのように私に言うことができますか?

+0

アップロードした画像を処理/保存するサーバーサイドスクリプトが必要です。 –

+0

私はすでにそれを持っています –

答えて

0

あなたのサーバーにPHPが必要で、画像アップロードを処理するには 'postAcceptor.php'が必要です。

+0

私はコード –

+0

でそのPHPファイルを持っています。そのファイルでデバッグを開始する必要があります。 POSTには何が入っていますか?エラーはありますか? –

0

ブラウザのコンソールを調べて、PHPファイルを呼び出すときにエラーがないかどうかを調べることから始めます.FTPファイルが呼び出されていない場合、画像は確実に保存されません。

私は

  • することを確認してください...へのPHPファイルへのデバッグの追加を開始、PHPファイルが実際に呼び出されているだろうと仮定すると、その
  • は$ _POST変数は、画像が含まれていることを確認してくださいと呼ばれている
  • 投稿された画像で実際に何をしているのか把握します。

のTinyMCEの画像アップロード処理のいくつかの背景...

基本的なプロセスは、TinyMCEはあなたがイメージエディタで変更した各画像のための別のHTTP POSTを作成することです。それはあなたのinitのimages_upload_urlオプションの設定に基づいて、あなたの選択したURL(HTTP POST経由)にその画像を送信します。

images_upload_urlで参照されているURLのイメージハンドラは、アプリケーションにイメージを格納するために必要な作業をすべて実行する必要があります。

  • ストアデータベース内の項目
  • ストア資産管理システム
  • の項目Webサーバー上のフォルダに

    • ストアアイテム..:それはのようなものを意味するかもしれませんイメージを保存する場所を問わず、イメージハンドラはTinyMCEにイメージの新しい場所を伝えるJSONの1行を返す必要があります。 TinyMCEのドキュメントで参照ように、これは次のようになります。

      を{場所:「/uploaded/image/path/image.png」}

      TinyMCEのは、あなたが返す値に画像のsrc属性を更新します。 initでimages_upload_base_path settingを使用し、返された場所の先頭に追加される場合。 TinyMCEのページには、このすべての詳細を持っています

      https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

      ここでネットが埋め込まれた画像は、あなたのコンテンツに存在する場合のTinyMCEが知っていることですが、それは多分にそのイメージをどのように処理するかを知ることができませんジョブ(「イメージハンドラー」)を作成する必要があるように、アプリケーションのコンテキスト

    関連する問題