Nucleus(JP)フォーラム

NucleusCMS日本語版ユーザーのためのサポートフォーラムです。疑問が生じたらまずは記事検索をご利用ください。

ログインしていません。

#1 2006-02-25 02:05:08

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

FCKeditor利用のHTMLエディターです(スクリーンショット)。良く似たものは他にもありますが、私なりに機能を考えて作成してみました。主な特徴は次の通りです。

1.コアの変更無しでインストールできる。アンインストールも簡単。
2.Nucleus 標準の通常編集と WYSIWYG 編集の両方が行える。
3.Nucleus 標準のメディア管理ダイアログ(nucleus/media.php)を使用。
4.FCKeditor側で供給される、サーバ側のCGIは使用しない(セキュリティーを考えて)。
5.イメージタグは<%image()%>に、イメージへのリンクは<%popup()%>に変換される。
6.ブログごとのスタイルシートが編集画面でも反映される(バージョン 0.51 以降)。
7.メンバーごとに設定変更が可能(バージョン 0.53 以降)。

IEとFireFox (Windows)で動作確認しています。もし使って頂けるようでしたら、ご意見よろしくお願いします。

バージョンアップの際は、プラグイン管理メニューで古い方を削除してから、新しい物をインストールしてください。プラグインリストを表示して、新しいバージョンになっていることを確認してください。

[size=150:2f8zo7kt]Wikiも参考にしてください。

[size=150:2f8zo7kt]最新安定版は、こちらのトピックから。


Attachments:
zip NP_MitasNom0592.zip, Size: 6.2 KiB, Downloads: 294
zip mitasnom05992.zip, Size: 511.39 KiB, Downloads: 362
zip mitasnom05993.zip, Size: 511.39 KiB, Downloads: 353

オフライン

#2 2006-02-25 02:18:08

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

簡単に使用方法を説明します。詳しい説明書の作成は、仕様が確定次第行うつもりです。バージョン 0.53b 以降では、日本語に完全対応しています。

利用方法は2通りあります。
1.アイテムの編集ウィンドウの追加プラグインオプションから。
追加プラグインオプションのNP_MitasNomに、『WYSIWYG:body 』 『 WYSIWYG:more 』と表示されます。ここをクリックすると、WYSIWYGエディターが別画面で起動されます。

2.SkinVar及びTemplateVarをブログに埋め込む。
SkinVarとして『<%MitasNom(newitem,WYSIWYGで新しい記事)%>』、TemplateVarとして『<%MitasNom(edititem,WYSIWYGで編集)%>』とブログ中で記述すれば、WYSIWYGエディターを使った編集画面へのリンクが表示されます。

プラグインオプションについて
とりあえずは、インストールした時のデフォルトのままで問題ないと思います。FCKeditorで使用するツールバーの種類が、『Default』 『Full』 『Basic』 『Custom』 の中から選択できますので、好みの物を選んでください。

編集時のスタイルシート(バージョン0.5以降)
WYSIWYGで編集する際のスタイルシートをCSSファイルで指定できます。スキンの『Include Prefix』ディレクトリ(『skins/default/』など)に『mitasnom/』ディレクトリを作成し、『fckstyles.css』ファイルをそこに置いてください。一番簡単なのは、次のような例です。

@import url(../default_right.css);
body
{
	background: #FFFFFF;
};

『スタイル』メニューのカスタマイズ(バージョン0.5以降)
編集時の『スタイル』プルダウンメニューの選択項目がカスタマイズできます。スキンの『Include Prefix』ディレクトリ(『skins/default/』など)に『mitasnom/』ディレクトリを作成し、『fckstyles.xml』ファイルをそこに置いてください。文法は、プラグインディレクトリの『mitasnom/fckstyles.xml』を参考にしてください。

メンバー個別の設定
メンバーごとに設定を変えたい時は、『メンバーごとの設定を用いますか?』で『はい』を選択してください。この時点でのプラグインオプションの設定が、デフォルトになります。

オフライン

#3 2006-02-25 10:23:00

kosugiatkips
メンバー
From: 金沢区
登録日: 2006-01-15
投稿: 353

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

試してみました。
いいですね。実に簡単。

ところで、FirefoxだとXMLパースエラーが出てしまったので、下記のように修正してくれたらありがたいです。

183行目
<script type="text/javascript"><![CDATA[
222行目
]]></script>

XMLの仕様で、クォート内のタグでも解釈してしまうのを防ぎます。


あと、要望なんですが、指定したCSSファイルを読み込んでフォーマットのところにクラス名一覧を出すとかっていうのは難しいでしょうか?FCKエディタの仕様がわかってないので、勝手なこと言ってるのかもしれませんが。

オフライン

#4 2006-02-26 22:03:17

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

コメントどうもありがとうございます。

kosugiatkips さんの発言:

FirefoxだとXMLパースエラーが出てしまったので、下記のように修正してくれたらありがたいです。

183行目
<script type="text/javascript"><![CDATA[
222行目
]]></script>

そうか、XMLだと、この記述が必要ですね。

kosugiatkips さんの発言:

あと、要望なんですが、指定したCSSファイルを読み込んでフォーマットのところにクラス名一覧を出すとかっていうのは難しいでしょうか?FCKエディタの仕様がわかってないので、勝手なこと言ってるのかもしれませんが。

できそうな気がします。ちょっと見てみます。
あと、指定したCSSファイルを、プレビューで読み込むことは簡単です。ただし、編集画面でスタイルシートの設定を反映させることは難しいかも知れませんが。

オフライン

#5 2006-02-27 06:41:46

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

バージョン0.44をアップしました。 イメージタグで title="" を指定しないときに、alt=""からコピーする(あるいは、その逆)ようにしました。その他、複数の人でブログを管理しているときのイメージタグ関連のバグをフィックスしています。
それから、『<![CDATA[ 』の件ですが、私の環境だと上記の方法ではエラーがでます。ここの記述としては、

<script type="text/javascript">
//<![CDATA[ 

//]]>
</script>

あるいは

<script type="text/javascript">
<!--<![CDATA[ 

//]]>-->
</script>

のどちらかが使えそうなのですが、どちらでも良いものなのでしょうか?

スタイルシートの件ですが、『Default』ツールバーではオフになっている機能でこれに相当する物(『Full』ツールバーでは使える)がありそうなので、見ているところです。

オフライン

#6 2006-02-27 07:11:27

kosugiatkips
メンバー
From: 金沢区
登録日: 2006-01-15
投稿: 353

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

CDATAセクションってブラウザによって振る舞いが違うんですね・・・
<!--  だと、FireFoxではまったく動作しないですね。無視されるようです。
XMLの仕様だとタグの中までちゃんと解釈するので、IEのようにscriptタグ内のコメントを無視してくれないようです。
//   //なら動きます。//の方がいいのかな。根拠はありませんが、Win IE とFirefoxでは//がいいみたい。
別のブラウザはまた違ったりするのでしょうか。よくわかりませんが。

外部スクリプトファイルを参照させる手はあるかもしれません。
$this->getAdminURL() . 'js/hoge.js'とかして。

オフライン

#7 2006-02-27 19:30:08

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

kosugiatkips さんの発言:

外部スクリプトファイルを参照させる手はあるかもしれません。
$this->getAdminURL() . 'js/hoge.js'とかして。

やはりこうするのが確実なのかなという気もします。
ただ、『//<![CDATA[』で良いのなら、これが一番簡単でしょうか。javascript から見ればタダのコメントである訳だし、XMLから見れば、『//』は何の害もないプレインテキストということになりますから。

オフライン

#8 2006-02-28 04:13:29

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

バージョン 0.5.0aをアップしました。幾つか機能を追加しました。CDATAのコメントアウトは、

//<![CDATA[

//]]>

式にしてあります。不具合が出ましたら、知らせてください。

kosugiatkips さんの発言:

あと、要望なんですが、指定したCSSファイルを読み込んでフォーマットのところにクラス名一覧を出すとかっていうのは難しいでしょうか?FCKエディタの仕様がわかってないので、勝手なこと言ってるのかもしれませんが。

これについて、対応できていると思います。詳しくは、使用方法について書いた部分の『スタイル』メニューのカスタマイズを参照してください。うまく設定すれば、かなり色々なことができそうです。スキンディレクトリに置く形なので、将来的にスキンの方でこのプラグインに対応して頂ければいいなぁと思っています。 smile
cssファイルから自動的にこのxmlファイルを作成することも考えたのですが、cssファイルにはタグの種類(divを使うのか、spanを使うのか等)が記載されておらず、ここで用いているスタイルメニューではタグの種類も指定しなければならないため自動生成は難しいと思い、この形にしました。

また、WYSIWYGで編集する際の編集画面のスタイルシートも、同様の方法で指定できるようになりました。

もう一つの変更点としては、<%pluginName()%>等のタグを記事に埋め込んだ場合、小さなNucleusのバナーがアイコンとして表示されるようになりました。

オフライン

#9 2006-02-28 08:51:59

kosugiatkips
メンバー
From: 金沢区
登録日: 2006-01-15
投稿: 353

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

『スタイル』メニューのカスタマイズ ありがとうございました。
やってみましたが、とても良いです。
XMLもシンプルなので迷うところがなくてgoodです。

ところで、nucleus3.21の場合、テーブルプレフィックスを使っている環境では、

function supportsFeature($what) {
      switch($what) {
         case 'SqlTablePrefix':
            return 1;
         default:
            return 0;
      }
   }

がプラグインに入っていないとインストールできないです。(多分)(ちなみに私の環境ではそうでした)

オフライン

#10 2006-02-28 20:49:57

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

バージョン 0.5.1b をアップしました。とりあえず安定して動いているように思うので、今回のはベータ・バージョンとしました。

kosugiatkips さんの発言:

『スタイル』メニューのカスタマイズ ありがとうございました。
やってみましたが、とても良いです。
XMLもシンプルなので迷うところがなくてgoodです。

ご要望にお応えできたようで、良かったです。また、有り難うございました。おかげさまで、良い機能が盛り込めたと思っています。

kosugiatkips さんの発言:

ところで、nucleus3.21の場合、テーブルプレフィックスを使っている環境では…

ご指摘、有り難うございます。入れておきました。どうも私は、マニュアルをくまなく見る癖がないので、いかんです。もう一度、プラグインAPIのページを読み直します…。

オフライン

#11 2006-02-28 21:51:55

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

Nucleus 3.2-デフォルトスキンで使える、スタイルメニューカスタマイズ用のCSS/XMLファイルのサンプルです。ZIPファイルを解凍してできた『mitasnom/』をディレクトリごと『skins/default/』ディレクトリに置いてください。スキンのスタイルシートが編集画面でも反映されて、スタイルメニューで『contentitemcategory』等が使えるようになります。


Attachments:
png screenshot.png, Size: 5.29 KiB, Downloads: 3,991
zip DefaultSkin.zip, Size: 593 B, Downloads: 296

オフライン

#12 2006-03-03 05:08:21

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

バージョン 0.5.3b をアップしました。新しい機能として、メンバー個別の設定が行えるようになりました。また、EUC / UTF-8 とも、日本語に完全対応になりました。

それからこの記事に、使用している FCKeditor ver 2.2 のソースコードをアップしておきます。これは、GPLの規定により、FCKeditor部分のソースコードを取得可能にしなければいけない事による物です。


Attachments:
zip FCKeditor_2.2_source.zip, Size: 119.03 KiB, Downloads: 342

オフライン

#13 2006-07-09 19:35:56

レトロマニア
メンバー
From: 愛知県
登録日: 2006-07-01
投稿: 30
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

フォーラムでも報告をあげておきます。
いつもありがたくプラグインを使わせていただいております。

<!-- l --><a class="postlink-local" href="http://japan.nucleuscms.org/bb/viewtopic.php?t=2131">viewtopic.php?t=2131</a><!-- l -->

にて、トラブル内容について記述しておきました。

1. 画像に画像のリンク(サムネイルに対する拡大画像)を張ると、wysiwyg時(エディタ時)のソースコードの記述は正しいが、nucleus独自タグに変換するため、拡大画像が表示されないばかりか、画像自体も表示されなくなる
2.画像のプロパティで、リンクからサーバブラウザを起動し、画像を選択しても、リンクのURLにターゲットのアドレスが挿入されない
今のところ気づいたのは以上の2点です。


未熟者ですが仲間とITコンサル会社を経営しております。
趣味で自作PCとか鯖組んでます。ハイテクが好きな人は→
http://www.dos-v.biz/

オフライン

#14 2006-09-01 04:16:31

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

レトロマニア さんの発言:

1. 画像に画像のリンク(サムネイルに対する拡大画像)を張ると、wysiwyg時(エディタ時)のソースコードの記述は正しいが、nucleus独自タグに変換するため、拡大画像が表示されないばかりか、画像自体も表示されなくなる
2.画像のプロパティで、リンクからサーバブラウザを起動し、画像を選択しても、[b]リンクのURLにターゲットのアドレスが挿入されない

確認しました。1については、NP_MitasNom.php の 269-270 行目あたりを

//$body=$this->_restoreImgPopup($body);
//$more=$this->_restoreImgPopup($more);

のように、コメントアウトしてください。これで、<%popup%>タグへの変換がされなくなります。

2については、javascript 部分のコードを見直す必要があり、少し時間がかかりそうです。

オフライン

#15 2006-09-11 15:31:01

yama
Administrator
登録日: 2005-07-07
投稿: 1,269
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

自力解決を試みましたが、分からなかったため質問させていただきます。

<!-- l --><a class="postlink-local" href="http://japan.nucleuscms.org/bb/viewtopic.php?t=2253">viewtopic.php?t=2253</a><!-- l -->
標準のmedia.phpを上記media-tocu-dirs と差し替えて利用しています。
この場合、サーバブラウザからmedia.phpを呼び出した時に
下の参考画像のようにスクロールバーが表示されないために
画像全件にアクセスできません。

scroll="no"の個所を探して置換してみたりしましたが、個所が違うらしく
スクロールバーを表示できませんでした。書き換え対象ファイルが分かれば
自力で書き換えできると思いますが、分かりますでしょうか。


Attachments:
gif mdtc.gif, Size: 34.78 KiB, Downloads: 3,648

オフライン

#16 2006-09-12 03:33:24

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

media-tocu-dirs がうまくインストールできなかったので、解決できるかどうかテストできていませんが…

plugins/mitasnom/editor/dialog/common ディレクトリにある fck_dialog_common.js の109行目あたりを、次のように書き換えてください。

sOptions += ",width=" + width ;
sOptions += ",height=" + height ;
sOptions += ",left=" + iLeft ;
sOptions += ",top=" + iTop ;
sOptions += ",scrollbars=yes";

これで、右側にスクロールバーが表示されると思います。もしスクロールバーの表示でウィンドウ幅が若干減少することによりウィンドウ全体の構成が崩れてしまう場合は、プラグインオプションの『ポップアップウィンドウの幅』を少し大きめに設定すれば直ると思います。

オフライン

#17 2006-09-12 08:39:07

yama
Administrator
登録日: 2005-07-07
投稿: 1,269
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

ありがとうございます!変更できました。

オフライン

#18 2006-09-12 08:56:22

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

yama.kyms さんの発言:

ありがとうございます!変更できました。

お役に立てて、何よりです。変更を施したものを(今回のものプラスα)、次期バージョン(0.54b)として近日中にアップします。

オフライン

#19 2006-09-13 04:33:55

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

Ver 0.5.4 β をアップしました。

1.画像に画像のリンクを張ることができるようにしました(この場合、<%popup%>タグへの変換はされません)。
2.Nucleus のメディアマネージャー(media.php)の右側にスクロールバーが表示されるようにしました。
3.その他のバグフィックスを行いました。

Ver 0.5.3 β からのアップグレードは、上書きでOKです。

オフライン

#20 2006-09-20 18:55:43

yama
Administrator
登録日: 2005-07-07
投稿: 1,269
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

報告が遅れましたが、最新版のインストールで無事にスクロールバー表示されるのを確認しました。

もし可能であればということで、機能リクエストです。

http://wakka.xiffy.nl/imagemanager
上記プラグインNP_ImageManagerがインストールされていれば、
media.phpではなくこちらを利用できると便利と思いました。

image_manager.png

オフライン

#21 2006-09-21 07:55:08

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

yama.kyms さんの発言:

報告が遅れましたが、最新版のインストールで無事にスクロールバー表示されるのを確認しました。

もし可能であればということで、機能リクエストです。

http://wakka.xiffy.nl/imagemanager
上記プラグインNP_ImageManagerがインストールされていれば、
media.phpではなくこちらを利用できると便利と思いました。

どうも、ありがとうございます。NP_ImageManagerのハックに少し時間がかかりそうなので、しばらくの間お待ちください。

オフライン

#22 2006-09-22 04:37:01

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

とりあえずの対処ですが、

1) NP_ImageManager をインストールする。

2) plugins/mitasnom/config.php の23行目あたりを次のように書き換える。

$NucleusMediaWindowURL=$CONF['AdminURL'].'plugins/imagemanager/manager.php';

3) plugins/mitasnom/editor/dialog/common/fck_dialog_common.js を添付のものに入れ替える。

これで試していただけませんか?この変更を加えると、Nucleus コアの media.php は使えなくなってしまうので、注意してください。もしこれでうまくいくようなら、次のバージョンで media.php か NP_ImageManager を選択できるようにします。


Attachments:
zip fck_dialog_common.zip, Size: 1.94 KiB, Downloads: 280

オフライン

#23 2006-10-11 16:13:32

yama
Administrator
登録日: 2005-07-07
投稿: 1,269
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

報告が遅くなってすみません(今気が付きました)。
さっそく試してみました。うまく連携できてます。快適です:D

オフライン

#24 2006-10-12 03:55:17

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

yama.kyms さんの発言:

さっそく試してみました。うまく連携できてます。快適です:D

良かったです。じゃ、次期バージョンに組み入れますね。Wiki に上げて、ベータもはずして、一般公開とするつもりです。 wink

オフライン

#25 2006-10-30 11:29:36

Katsumi
メンバー
From: CA
登録日: 2005-06-24
投稿: 637
ウェブサイト

Re: NP_MitasNom (FCKeditor利用のWYSIWYG-HTMLエディター)

ベータをはずした ver 0.55 正式版を Wiki にアップしました。今回の更新の目玉は、ImageManager をプラグインオプション変更だけで使用できることにした点と、数個のファイルをアップロードするだけで200個を越える FCKEditor 部分のファイルをインストールすることができるようにした点です。

オフライン

Board footer