tinyMce 에디터 이미지업로드(image upload) 추가 | Tools

여러가지 위지윅에디터를 사용하는데.. 그중에 알게된 에디터

tinyMce 무료라서 좋다. 아이콘이라던가 디자인도 심플하고 언어팩도 다양하게 지원되고

약간 초기설정이 조금 있기는하지만 그리 어렵지 않기때문에

큰불편함없이 사용가능할듯.


홈페이지 : http://www.tinymce.com/


다좋은데 보니깐 이미지 첨부 부분이 서버에서 URL 적어서 연결하는 부분이라.

업로드 기능으로 변경. 아주 간단하게 아래 소스참고


tinymce.init({
            selector: "#mytextarea",
            theme: "modern",
           	language: "ko",
            menubar:false,
            plugins: "autolink autosave code link media image table textcolor autoresize",
		    toolbar: "undo redo | styleselect | forecolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table link media custom_image code ",
		    setup: function(editor) {
		    editor.addButton('custom_image', {
		            title: '이미지삽입',
		            icon: 'image',
		            onclick: function() {
		                window.open("POPUP_URL","tinymcePop","width=400,height=350");
		            }
		        });
		    }

        });

기본설정에 몇가지 추가하고

핵심은 저기 플러그인에 custom_image 라는 것과 

addButton 에 custom_image 를 맞춰주면 됨. icon 에 image 를 쓰면 

자체 이미지 아이콘이 나옵니다. 그러기 위해선 사용하진 않지만 플러그인에 image 도 추가


버튼추가 형식으로 구현하는 겁니다.


팝업창은 평소 업로드 하는 방식대로 직접 구현하시면 됩니다.

파입업로드후 팝업창 에서 아래와 같이 입력하면 됩니다.


opener.tinymce.activeEditor.execCommand("mceInsertContent",'false',이미지경로);

그러면 에디터 본문에 이미지가 삽입이 됩니다.

간단하쥬?


예제 : http://dev.songtory.com/template/editor_temp.html


tinymce,editor,upload,image
Comment Write
Comment List
hanna 2023.11.22 18:30              
제가 이미지 업로드 하면 파일 타입으로 변형시키고 formData에 넣어서 백 서버에서 multiPartFile로 받고 파일 저장 다 됐는데 이미지 자체 src가 계속해서 base64 blob으로 저장되는데 이러면 데이터베이스에 영향이 너무 커서 img src를 파일 저장 경로로 바꾸려는데 혹시 올리신것보니까 커스텀으로 맞추신거같은데 코드 공유 가능하실까요ㅠㅠ
도와주십셔... 2021.07.09 00:08              
워드프레스를 시작한지 어언 6일... 어찌어찌 찾고 묻고 하면서 온갖 역경을 딛고 이제서야 글쓰기 단계에 왔는데 이젠 또 이미지가 안올라가는군요... 저도 만드신 그대로 사용하고 싶습니다... 또, css로 수정하면 업데이트 후에 다시 코드를 덮어써야 하는 것인지도 궁금합니다
살려주세요 2019.04.25 21:22              
ㅠㅠ제가 초보라서 그러는데 저 코드를 어디에 작성해야하는지 알 수 있을까요 가능하다면 만드신 그대로 사용하고 싶습니다..ㅠㅠ꼭 부탁드립니다.
reply_arrow 토리 2019.04.30 14:25         
음.. 메일로 보내 드릴게요
지나가는 개발자 2018.09.05 12:03              
안녕하세요 작성해준 글 덕분에 잘 개발해나가는데 파일 업로드 하고 확인 버튼 누르면 액션이 upload_post.php 여기로 보내지고 있던데 여기서는 어떤 작업을 해서 TextArea에 사진이 들어가는지 알고 싶습니다
reply_arrow 토리 2019.04.30 14:19         
upload_post.php 에서 실제로 서버에 파일을 업로드 하고 그 저장된 파일 path를 가져와서 tinymce 에디터에 넣어주는 역할을 하고 있습니다.
뉴비예요 2016.05.01 04:52              
안녕하세요 작성해주신 글 덕분에 tinymce를 불러오는 데까지는 성공했습니다. 혹시 file selector 창을 바로 불러오고 싶으면 어찌해야하는지 알 수 있을까요?? 아니면 마지막에 서술해주신 코드를 어디에 삽입을 해야하는지 관련된 문서나 페이지가 있는지 가르쳐주시면 안될까요?? 감사합니다
reply_arrow 토리 2016.05.02 09:16         
이미지 아이콘 추가해서 팝업창 띄우는것 까지 하셨다면. 팝업창에서 파일선택하고 업로드프로세스파일(안만들었다면 만들어야함) 에서 바로 추가하시거나 아님 그곳에서 리턴값으로 팝업창으로 값을 돌려주고 팝업창에서 추가하시면 됩니다.
토리 2015.10.28 15:00              
TinyMCE Image Upload