我的GWT應用程序的TinyMCE或SmartGWT富文本編輯器？

Question

我想在我的GWT應用程序中添加一個富文本編輯器。 TinyMCE是一個候選者，SmartGWT中的富文本編輯器也是如此。 你對兩者之間的選擇有什么建議嗎？

Answer 1

我不會那么快解雇TinyMCE - 它比GWT的富文本編輯器有很多優點 - 對我來說，它是插件 - 我需要一個富文本編輯器來生成bbcode而不是html - 不能用不幸的是，GWT的組件。 所以我擴展了TinyMCE的標准bbcode插件以滿足我的需求並且瞧瞧:)

下面是我用來將TinyMCE集成到GWT中的類（由Aaron Watkins稍微修改過原來的類，以解決拖放問題和其他一些問題;））：

編輯：略微更改以包含David的建議

/**
 * Created on 20/08/2007
 *
 * Wrapper for TinyMCE
 * NOTE: Expects Javascript includes to be in enclosing HTML
 *
 * Author: Aaron Watkins (aaronDOTjDOTwatkinsATgmailDOTcom)
 * Website: http://www.goannatravel.com
 * Home Page for initial release of this widget: http://consult.goannatravel.com/code/gwt/tinymce.php
 *
 * Copyright [Aaron Watkins]
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.DeferredCommand;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.HasText;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
 * TinyMCE -
 *
 * A wrapper widget for using TinyMCE. It contains a number of JSNI methods that
 * I have found useful during development
 *
 * @author Aaron Watkins
 */
public class TinyMCE extends Composite implements HasText {

    private TextArea ta;
    private String id;

    public TinyMCE(int width, int height) {
        super();

        VerticalPanel panel = new VerticalPanel();
        initWidget(panel);
        panel.setWidth("100%");

        id = HTMLPanel.createUniqueId();
        ta = new TextArea();
        ta.setCharacterWidth(width);
        ta.setVisibleLines(height);
        DOM.setElementAttribute(ta.getElement(), "id", id);
        DOM.setStyleAttribute(ta.getElement(), "width", "100%");
        panel.add(ta);
    }

    /**
     * getID() -
     *
     * @return the MCE element's ID
     */
    public String getID() {
        return id;
    }

    protected static native String getEditorContents(
        String elementId) /*-{
        return $wnd.tinyMCE.get(elementId).getContent();
    }-*/;

    protected static native void setEditorContents(
        String elementId, String html) /*-{
        $wnd.tinyMCE.execInstanceCommand(
        elementId, 'mceSetContent', false, html, false);
    }-*/;

    public void setText(String text) {
        setEditorContents(id, text);
    }

    public String getText() {
        return getEditorContents(id);
    }

    public void setEnabled(boolean enabled) {
        ta.setEnabled(enabled);
    }

    /**
     * @see com.google.gwt.user.client.ui.Widget#onLoad()
     */
    protected void onLoad() {
        super.onLoad();

        DeferredCommand.addCommand(new Command() {
            public void execute() {
                setWidth("100%");
                setTextAreaToTinyMCE(id);
                focusMCE(id);
            }
        });
    }

    /**
     * focusMCE() -
     *
     * Use this to set the focus to the MCE area
     * @param id - the element's ID
     */
    protected native void focusMCE(String id) /*-{
        $wnd.tinyMCE.execCommand('mceFocus', true, id);
    }-*/;

    /**
     * resetMCE() -
     *
     * Use this if reusing the same MCE element, but losing focus
     */
    public native void resetMCE() /*-{
        $wnd.tinyMCE.execCommand('mceResetDesignMode', true);
    }-*/;

    /**
     * unload() -
     *
     * Unload this MCE editor instance from active memory.
     * I use this in the onHide function of the containing widget. This helps
     * to avoid problems, especially when using tabs.
     */
    public void unload() {
        unloadMCE(id);
    }

    /**
     * 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('mceFocus', false, id);
        $wnd.tinyMCE.execCommand('mceRemoveControl', false, id);
    }-*/;

    /**
     * updateContent() -
     *
     * Update the internal referenced content. Use this if you programatically change
     * the original text area's content (eg. do a clear)
     * @param id - the ID of the text area that contains the content you wish to copy
     */
    protected native void updateContent(String id) /*-{
        $wnd.tinyMCE.activeEditor = $wnd.tinyMCE.get(id);
        $wnd.tinyMCE.activeEditor.setContent($wnd.document.getElementById(id).value);
    }-*/;

    /**
     * getTextArea() -
     *
     */
    protected native void getTextData(String id) /*-{
        $wnd.tinyMCE.activeEditor = $wnd.tinyMCE.get(id);
        $wnd.tinyMCE.activeEditor.save();
        $wnd.tinyMCE.triggerSave();
    }-*/;

    /**
     * encodeURIComponent() -
     *
     * Wrapper for the native URL encoding methods
     * @param text - the text to encode
     * @return the encoded text
     */
    protected native String encodeURIComponent(String text) /*-{
        return encodeURIComponent(text);
    }-*/;

    /**
     * setTextAreaToTinyMCE() -
     *
     * Change a text area to a tiny MCE editing field
     * @param id - the text area's ID
     */
    protected native void setTextAreaToTinyMCE(String id) /*-{
        $wnd.tinyMCE.execCommand('mceAddControl', true, id);
    }-*/;

    /**
     * removeMCE() -
     *
     * Remove a tiny MCE editing field from a text area
     * @param id - the text area's ID
     */
    public native void removeMCE(String id) /*-{
        $wnd.tinyMCE.execCommand('mceRemoveControl', true, id);
    }-*/;
}

記得在你的html文件中初始化TinyMCE，例如（關鍵設置是mode : "textareas" ，其余的應該是安全的更改）：

<script type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
    tinyMCE.init({
        theme : "advanced",
        skin : "default",
        mode : "textareas",
        plugins : "bbcode",
        theme_advanced_buttons1 : "bold,italic,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,sup,sub,|,undo,redo,separator,cut,copy,paste,|,fontsizeselect,forecolor,backcolor",
        theme_advanced_buttons2 : "blockquote,link,unlink,image,styleselect,removeformat,|,charmap,code",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "bottom",
        theme_advanced_toolbar_align : "center",
        theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle;PHP Code=phpCodeStyle",
        entity_encoding : "raw",
        add_unload_trigger : false,
        remove_linebreaks : false,
        button_tile_map : true
    });
    </script> 

您還可以嘗試其他包裝，如http://www.ohloh.net/p/tinymce-gwt

Answer 2

無論如何，如果你正在使用GWT，那么你可以通過不使用GWT富文本編輯器組件來拍攝自己，無論是來自SmartGWT庫還是其他地方。

值得注意的是，GWT也有一個RichTextArea類 。

Answer 3

出於某種原因，Aaron Watkins的代碼在GWT托管模式下無法正常工作。 我設法通過更改設置和檢索編輯器內容的方式來解決問題。

我添加了以下兩種方法：

protected static native String getEditorContents(
   String elementId) /*-{
   return $wnd.tinyMCE.get(elementId).getContent();
}-*/;

protected static native void setEditorContents(
   String elementId, String html) /*-{
   $wnd.tinyMCE.execInstanceCommand(
     elementId, 'mceSetContent', false, html, false);
}-*/;

...並替換了setText（）和getText（）方法，如下所示：

public void setText(String text) {
   setEditorContents(id, text);
}

public String getText() {
   return getEditorContents(id);
}

我不確定這是否是“最佳實踐” - 我確信Aaron有理由這樣做 - 但它使我的代碼在Firefox和GWT托管瀏覽器中都能運行。