CodeMirrorやACEのインストール方法  【解決済み】

質問全般・改善要望
返信する
aki
メンバー
メンバー
記事: 56
登録日時: 2013年1月23日(水) 20:59

CodeMirrorやACEのインストール方法

投稿記事 by aki »

お世話になっております。

CSSをMODXのリソースとして投稿し、管理しようとしています。
リッチテキストエディタを「なし」にしたプレーンな入力画面で作業をしているのですが、
一般的なコードエディタのように、タブの入力や行数表示があれば便利だと思い、
CodeMirrorやACEプラグインを導入してみたのですが、うまく反映されません。
何かやり方が間違っているのでしょうか?

【ACEを導入しようとしてみた方法】
1. https://github.com/manse/ace.modx にアクセス、Download ZIPのボタンでまるごとダウンロード
2. READ MEにしたがい、「プラグインを作成」で install.tpl の中身をペーストして保存
3. assets/pluginsに「ace」ディレクトリをアップロードと書いてあったのですが、aceフォルダがない?ので
最初にダウンロードしたフォルダの中身から、「install.tpl」と「README.md」「screenshot.png」は抜いて
(関係なさそうだと思ったので…)、他すべてをaceフォルダの中身として指定の位置にアップロード
4. システムイベントタブの「on~Render」で指定のあるものをチェックして保存

としてみたのですが、スクリーンショットにあるような状態になりませんでした。

【CodeMirrorを導入しようとしてみた方法】
1. https://github.com/hansek/MODX-Evolutio ... まるごとダウンロード
2. http://forums.modx.com/thread/73753/cod ... -evolution にしたがい、
install と assetsフォルダを新規と上書きでアップロード
3. http://example.com/install/ にアクセス…したのですが、
「Unauthorized access You’re not allowed to access file folder. 」と表示されて進めず??
4. http://forum.modx.jp/viewtopic.php?p=5299 こちらのトピックを見つけて、
インストーラーは使わない方がいいかもということが書かれていたので、installフォルダを削除し、「プラグインを作成」で、
https://github.com/hansek/MODX-Evolutio ... Mirror.tpl の中身をペースト
5. 名前やプロパティ、システムイベントが自動で入力やチェックがされないので、上記のtplファイルからコピーして
それぞれ入力やチェックをつけて保存

としてみたのですが、こちらも導入前と特に画面が変わらず、動いていない?みたいでした。

MODX自体は新規インストールで、最初に一緒にインストールできるプラグインやスニペット以外は
まだ何も導入していない素の状態です。
(リソースはまだ内容のない入れ物だけいくつか作ってあります)

ここのやり方がおかしい、といった部分がありましたら教えてください。
もしくは、現在のバージョンでは動作できないプラグインということでしたら
一旦諦めようと思いますので、お教えいただければと思います。
よろしくお願いします。

-----
ご利用のサーバ:さくらサーバー
MODXのバージョン:1.0.12J
PHPのバージョン:5.3.27
MySQLのバージョン: 5.1.67
ブラウザ:Firefox(Windows)
-----
mmc
メンバー
メンバー
記事: 13
登録日時: 2013年5月11日(土) 03:44

Re: CodeMirrorやACEのインストール方法

投稿記事 by mmc »

ACE入れてみました。こちらの環境では動いています。
手順もほぼ同じ通りにやって見ました。
3.フォルダを作成し、ファイルをアップしました。
4.自動的にチェックが入っていたので何もしていません。

3のファイルのアップ先と、4のチェックを自分で入れたというところが気になります。
install.tplはコメント部も含めてペーストしているか確かめてみてください。
-----
ご利用のサーバ:
MODXのバージョン:1.0.12J
PHPのバージョン:5.3.3
MySQLのバージョン: 5.0.95
ブラウザ:Firefox
-----
添付ファイル
ace.jpg
ace.jpg (33.56 KiB) 閲覧された回数 13745 回
editer.jpg
editer.jpg (17.64 KiB) 閲覧された回数 13741 回
aki
メンバー
メンバー
記事: 56
登録日時: 2013年1月23日(水) 20:59

Re: CodeMirrorやACEのインストール方法

投稿記事 by aki »

ご返信ありがとうございます!
今もう一度プラグインとファイルを削除して最初からやり直してみましたら、動作しました!

aceディレクトリの中身は、最初の投稿の通りでよかったようなので、同じものをアップロードし直しました。
パーミッションは、さくらサーバーにアップしたときのデフォルトのままにしていたのですが、
mmcさんの添付ファイルの内容と少し違っていたので合わせました。
(MODX本体はデフォルトのパーミッションでインストールできるので関係はないかもしれません)

install.tplをペーストする際に、今回はDreamweaverで開いてからコピペしたところ、
今度は名前やシステムイベント、カテゴリが自動的に入力されました。
(前回はブラウザ上でコピーしたものを使ったのがまずかった?)

それで保存しましたら、リソースがHTMLの場合とチャンクの場合は、編集画面で
mmcさんが添付してくださったスクリーンショットのような選択肢が出るようになり、
ACEが動作するのが確認できました。ありがとうございます。


以下、若干未解決な部分です。
システムイベントでチェックを入れたイベントを見る感じ、スニペットやプラグイン、テンプレートの編集画面も
ACEを選択できるようになるのでは…?と思うのですが、これらには使用エディタの選択肢が出てきません。

また、CSSの編集にエディタを使いたいのですが、リソースのコンテントタイプが「text/css」の場合、
「リッチエディタで編集」のチェックが自動的に外れるようで、使用エディタの選択肢が出てきません。

# コンテントタイプを「text/html」にしておけばいいのですが、フレンドリーURLをオンにしていまして、
# エイリアスに「style.css」のようにスタイルシートの拡張子を付けて保存すると、
# 自動的にコンテントタイプが「text/css」になり、リッチエディタで編集が外れます。

グローバル設定の方で使用エディタを「ACE」にしたところ、これらの問題は一応解決したのですが
そうすると今度はTinyMCEで編集させたい通常のHTMLリソースも、ACEになってしまいました。
使用エディタを「TinyMCE」に変更して保存し直すのですが、再び開くときにはACEに戻っています。

2種類のエディタをリソースのタイプごとに共存させるのは無理なのでしょうか?
何かアドバイスなどありましたら、よろしくお願いします。
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

Re: CodeMirrorやACEのインストール方法

投稿記事 by yama »

aki さんが書きました:以下、若干未解決な部分です。
システムイベントでチェックを入れたイベントを見る感じ、スニペットやプラグイン、テンプレートの編集画面も
ACEを選択できるようになるのでは…?と思うのですが、これらには使用エディタの選択肢が出てきません。

また、CSSの編集にエディタを使いたいのですが、リソースのコンテントタイプが「text/css」の場合、
「リッチエディタで編集」のチェックが自動的に外れるようで、使用エディタの選択肢が出てきません。

# コンテントタイプを「text/html」にしておけばいいのですが、フレンドリーURLをオンにしていまして、
# エイリアスに「style.css」のようにスタイルシートの拡張子を付けて保存すると、
# 自動的にコンテントタイプが「text/css」になり、リッチエディタで編集が外れます。

グローバル設定の方で使用エディタを「ACE」にしたところ、これらの問題は一応解決したのですが
そうすると今度はTinyMCEで編集させたい通常のHTMLリソースも、ACEになってしまいました。
使用エディタを「TinyMCE」に変更して保存し直すのですが、再び開くときにはACEに戻っています。

2種類のエディタをリソースのタイプごとに共存させるのは無理なのでしょうか?
システム構造的にはリッチテキストエディタ・コードエディタをそれぞれ別の目的を持つエディタとして扱うことができる想定になっているのですが、今のところ管理画面はそのようになってません。近い将来の改善要望として預からせていただければと思います。
aki
メンバー
メンバー
記事: 56
登録日時: 2013年1月23日(水) 20:59

Re: CodeMirrorやACEのインストール方法  【解決済み】

投稿記事 by aki »

yamaさん、ご返信ありがとうございます。
わかりました。
将来的にエディタ選択機能が組み込まれるのを待っております!
返信する