PowerCMS™
2025年1月1日購入分よりライセンスの価格を改定いたします。
[ブログ] PowerCMS 6 でのアップデートまとめ を追加しました。
[ブログ] PowerCMS サポートの実績 (2024年9月) を追加しました。
[新着情報] PowerCMS 4 系のサポート終了予定について を追加しました。

PowerCMS ブログ

ホーム > PowerCMS ブログ > 設定・管理画面カスタマイズ > リッチテキストエディタが選択可能なカスタムフィールド(スニペットフィールド)を作成する

2017年06月22日

リッチテキストエディタが選択可能なカスタムフィールド(スニペットフィールド)を作成する

※(2020-04-02)TinyMCE4に対応するためにカスタムフィールドの設定の「既定値」のコードを修正しました。

テキストエリアに対してリッチテキストエディタが選択可能なカスタムフィールドスニペットフィールド)を作成する方法をご紹介します。

この方法により、ユーザーが任意でテキストエリアの入力方法を選択できるようになります。

カスタムフィールドの設定値

システムオブジェクト: (任意)
名前: (任意)
説明: (任意)
種類: スニペット
オプション: EntryDataEXAMPLE_format,EntryDataEXAMPLE_text(任意)
必須: (任意)
既定値:

<MTIgnore>「オプション」で指定した値を変数に格納する</MTIgnore>
<$MTSetVar name="_name_snippet_format" value="EntryDataEXAMPLE_format"$>
<$MTSetVar name="_name_snippet_text"   value="EntryDataEXAMPLE_text"  $>

<MTIgnore>編集画面のHTML</MTIgnore>
<div style="margin-bottom:5px;text-align:right;">
    フォーマット: 
    <select name="<$MTGetVar name="_name_snippet_format"$>" id="<$MTGetVar name="_name_snippet_format"$>">
        <option value="">なし</option>
        <option value="richtext"<MTIf name="$_name_snippet_format" eq="richtext"> selected="selected"</MTIf>>リッチテキスト</option>
    </select>
</div>
<div>
    <textarea name="<$MTGetVar name="_name_snippet_text"$>" id="<$MTGetVar name="_name_snippet_text"$>" class="text full high"><$MTGetVar name="$_name_snippet_text" escape="html"$></textarea>
</div>
<MTIgnore>エディタ処理</MTIgnore>
<script>
    jQuery(function($){
        var format_change = function(){
            var $format   = $('#<$MTGetVar name="_name_snippet_format"$>');
            var $textarea = $('#<$MTGetVar name="_name_snippet_text"$>');
            if($format.val() == 'richtext'){
                if (MT && MT.EditorManager){
                    new MT.EditorManager($textarea.attr('id'));
                }
            }else{
                if(tinymce.majorVersion >= 4){
                    tinymce.remove('#' + $textarea.attr('id'));
                }else{
                    tinyMCE.execCommand('mceRemoveControl', false, $textarea.attr('id'));
                }
            }
        }
        $('#<$MTGetVar name="_name_snippet_format"$>').on('change',format_change);
        format_change();
    });
</script>

ベースネーム: EntryDataEXAMPLE(任意)
テンプレートタグ: EntryDataEXAMPLE(任意)

テンプレートで保存された値を取り出す方法

<$MTEntryDataEXAMPLE key="EntryDataEXAMPLE_text"$>

画面イメージ(管理画面)

セレクトボックスでリッチテキストエディタを切り替える事が可能


カテゴリー
設定・管理画面カスタマイズ
投稿者
Fujimoto

Recent Entries