富文本框TinyMCE上傳本地圖片基本配置

時間 2019-11-14

標籤文本 tinymce 上傳本地圖片基本配置简体版

原文原文鏈接

注意：上傳本地圖片是TinyMCE 4.3才新引入的功能，因此該配置只適合4.3及其以上php

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。