concrete5でTinyMCEのテンプレートプラグインを使用する
Category: blog
concrete5でTinyMCEのテンプレートプラグインを使用できるように設定したので、設定方法を掲載します。
テンプレートプラグインを使用すると、記事エディタの入力欄にコンテンツの雛形を挿入できるようになります。
よく使用するテンプレートを作成しておくと、ページへのコンテンツの追加が早くなります。
1. tiny_mceディレクトリのコピー
templateプラグインを追加するだけの場合、特にコピーしなくてもいいのですが、
ここではconcrete/js/tiny_mceディレクトリを丸ごとユーザー領域のjsディレクトリにコピーします。
丸ごとコピーするとconcrete5のアップグレード時にコアファイルが置き換わった際の影響度が低くなります。
2. テンプレートの作成
ユーザー領域のjs/tiny_mce/にtemplatesディレクトリを作成し、テンプレートを作成します。
テンプレートの書式は下記の通りです。
必ず、class属性にmceTmplを指定するようにしてください。
必要な分だけテンプレートを作成してください。
<div class="mceTmpl"> <div class="hd"> <h3>some title</h3> </div> <div class="bd"> <p>some contents</p> </div> </div>
3. テンプレートのリストファイル作成
ユーザー領域のjs/tiny_mce/にlists/ディレクトリを作成し、テンプレートのリストファイルを作成します。
ここではtemplate_list.jsという名前でリストファイルを作成します。
変数tinyMCETemplateListにテンプレートのリストを定義します。
左から順にタイトル、テンプレートファイルのURL、詳細情報を指定します。
var baseTemplatePath = "/js/tiny_mce/"; var tinyMCETemplateList = [ ["テンプレート1", baseTemplatePath + "templates/some-template1.html", "テンプレート1です。"], ["テンプレート2", baseTemplatePath + "templates/some-template2.html", "テンプレート2です。"] ];
4. tinymceの設定の変更
サイト全体の設定から、記事ブロックエディター設定でカスタムを選択します。
表示された設定内容を変更します。
デフォルトの設定は下記の通りにような感じになっていると思います。
これを変更します。
theme : "concrete", plugins: "inlinepopups,spellchecker,safari,advlink", editor_selector : "ccm-advanced-editor", spellchecker_languages : "+English=en", theme_concrete_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,hr,|,styleselect,formatselect,fontsizeselect", theme_concrete_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,forecolor", theme_concrete_blockformats : "p,address,pre,h1,h2,h3,div,blockquote,cite", theme_concrete_toolbar_align : "left", theme_concrete_fonts : "Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats", theme_concrete_font_sizes : "1,2,3,4,5,6,7", theme_concrete_styles: "Note=ccm-note", spellchecker_languages : "+English=en" /* // Use the advanced theme for more than two rows of content plugins: "inlinepopups,spellchecker,safari,advlink,table,advhr,xhtmlxtras,emotions,insertdatetime,paste,visualchars,nonbreaking,pagebreak,style", editor_selector : "ccm-advanced-editor", theme : "advanced", theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,|,undo,redo,|,styleselect,formatselect,fontsizeselect,fontselect", theme_advanced_buttons2 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,anchor,|,forecolor,backcolor,|,image,charmap,emotions", theme_advanced_fonts : "Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats", // etc. */
変更内容は下記の通りです。
- pluginsにtemplateを追加する。
- theme_concrete_buttons2にtemplateを追加(theme_concrete_buttons2じゃなくてもいいです。)
- template_external_list_urlにテンプレートのリストファイルを指定する。
Exp: /js/tiny_mce/lists/template_list.js
theme : "concrete", plugins: "inlinepopups,spellchecker,safari,advlink,template", editor_selector : "ccm-advanced-editor", spellchecker_languages : "+English=en", theme_concrete_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,hr,|,styleselect,formatselect,fontsizeselect", theme_concrete_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,forecolor,template", theme_concrete_blockformats : "p,address,pre,h1,h2,h3,div,blockquote,cite", theme_concrete_toolbar_align : "left", theme_concrete_fonts : "Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats", theme_concrete_font_sizes : "1,2,3,4,5,6,7", theme_concrete_styles: "Note=ccm-note", spellchecker_languages : "+English=en", template_external_list_url: "/js/tiny_mce/lists/template_list.js", template_cdate_classes : "cdate creationdate", template_mdate_classes : "mdate modifieddate", template_selected_content_classes : "selcontent", template_cdate_format : "%m/%d/%Y : %H:%M:%S", template_mdate_format : "%m/%d/%Y : %H:%M:%S"
Related Post:
It is a list of related articles.
Trackback:
It is a comment that has been gotten before.
トラックバックを下記のURLに送ってください。
http://sharedhat.com/blog/1178/trackback/






Reply:
Please give the comment to this article.