08
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--
LATEST ENTRY
CATEGORY
ARCHIVE
PROFILE
SEARCH
RECENT COMMENT
  • 【情報】Excel で スクレイピング 【ぶっこ抜き】
    縫部尚登 (06/17)
  • 【QUICKFIX】 FX自動売買への道 18 【通貨ペアの取得(SecurityListRequest)】
    ganponfx (05/05)
  • 【QUICKFIX】 FX自動売買への道 18 【通貨ペアの取得(SecurityListRequest)】
    まこ (05/05)
  • 【QUICKFIX】 FX自動売買への道 18 【通貨ペアの取得(SecurityListRequest)】
    ganponfx (05/04)
  • 【QUICKFIX】 FX自動売買への道 18 【通貨ペアの取得(SecurityListRequest)】
    ganponfx (05/04)
  • 【QUICKFIX】 FX自動売買への道 18 【通貨ペアの取得(SecurityListRequest)】
    ganponfx (05/04)
  • 【QUICKFIX】 FX自動売買への道 18 【通貨ペアの取得(SecurityListRequest)】
    ganponfx (05/03)
  • 【QUICKFIX】 FX自動売買への道 18 【通貨ペアの取得(SecurityListRequest)】
    まこ (05/03)
  • 【QUICKFIX】 FX自動売買への道 18 【通貨ペアの取得(SecurityListRequest)】
    ganponfx (05/03)
  • エクセルファイルのパスワードを忘れたら・・・
    里奈 (09/09)
MOBILE
qrcode
OTHERS
<< 神尾 真由子 ヴァイオリン リサイタル | top | 【今さら】Windows7 64bit で地デジを録画【Friio】 >>
スポンサーサイト

一定期間更新がないため広告を表示しています

スポンサードリンク | - | | - | - |
【modx】 Jot で TinyMCE を使ってみる 【活用】
CMS というより、プラットフォームとして使っている modx

標準で入っている機能 jot と tinyMCE を組み合わせてみた
 

CMS についてはコチラを参照
 
抜粋
コンテンツマネジメントシステム(Content Management System,CMS)は、Webコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの総称。2005年頃より一般的に普及したといわれる。コンテンツ管理システムとも呼ばれる。


modx については コチラ とか コチラ を参照
 
抜粋
MODx(モドエックス,モッドエックス)はPHPとMySQLで動作するオープンソースコンテンツマネージメントシステム。Etomiteから派生した。基本仕様のシンプルさ、テンプレートシステムの柔軟性・拡張性の高さ・URL設定の自由度の高さ・安定したキャッシュ制御による軽快な動作・ロールの概念に則ったユーザ権限管理(※ただし承認フローは未実装、2010年中に実装予定)・一部にAjaxを活用したスタイリッシュかつ操作性の高い管理画面が特長。



現在、バージョン 2.0.4 まで出ていますが、内部構造が変わっているので
今回は扱いやすい 1.0.4 を利用します。

ダウンロードは コチラ から


とりあえず標準でインストールすればOK

最低限 TinyMCE と jot は入れておいてください。



では、jot の 投稿フォームに、 tinyMCE を組み合わせてみる手順をば


手順1: スニペットの追加

スニペットの追加を行います。
名前はわかりやすく 「 tinyMCE 」 としておきます。
スニペットの内容はこんな感じで
 
<?php
$event_output = $modx->invokeEvent("OnRichTextEditorRegister");
if(is_array($event_output)) $editor = $event_output[0];
else return "";
$event_output = $modx->invokeEvent("OnRichTextEditorInit", array('editor'=>$editor, 'elements'=>array($id)));
if(is_array($event_output)) $editor_html = implode("",$event_output);
echo $editor_html;
?>




手順2: チャンクの追加

jot の投稿用フォームで使うチャンクの追加を行います。
名前はやっぱりわかりやすく 「 jotForm 」 としておきます。
チャンクの内容はこんな感じで
 
<a name="jf[+jot.link.id+]"></a>

<form method="post" action="[+form.action:esc+]#jf[+jot.link.id+]" id="news" class="jot-form">
    <fieldset>
    <input name="JotForm" type="hidden" value="[+jot.id+]" />
    <input name="JotNow" type="hidden" value="[+jot.seed+]" />
    <input name="parent" type="hidden" value="[+form.field.parent+]" />
   
    <label for="title[+jot.id+]">タイトル:<br />
    <input
        tabindex="[+jot.seed:math=`?+3`+]"
        name="title"
        type="text"
        size="15"
        value="[+form.field.title:esc+]"
        id="title"
    /><br />
    </label><br />
   
    <label for="content[+jot.id+]">内容:<br />
    <textarea
        tabindex="[+jot.seed:math=`?+4`+]"
        id="content"
        name="content"
        cols="50"
        rows="8"
        onchange="documentDirty=true;"
        id="content"
    >[+form.field.content:esc+]</textarea>
    </label><br />
   
    <div style="float:right;width: 100px;"></div>
    <input
        tabindex="[+jot.seed:math=`?+5`+]"
        name="submit"
        type="submit"
        value="[+form.edit:is=`1`:then=`Save Comment`:else=`Post Comment`+]"
    />

    [+form.edit:is=`1`:then=`
        <input
            tabindex="[+jot.seed:math=`?+5`+]"
            name="submit"
            type="submit"
            value="Cancel"
            onclick="history.go(-1);return false;"
        />
    `+]
    </fieldset>
</form>
[[tinyMCE?&id=`content`]]
 





手順3: チャンクの追加

jot の投稿コメント表示で使うチャンクの追加を行います。
名前はやっぱりわかりやすく 「 jotComment 」 としておきます。
チャンクの内容はこんな感じで
 
<a name="jc[+jot.link.id+][+comment.id+]"></a>
<div style="border: 1px pink dotted; padding: 15px;">
     <span>
         タイトル:      [+comment.title:limit:esc+]<br />
     </span>

     <div style="background-color: #efe; padding: 10px;">
         内容:<br />
         [+comment.content+]
     </div>
</div>



手順4: リソース(ページ)の追加

jot で投稿を受け付けてコメント表示を行うページ追加を行います。
ページの内容はこんな感じで
 
<p>[!Jot? &amp;placeholders=`1` &amp;output=`0` &amp;tplForm=`jotForm` &amp;tplComments=`jotComment`!]
</p>

<div style="width: 400px; margin: 10px; float: left;">
[+jot.html.form+]
</div>

<div style="width: 200px; margin: 10px; float: left;">
[+jot.html.comments+]
</div>


 

以上

jot の投稿用フォームで tinyMCE が使えるようになってるはずです。


こんな感じに






















 
まこ | 開発 | 00:23 | comments(0) | trackbacks(0) |
スポンサーサイト
スポンサードリンク | - | 00:23 | - | - |
Comment









Trackback
URL: