2017-10-31 9 views
0

TinyMCEをWYSIWYGエディタとして使用しようとしています。しかし、私は自分のサーバーに画像をアップロードしようとすると、私はというエラーを取得:TinyMCEのuploadImages()関数が動作しない

プロパティを読み取ることができません「uploadImages」未定義

の私は、正確なドキュメントを読んで、いくつかのためにしていますなぜなら、それがその機能を認識していないからです。ここに私のコードです:

<!DOCTYPE html> 
<html> 

<head> 
    <link href="resources/css/index.css" rel="stylesheet" type="text/css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script> 
</head> 

<body> 
    <div id="container"> 
     <form> 
      <label>Title</label> 
      <input type="text" name="title"> 

      <label>Description</label> 
      <input type="text" name="desct"> 

      <textarea id="editor"></textarea> 

      <input type="submit"> 
     </form> 
    </div> 
</body> 
<script> 
    tinymce.init({ 
     selector: '#editor', 
     theme: 'modern', 
     browser_spellcheck: true, 
     height: 480, 
     images_upload_url: 'resources/scripts/postAcceptor.php', 
     images_upload_base_path: '/tutorials/resources/images/', 
     images_upload_handler: function (blobInfo, success, failure) { 
      this.activeEditor.uploadImages(function(success) { 
       $.post('resources/scripts/postAcceptor.php', this.activeEditor.getContent()).done(function() { 
       console.log("Uploaded images and posted content as an ajax request."); 
       }); 
      }); 
     }, 
     plugins: [ 
      'advlist autolink link code image lists charmap print preview hr anchor pagebreak spellchecker', 
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking', 
      'save table contextmenu directionality emoticons template paste textcolor' 
     ], 

     toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | fontselect' 
    }); 

</script> 

</html> 

答えて

0

エラーはそれがimages_upload_handlerキーである関数内で、コードがthis.activeEditorを取得しようとするということですが、この変数は、このマニュアルhttps://www.tinymce.com/docs/api/tinymce/tinymce.editor/に基づいてundefined

images_upload_handler: function (blobInfo, success, failure) { 
    this.activeEditor.uploadImages(function(success) { 
     $.post('resources/scripts/postAcceptor.php', this.activeEditor.getContent()).done(function() { 
      console.log("Uploaded images and posted content as an ajax request."); 
     }); 
    }); 
}, 

を返しますそれはtinymce.activeEditorのように見えます。

PS:あなたは何をしようとしていますか?私が正しく理解すれば、postメソッドを実行するべきではありません。それはそれ自身で行うべきです。投稿が正常に完了したか失敗した後に実行される関数を送るべきです。そのポストメソッドをそのハンドラの中に置くと、恐らくそれが2回アップロードされます。フル機能のデモをご覧ください:https://www.tinymce.com/docs/demo/full-featured/

+0

私はこれをしようとしています:https://www.tinymce.com/docs/get-started/upload-images/ uploadImages()関数が動作していませんまったく。私は、ユーザーがアップロードした画像をサーバーに送信しようとしています。 – user2896120

+0

@ user2896120ああ、私は参照してください、しかし、例では、それはJSONの設定を介して、それはすべての外にあるように見えます。彼は関数を 'tinymce.activeEditor.uploadImages'メソッドに送ります – Frankusky

関連する問題