1

「tiny-mce」を grails で使用すると問題が発生します (テキストエリアが正しく表示されません)。私は Eclipse Indigo を使用しており、「grails install-plugin tiny-mce」で tiny-mce プラグインをインストールしました。私が書いたコードは次のとおりです。

<!doctype html>
<html>
<head><title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <tinyMce:resources />
    <tinyMce:importJs/>
</head>

<body>
        <tinyMce:renderEditor type="advanced"/>

</body>

</html>

問題は、表示されるテキストエリアに tiny-mce 機能がないことです。つまり、テキストをフォーマットするために使用できるすべての優れたプロパティ/ボタンです。テキストエリアは単純な html テキストエリアです。検査済みの生成されたソース コード (つまり、右クリック -> ソースの表示) に問題があるようです。

<!doctype html>
<html>
<head><title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>    
    <script type="text/javascript" src="/MyGrailsProject/static/plugins/tiny-mce-    3.4.9/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
     <script type="text/javascript" src="/MyGrailsProject/static/plugins/tiny-mce-3.4.9/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script><script type="text/javascript">tinyMCE.init({
                            mode : "textareas",
                            theme : "simple",
                            editor_selector : "mcesimple",
                            theme_advanced_toolbar_location : "null"
                        });tinyMCE.init({
                            mode : "textareas",
                            theme : "advanced",
                            editor_selector : "mceadvanced",
                            theme_advanced_toolbar_location : "top"
                        });</script>
</head>
<body>
<textarea class='null mceadvanced'></textarea>
</body></html>

textarea クラスに null 値があるようです。これは正しいです？私のテキストエリアが正しくレンダリングされない理由を誰かが知っていますか? ファイル「tiny_mce.js」が見つからないことに関連する問題ですか？その場合、どうすればこれを修正できますか?

宜しくお願いしますクレイ

4

6 に答える 6

2

わかりましたので、次のようにしてこれを機能させました。

  1. http://www.tinymce.com/download/download.phpから tinymce をダウンロードします=> ファイル ~/tinymce を提供します
  2. ~/tinymce を /web-apps/js/tiny_mce にコピーします
  3. main.gsp に追加<g:javascript src="tiny_mce/tiny_mce.js"/>します。これにより、web-apps/js フォルダーの下のフォルダーが取得されます。
  4. Tiny mce は、この時点ではまだ機能しません。en.js と editor_template.js について文句を言います
  5. Config.groovy に移動して、この行を追加する必要があります
    grails.resources.adhoc.excludes = ['/js/tiny_mce/**/*.*']

  6. gsp に戻り、tiny_mce.init() 行 ex を追加します。 

    tinyMCE.init({
    theme : "advanced",
    mode : "textareas",
    plugins : "fullpage",
    theme_advanced_buttons3_add : "fullpage"
});

    <g:javascript>のようなタグの内側

    <g:javascript>
tinyMCE.init({
    テーマ：「高度」、
    モード：「テキストエリア」、
    プラグイン：「フルページ」、
    theme_advanced_buttons3_add : 「フルページ」
});
</g:javascript>

  7. いつものようにテキストエリアを追加します<g:textArea name="..."/>

  8. Grails はデフォルトで html を次のようにエスケープする${fieldValue(bean:...)}ので、美しい小さな mce マークアップはエスケープさ れます
  9. 上記を${object.field}and ex:に変更すると${person.firstName}、それができました。
于 2012-10-15T22:28:33.327 に答える
1

TinyMCE Grails プラグインは必要ありません。現在、3 か月前のものです。代わりに、TinyMCE のサイトにアクセスして、最新バージョンをダウンロードできます。

ZIP ファイルを解凍し、そのフォルダーをフォルダーtinymce\jscripts\tiny_mceの下の Grails プロジェクトにコピーしweb-appます。(これはResourcesプラグインによって管理され、必要なすべての静的リソースを 内で公開する必要があるため、にコピーしないように注意してください。)web-app\jsApplicationResources.groovy

次に、.GSP 内<head>で、ページのセクションに次のようなものがあります。

<g:javascript src="../tiny_mce/tiny_mce.js"/>
<r:script>
    tinyMCE.init({
        mode: "textareas",
        theme: "advanced"
    });
</r:script>
于 2012-06-26T12:51:06.877 に答える
1

それを機能させるためのはるかに簡単な方法 - tinymce js を HTML ヘッドに含めます。

<head>
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
        tinymce.init({selector:'textarea'});
</script>
</head>

GSP に textarea 要素がある (「メッセージ」は、フィールド名が「コンテンツ」のコマンド オブジェクトです)

<textarea  rows="10" name="content" >${fieldValue(bean:message,field:'content')}</textarea>

これは CDN //tinymce.cachefly.net の代わりに Grails 2.2 でテストされています。tinymce js ファイルを web-app/js ディレクトリに配置し、GSP に含めることができます。

于 2013-08-27T06:45:37.980 に答える
0

リッチ テキスト エディター用のリッチ ui プラグインを使用できます。

とてもシンプルでいいです。

ricuuiプラグインをインストールするだけで

head セクションにリソースを追加します。

このような。

これをヘッドセクションに

これを体に------

そして楽しむ......

于 2012-06-05T07:58:13.563 に答える
0

エディターを機能させるには、「tiny_mce.js」を見つける必要があります。ここで正しいパスを使用していることを確認してください。

于 2012-05-21T10:32:46.630 に答える