java - GWT アプリ用の TinyMCE または SmartGWT リッチテキストエディター?

Question

GWT アプリケーションにリッチテキストエディターを追加したいと考えています。TinyMCE はその候補の 1 つです。SmartGWT のリッチテキストエディターも同様です。どちらかを選ぶ際のアドバイスはありますか？

score 7 · Accepted Answer

TinyMCE をすぐに却下することはできません - GWT のリッチテキストエディタよりも多くの利点があります - 私にとっては、それはプラグインでした - HTML ではなく bbcode を生成するリッチテキストエディタが必要でした - それを行うことはできません残念ながら、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のような他のラッパーを試すこともできます

score 3 · Accepted Answer

とにかくGWTを使用している場合は、SmartGWTライブラリやその他の場所にあるGWTリッチテキストエディターコンポーネントを使用せずに、足を踏み入れていることになります。

GWTにもRichTextAreaクラスがあることは注目に値します。

score 0 · Accepted Answer

何らかの理由で、Aaron Watkins のコードは GWT ホストモードで正しく動作しませんでした。エディターの内容を設定および取得する方法を変更することで、問題を解決することができました。

次の 2 つのメソッドを追加しました。

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 でホストされたブラウザーの両方で動作するようになりました。

java - GWT アプリ用の TinyMCE または SmartGWT リッチ テキスト エディター?

3 に答える 3

Related

Reference

java - GWT アプリ用の TinyMCE または SmartGWT リッチテキストエディター?