EasyEdit

どういうものか?

HTMLファイルに4行+αするだけで、だれでも編集可能なエリアを作れます。

サンプルはこちら

ダウンロード

どうぞ。zip圧縮してあります。

導入方法

適当にWebページを用意します。

編集可能なエリアを作成したいページのパーミッションを「666」にして、そのページと同じディレクトリに

  • editable.js
  • prototype.js
  • changeHTML
  • html_dom_parser.php

の4つのファイルを入れます。

次に、編集可能なエリアを作るページに。次の4行を<head>内に挿入してください。

<script language="javascript" type="text/javascript" src="prototype.js"></script>
<script language="javascript" type="text/javascript" src="editable.js"></script>

そして、編集可能エリアにしたいオブジェクト(たとえば<div>)に、以下のようにIDとクラス名を与えてください。両方指定してあげないと、編集可能エリアと認識されません。

<div id="hogehogeTekitou"class="Editable"></div>

これだけです。簡単でしょう。

既知のバグ(仕様?)

「http://~~/index.html」などはよく省略されて「http://~~/」やら「http://~~」やら使われてますが、EasyEditは省略URLでは動きません。というのは、最後に現れるスラッシュよりあとの文字列を切り出してファイル名と認識しているからです。

JavaScriptでうまくファイル名を認識する方法があれば教えてください。

IDが同じの2つあったりすると、1つ編集しただけで2つとも書き換えられてしまいます。IDがかぶらないように工夫してお使いください。

HTMLだけじゃなくてCSSも変えたい?

リクエストが多ければ機能拡張してできるようにします。