PowerCMS™

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(任意)

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

<$EntryDataEXAMPLE key="EntryDataEXAMPLE_text"$>

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

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


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

Recent Entries