[번역] TinyMCE 4 위지위그 에디터에서 로컬 이미지 업로드하기

Hschoi han Lucius.choi님이 약 일 년전에 작성함. 1 853 
> 이 글은 최근 번역 성능이 향상된 구글 번역기의 도움을 받아 빠르게 번역한 것입니다. : TinyMCE 4에서 jQuery와 몇 줄의 코드(플러그인 필요없음)를 사용하여 ajax 이미지 업로드를 활성화하는 방법. [![img](https://cdn.pixabay.com/user/2015/12/14/11-07-45-560_48x48.jpg)  Simon ](https://pixabay.com/ko/users/Simon-3/) •  2013년 9월 27일  •  [Web Development](https://pixabay.com/ko/blog/topics/web-development-8/) 출처: https://pixabay.com/ko/blog/posts/direct-image-uploads-in-tinymce-4-42/ 자바 스크립트 기반의 WYSIWYG 편집기 TinyMCE는 많은 훌륭한 기능을 제공하지만 이미지 업로드는 기본으로 제공되지 않는다. 이 문제를 해결하기 위해 별도의 무료 플러그인을 사용할 수 있다 (예 : JustBoil.me). 그러나 대부분의 경우에 부피가 큰 확장 기능이 필요없는 간단한 접근 방법이 선호되다. ## 클라이언트측 코드 이 튜토리얼에서는 jQuery를 사용한다. 다른 프레임 워크 (기본 JavaScript 포함)만으로도 충분하다. [JSFiddle](http://jsfiddle.net/SjJh7/3/)로 사용할 수 있는 예는 Chrome 및 Firefox에서 바로 시도 할 수 있다. '이미지 삽입'을 선택하고 소스 입력란 옆에있는 폴더 아이콘을 클릭한다. [![img](https://cdn.pixabay.com/blog/post/2013/09/27/22-50-23-438_640.png)](http://jsfiddle.net/SjJh7/3/) 물론 업로드 된 이미지를 처리 할 서버가 없으므로 실제 업로드가 작동하지 않는다. 또한 Internet Explorer에서 이 작업을 수행해야 할 경우, 자습서 끝 부분에 나와 있는 해결 방법이 추가로 필요하다. 기본 HTML 스캐폴딩 (textarea, iframe, 파일 입력 필드가 포함 된 form)을 만들어 보자. form과 iframe은 CSS 인라인 스타일을 이용하여 보이지 않도록 한다. ```html <textarea id="my_editor"></textarea> <iframe id="form_target" name="form_target" style="display:none"></iframe> <form id="my_form" action="/upload/" target="form_target" method="post" enctype="multipart/form-data" style="width:0px;height:0;overflow:hidden"> <input name="image" type="file" onchange="$('#my_form').submit();this.value='';"> </form> ``` TinyMCE API를 로딩한 후 위지위그 에디터는 "tinymce.init()"를 호출하여 초기화된다. ```js <script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script> <script> tinymce.init({ selector: '#my_editor', plugins: ["image"], file_browser_callback: function(field_name, url, type, win) { if(type=='image') $('#my_form input').click(); } }); </script> ``` 위의 코드가 클라이언트 사이드에서의 동작 코드이고 [JSFiddle](http://jsfiddle.net/SjJh7/3/) 에서 확인할 수 있다. **동작원리** : TinyMCE의 "file_browser_callback"은 링크 또는 이미지 대화 상자의 폴더 아이콘을 클릭 할 때마다 호출되는 함수를 정의 할 수 있다. 이미지 대화 상자 (type == 'image')의 경우 업로드 양식 내에서 파일 입력의 클릭 이벤트를 수동으로 트리거한다. 변경시, 파일 입력 필드 자체가 양식의 제출 이벤트를 트리거한다. 즉 파일이 선택되면 제출 후에 입력 필드의 값이 재설정되므로 동일한 파일이 다시 선택 되더라도 필드의 변경 이벤트가 실행된다. > 업데이트 : TinyMCE 4.1에서는 file_browser_callback 대신에 새로 추가된 file_picker_callback 옵션을 사용할 수 있다. 새 옵션을 사용하여 위의 코드가 작동하기 위해서는 약간의 수정이 필요하다. ## 서버측 코드 파이썬/장고에서는 사용할 때 파일 업로드 처리를 위한 서버측 코드는 다음과 같이 작성할 수 있다. ```python def upload(request): form = myForm(request.POST, request.FILES) if form.is_valid(): image = form.save() return HttpResponse("<script>top.$('.mce-btn.mce-open').parent().find('.mce-textbox').val('%s').closest('.mce-window').find('.mce-primary').click();</script>" % image.get_absolute_url()) return HttpResponse("<script>alert('%s');</script>" % escapejs('\n'.join([v[0] for k, v in form.errors.items()]))) ``` **설명** : 먼저 업로드 된 파일을 받고 유효성을 검사한다. 오류가있는 경우 (예 : 잘못된 이미지 유형인 경우 스크립트 태그만으로 구성된 간단한 HTML 스니펫을 반환한다. 이 스크립트에서는 경고를 사용하여 오류와 관련된 세부 정보를 보고한다. 스니펫은 양식의 대상 속성으로 설정된 `iframe`으로 반환된다. `iframe` 내부에서 스크립트 태그가 평가되고 경고 창이 팝업된다. 이미지가 유효하면 파일이 서버에 저장되고 다른 스크립트를 다시 보낸다. `top.$`를 호출하여 부모 문서의 jQuery 인스턴스에 액세스한다. 기억할 것은, 스크립트가 실행되는 iframe 자체 안에 jQuery가 로드되어 있지 않다는 것이다. 편집기의 DOM을 가로 질러 새로운 이미지 URL은 대화 상자의 이미지 소스 필드 ($ ( '. mce-btn.mce-open'). parent (). find ( '. mce-textbox')에 입력된다. 그런 다음 대화 상자의 확인 버튼으로 이동하여 클릭 이벤트를 트리거한다. ## IE 브라우저 상의 문제점 해결 `Internet Explorer 10`은 `iframe` 기반 파일 업로드가 제대로 동작하지 않는다. 따라서, malsup의 jQuery Forms Plugin을 사용하여 파일 입력 필드의 `onchange` 이벤트를 `ajaxSubmit`로 연결한다. ```html <input name="image" type="file" onchange="$('#my_form').ajaxSubmit({ success: function(d){eval(d);} });this.value='';"> ``` HTML 스니펫을 포함하는 스크립트 태그 대신 서버의 응답은 이제 ajaxSubmit 콜백 내에서 eval ()에 의해 실행되는 일반 JavaScript 지시문을 제공해야 한다. 이 방법은 모든 최신 브라우저에서 작동하지만 추가 `Form` 플러그인이 필요하다. Internet Explorer 버전 9 이하에서는 파일 입력 필드의 동적 템퍼링과 관련하여 엄격한 제한 사항이 있다. 보안상의 이유로 (?!) 사용자는 파일 입력 필드를 수동으로 클릭해야 한다. JavaScript를 통해 이 이벤트를 트리거하면 양식이 무효화되어 "액세스 거부" 오류가 발생한다. 해결 방법은 사용자가 클릭해야 하는 버튼 위에 투명한 파일 입력 필드 (불투명도 : 0)를 배치하는 것이다. 따라서 실제로 입력 필드를 보지 않고도 사용자는 click 이벤트를 트리거하게 된다. 필요한 HTML과 CSS가 TinyMCE에 삽입 될 수 있지만 꽤 복잡하기 때문에 이 튜토리얼의 시작 부분에서 언급 한 플러그인 중 하나를 사용하는 것이 더 나을 것이다. 당연히 링크 대화 상자의 폴더 아이콘은 파일 업로드와 같은 방식으로 사용할 수 있다. 또는 편집기의 file_browser_callback 함수 안에있는 코드 줄을 사용하면 별도의 창에서 Dropbox를 열 수 있다. ```js if (type=='file') window.open('https://www.dropbox.com/'); ``` 더 나은 솔루션을 알고 있으며 댓슬 섹션에서 알려주기 바란다.

Comments (1)

오! 감사합니다!
1378086969294 Wagurano님이 약 일 년전에 작성함.