CMS DesignerコミュのCMSDesignerにWYSIWYGエディタを導入する。

CMSDesignerの将来予定している機能
http://cms.al-design.jp/future.html
から Wiki記法の一部導入。table、h1～h6、ulの記述等。が一旦取りやめとなってしまいました。クライアントからの要望も多いため、nicEditというWYSIWYGエディタをCMSDesignerに組み込んでみました。

サンプルを置いておきますので、動作などを確認して使えるようなら使ってくださいませ。
また不具合などに関しては自己責任でお願い申し上げます。

http://momora.s296.xrea.com/cmsdesigner/manager.php
↑管理ページのURL
ユーザー名：admin
※パスワードはありません。
※仮でヤフーニュースを掲載していますが、自由に書換・新規作成してもらって構いません。

【課題など】
無料のXREAサーバーなので動作が緩慢な所や、たまに表示されないことがありますが、一般的なサーバーなら問題はありません。
またCMSDに組み込むにあたって、色々なテキストエディタを試しましたがnicEditは30kbほどと軽量で、CMSDの中身をほとんど変更することなく使えたので、コレに決めました。
ただ、?JavaScriptの補足でも書きましたがentryeditor.XSLで追加したJavaScript内の記述が変更できないので、テキストエリアのデータ名は決めておく必要があります。
JavaScript自体も無駄がありそうなので、誰かこの辺を解決できる方がいらっしゃいましたら、フォーラムに返信して頂ければ幸です。

既存のCMSDサイトでも簡単に対応できると思いますが、自己責任で使用してください。

動作確認での不具合やブラウザ対応などの情報もお待ちしております。

【組み込み方法】

?WYSIWYGエディタ（nicEdit）の取得
nicEditは以下のURLからDLできます。
http://www.nicedit.com/

使用変更した当該ファイルのダウンロードURL（nicEdit込み）
http://momora.s296.xrea.com/download.zip

?WYSIWYGエディタファイルをサーバーにアップします。
サーバー上の任意の場所に置けますが今回はwysiwygというフォルダを作りその中に下記の2つのファイルをアップします。
・nicEdit.js
・nicEditorIcons.gif

?nicEdit.jsの書換え
nicEdit.jsの32行目のエディタアイコンへのパスをフルパスに書換えます。
例/
[code]iconsPath : 'http://ドメイン名/wysiwyg/nicEditorIcons.gif',
[/code]

?CMSDのincludeフォルダ内のentryeditor.xslを書き換えます。
entryeditor.xslの530行目から<xsl:when test="@type='textarea'">で始まるテキストエリアの記述がありますので、</xsl:when>で閉じている記述の内の任意の場所に以下のJavaScriptを記述します。


<a href="javaScript:void(0)" onClick="add{@name}();" >リッチテキストで編集</a>　→　<a href="javaScript:void(0)" onClick="remove{@name}();">リッチテキストを適応</a>

<script type="text/javascript" src="http://ドメイン名/wysiwyg/nicEdit.js">//</script>
<script>
var area1, area2, area3, area4, area5;

function addbody() {
area1 = new nicEditor({fullPanel : true}).panelInstance('body');
}
function removebody() {
area1.removeInstance('body');
}
function addbody2() {
area2 = new nicEditor({fullPanel : true}).panelInstance('body2');
}
function removebody2() {
area2.removeInstance('body2');
}
function addbody3() {
area3 = new nicEditor({fullPanel : true}).panelInstance('body3');
}
function removebody3() {
area3.removeInstance('body3');
}
function addbody4() {
area4 = new nicEditor({fullPanel : true}).panelInstance('body4');
}
function removebody4() {
area4.removeInstance('body4');
}
function addbody5() {
area5 = new nicEditor({fullPanel : true}).panelInstance('body5');
}
function removebody5() {
area5.removeInstance('body5');
}
</script>


?JavaScriptの補足
スキーマファイルのテキストエリアのデータ名はbody、body2、body3、body4、body5までの固定になっています。
XSLファイル内でのJavaScriptの記述が{@name}などで置き換わらないので、このような片手落ちの仕様になってしまいました。
※既存のCMSDサイトに適応させる場合は、スキーマで設定したデータ名を（body、body2、body3、body4、body5）の替わりに入れてください。

テキストエリアをスキーマで沢山定義する場合は、JavaScriptの以下の（body・area)記述の数字部分を増やして追加してください。

var ・・・area5

function addbody5() {
area5 = new nicEditor({fullPanel : true}).panelInstance('body5');
}
function removebody5() {
area5.removeInstance('body5');
}

※本家サイトのフォーラムにも同じ内容で掲載しております。

以上になります。