GWT, TinyMCE Editor 연동.

GWT - 2.0.4

Tiny MCE - 3.5.1.1 버전 기준이다.

TinyMCEEditor 를 다운 받아 압축을 풀고  Eclipse에서 import를 하면 실행 된다.

gwt-tinymce.z01

gwt-tinymce.z02

gwt-tinymce.zip

Dialog에서 TinyMCE를 보여줄 경우 문제가 발생할 수 있다.

dialog api 중에 setmodal를 true로 할 경우  tinymce editor에서 font 변경 등의 dropbox가 작동하지 않는다.

주요 알아야 할 내용

이미지에서 빨간색 밑줄만 참고하면 된다.

1. tiny_mce를 다운 받고 war 폴더에 복사한다.

2. TinyMceEditor.html을 열고 

  <script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>

를 추가한다.

3. TinyMceMoudle.java 클래스를 생성 한다.

public class TinyMceMoudle extends Composite{ 

	private TextArea textArea;
	private String editorId;
	private boolean isLoaded = false;
	private JavaScriptObject editorInstance;

	private List loadListeners;
	private List changeListeners;

	public TinyMceMoudle() {
		editorId = "tinyMCE-" + System.currentTimeMillis();

		loadListeners = new ArrayList();
		changeListeners = new ArrayList();

		textArea = new TextArea();
		textArea.setWidth("90%");
		DOM.setElementAttribute(textArea.getElement(), "id", editorId);
		initWidget(textArea);
		Scheduler.get().scheduleDeferred(new Command() {
			@Override
			public void execute() {
				initEditor();
			}
		});
	}
// 주요 참고 할 내용들이다.
// 이 부분을 수정하면 에디터의 메뉴를 간단하게 or 복잡하게 바꿀 수 있다.

	private native void initEditor()/*-{
      var editor = new $wnd.tinymce.Editor(this.@kr.or.jhpark.client.editor.TinyMceMoudle::editorId, {
        theme : "advanced",
        skin : "o2k7",
        plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",

        theme_advanced_buttons1 : "bold,italic,underline,|,bullist,numlist,|,paste,pastetext,pasteword,|,fullscreen,|,code",
	    theme_advanced_buttons1_add : "fontselect,fontsizeselect",
	    theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
	    theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
	    theme_advanced_buttons3_add_before : "tablecontrols,separator",
	    theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
	    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,spellchecker,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,|,insertfile,insertimage",

		theme_advanced_resize_horizontal : false,
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "none",
        plugin_insertdate_dateFormat : "%Y-%m-%d",
	    plugin_insertdate_timeFormat : "%H:%M:%S",
	    extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],p[lang]",
	    theme_advanced_resize_horizontal : false,
        theme_advanced_resizing : true

      });

      this.@kr.or.jhpark.client.editor.TinyMceMoudle::editorInstance = editor;

      var self = this;
      editor.onInit.add(function(ed) {
          self.@kr.or.jhpark.client.editor.TinyMceMoudle::isLoaded = true;
      });
      editor.render();
  }-*/;

	public native void focus()/*-{
      this.@kr.or.jhpark.client.editor.TinyMceMoudle::editorInstance.focus(false);
  }-*/;

	/**
	 * @see com.google.gwt.user.client.ui.Widget#onLoad()
	 */
	protected void onLoad() {
		super.onLoad();
		Scheduler.get().scheduleDeferred(new Command() {
			@Override
			public void execute() {
				setWidth("100%");
			}
		});
	}
	public void unload() {
		unloadMCE(editorId);
	}

	/**
	 * unloadMCE() -
	 * 
	 * @param id
	 *            - The element's ID JSNI method to implement unloading the MCE
	 *            editor instance from memory
	 */
	protected native void unloadMCE(String id) /*-{
                $wnd.tinyMCE.execCommand('mceRemoveControl', false, id);
        }-*/;

	public void setHTML(final String html) {
		if (!isLoaded) {
			Scheduler.get().scheduleDeferred(new Command() {
				@Override
				public void execute() {
					_setHTML(html);
				}
			});
		} else {
			_setHTML(html);
		}
	}

	private native void _setHTML(String html)/*-{
      this.@kr.or.jhpark.client.editor.TinyMceMoudle::editorInstance.setContent(html);
  }-*/;

	public native String getHTML()/*-{
      return this.@kr.or.jhpark.client.editor.TinyMceMoudle::editorInstance.getContent();
  }-*/;


}

4.재사용할 때unloadMCE()를 반드시 호출해야 한다. 

지금 보니 필요없는 소스가 있는데.. 알아서 수정해서 사용하세요..