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

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