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

기리아빠

추천 수 349

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

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 도 추가

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

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

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

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

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

간단하쥬?

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

* 네이버 파일 업로드를 붙여 놓은것 같다. ㅎㅎㅎ

< Prev 10 Best jQuery and HTML5 WYSIWYG Plugins - jQuery Editor

[답변]tinyMce 에디터 이미지업로드(image upload) 추가 Next >

♥