tinyMCE 의 그림 사용자 정의 업로드

2419 단어 프런트
tinyMCE 그림 을 편집 상자 에 끌 어 다 놓 거나 그림 업로드 플러그 인 을 사용 하여 편집 상자 에 삽입 할 때 업로드 방법 을 지정 해 야 합 니 다.현재 배경 에서 프론트 데스크 톱 에 올 린 그림 을 받 아 서버 에 저장 한 다음 그림 의 url 을 프론트 데스크 톱 으로 되 돌려 그림 링크 를 해 야 합 니 다.
tinyMCE 에는 두 가지 방식 이 있 습 니 다.
1,images 직접 사용upload_url 속성,이 속성 은 그림 을 업로드 할 때 지정 한 url 에 자동 으로 접근 하여 주 소 를 되 돌려 줍 니 다:
images_upload_url: '/image/upload',
배경 은{"location":"}을 되 돌려 야 합 니 다.그림 url 을 가리 키 고 있 습 니 다.
2、images 사용upload_handler 및 filepicker_콜백,전 자 는 편집 상자 에 그림 을 끌 어 다 놓 는 데 사용 되 며,후 자 는 파일 선택 기 에서 그림 을 선택 하여 업로드 합 니 다.
images_upload_handler: function(blobInfo, success, failure) {             var form = new FormData();             form.append('files', blobInfo.blob(), blobInfo.filename());             $.ajax({                     url: "/image/upload",                     type: "post",                     data: form,                     processData: false,                     contentType: false,                     success: function(data) {                         success(data.location);                     },                     error: function(e) {                         alert("사진 업로드 실패");                    }                 });          },
file_picker_callback: function(callback, value, meta) {
            var input = document.createElement('input');             input.setAttribute('type', 'file');             input.onchange = function() {                 var file = this.files[0];                 var form = new FormData();                 form.append("files", file);                  $.ajax({                     url: "/image/upload",                     type: "post",                     data: form,                     processData: false,                     contentType: false,                     success: function(data) {                         callback(data.location);                     },                     error: function(e) {                         alert("사진 업로드 실패");                    }                 });             };
            input.click();
        }
 form.append('files', blobInfo.blob(), blobInfo.filename());그리고 form.append("files",file);대응 하 는 설명 은:
formData.append(name, value);
formData.append(name, value, filename);

filename 이 필요 하지 않 으 면 앞의 두 개 만 전달 할 수 있 습 니 다.

좋은 웹페이지 즐겨찾기