ブラウザ上でテキストエディタのようなものの実装

Question

ブラウザ上で動くsublimeみたいな雰囲気のものを作りたいと思ってます。
雰囲気としては、progateというサービスのブラウザ上でのテキストエディタです。
例えばsublimeやatomでは、左側にFOLDERSが表示され、右側にテキストをかけますよね。
そしてその幅は自由に変更できると思うのですが、そのようなことをブラウザ上で実現するとしたらどのようにすればいいのでしょうか？標準の機能だけでは難しいですか？

よろしくお願いします。

基本的にはフレームタグで出来るようなことでいいのですが、
①フレームタグが推奨されていない
②フレームタグだと、色々なｈｔｍｌを読み込む気がするけど、一つのHTMLにしたい（後々PHPとか色々足していくとそちらの方が楽なので・・・）

と言う問題があります。
よろしくお願いします。

#追記

分かりにくくて申し訳ないです、フォルダが左側に表示される～というのは、sublimeのことを描くために用いた表現で、自分のシステムでそのようなことを行うつもりはありません。
HTML4でいう、framesetやframeタグのような感じでユーザが可変できて、1ページになっていればそれで大丈夫です。
紛らわしく本当にすみません。

Comments

[yambejp]

ブラウザに実装する意図はなにかありますか？使いやすいテキストエディタならすでにあるし今ない機能をどうしても実装したいならブラウザでやらずにアプリを開発して公開してもらったほうがみなHappyだと思いますが・・・

[atemu]

実際には別のものを作る予定ですが、ひとまずとしてそのような要件が必要なので質問させていただきました。説明不足で申し訳ありません。

[mukkun]

取得したいフォルダ構成はサーバでしょうか。また、ブラウザは何を使用する予定なのでしょうか。配布ブラウザでクライアントのディレクトリ構造を取得するにはクライアントPCにサーバを立てる必要があります。(IEだとActiveXObjectでファイルとかは読み込めた記憶が。。)

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

Answer 1

分割して自由にサイズ変更なら個別のライブラリもあると思いますし、下記のようなUIライブラリを使うのも手でしょう。

【Splitter コントロール - jQuery Splitter コンポーネント - Ignite UI™】
http://jp.igniteui.com/splitter/overview

【Features, supported in Kendo UI Splitter widget | Kendo UI Web demo】
http://demos.telerik.com/kendo-ui/splitter/index

Comments

[atemu]

私の求めていたのはこれです！！ありがとうございます！！！！

Answer 2

splitter でできました

Answer 3

ローカルのフォルダを取得するとはブラウザだけでは困難なので、入力、出力にzipを使えばある程度のことは可能だと思います。Zipper.jsの解説サイト ローカルでZipを解凍するサイト
幅調節はテキストボックスのサイズは100%100%にして、テキスト入力欄とFOLDERSの間にボックスを置いて、それをドラックしたらその時のマウス位置に合わせてFOLDERSやテキスト入力欄が入っているdivのサイズを変えればいいと思います。
説明不足かもしれませんがその時はコメントしていただけると幸いです。