注意：上傳本地圖片是TinyMCE 4.3才新引入的功能，所以該配置只適合4.3及其以上
<!doctype html> <html> <head> <script src='https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=自己申請的KEY'></script> <script> tinymce.init({ selector: 'textarea#mytextarea',//意思是將TinyMCE插件放入‘textarea’ID為mytextarea的標簽里 plugins: [ //配置插件：可自己隨意選擇，但如果是上傳本地圖片image和imagetools是必要的 'advlist autolink link 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 imagetools 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', image_advtab: true, table_default_styles: { width: '100%', borderCollapse: 'collapse' }, image_title: false, // 是否開啟圖片標題設置的選擇，這里設置否 automatic_uploads: true, // 圖片異步上傳處理函數 images_upload_handler: (blobInfo, success, failure) => { var xhr, formData; xhr = new XMLHttpRequest(); xhr.withCredentials = false; xhr.open('POST', 'FileAction_updateFile');//第一個參數是請求方式，第二個參數是請求地址，我這里配置的是struts的action，如果是其他（PHP等）的可這樣配置：xxx.php xhr.onload = function () { var json; if (xhr.status !== 200) { failure('HTTP Error: ' + xhr.status); return; } json = JSON.parse(xhr.responseText); if (!json || typeof json.location !== 'string') { failure('Invalid JSON: ' + xhr.responseText); return; } success(json.location); }; formData = new FormData(); formData.append('file', blobInfo.blob(), blobInfo.filename()); xhr.send(formData); } }); </script> </head> <body> <center> <br> <form method="post" action=""> <textarea id="mytextarea" name="test"></textarea> <input type="submit" value="提交"> </form> </center> </body> </html>