CKEditorみたいなやつです。
無料レンタルブログrentafree.netのブログエディターとして作ったツールです。
CKEditorは素晴らしいツールだと思いますが、
closeなソフトウェアへの組み込みや公開WEBサイトでの利用だとライセンス的にダメな気がするんで作りました。
当エディターはcloseなソフトウェアへの組み込みや公開WEBサイトで利用して頂いて構いません。(できれば当サイトへのリンク付きで紹介して欲しいですが)
当初はCKEditorのライセンスの問題で開発しましたが、
アイコンとかはなく質素なデザインですが、
マウスカーソル位置のタグを直接編集できたり、<table>のrowspan・colspanの操作など、
CKEditorよりも高度な編集が可能なエディタだと思います。
[ブラウザによる違い]
ブラウザ名 (コア名) | バージョン | ステータス | 説明 |
Firefox (Gecko) | 11.0以上 | 推薦 | すべての機能が利用可能で推薦ブラウザです。 |
11.0未満 | 対応 | タグ直接編集機能が利用できません。 | |
8.0未満 | 対応 | コンテキストメニューが独自UIとなります。 | |
3.0未満 | 非対応 | ブログエディターが利用できません。 | |
IE (Trident) | 10.0以上 | 対応 | コンテキストメニューが独自UIとなります。 |
10.0未満 | 対応 | コンテキストメニューが独自UIとなります。 | |
9.0未満 | 対応 | タグ挿入時の動作が他のブラウザと違います。 Enterキー入力による改行が<p>となります。(Shift+Enterで<br>) | |
7.0未満 | 非対応 | 表示が崩れます。 | |
Chrome (Blink) | 28.0以上 | 対応 | コンテキストメニューが独自UIとなります。 バージョン28からBlinkとなります。(27まではWebKit) |
4.0以上 | 対応 | コンテキストメニューが独自UIとなります。 | |
4.0未満 | 非対応 | ブログエディターが利用できません。 | |
Safari (WebKit) | 3.1以上 | 対応 | コンテキストメニューが独自UIとなります。 |
3.1未満 | 非対応 | ブログエディターが利用できません。 | |
Opera (Presto) | 15以上 | 不明 | バージョン15から独自開発のPrestoではなくWebKitとなります。 他のWebkitブラウザと同じ対応状況になると思われます。 |
12以上 | 対応 | コンテキストメニューが独自UIとなります。 | |
12未満 | 対応 | コンテキストメニューが独自UIとなります。 | |
9未満 | 非対応 | ブログエディターが利用できません。 |
editor4.jsとeditor5.jsの違いは、
editor4.jsは右クリックのコンテキストメニューが独自実装ですが、
editor5.jsは標準のメニューを拡張し、いくつかの追加機能があり、デザインが微妙に違います。
ブラウザによって動作が違うので、利用する場合は実際に確認してください。
[タッチパネルについて]
テキストを範囲選択し、コンテキストメニューを表示して操作しますが、
Android等のタッチパネルデバイスのブラウザは「テキストの選択」「コンテキストメニューの表示」が共にロングタッチで、現時点ではこの辺りの処理の完成されたブラウザが存在しません。
したがいまして、タッチパネルに完全対応できていません。
タッチパネル機器でも単純な文章の入力なら可能です。
[使い方]
設置方法はサンプルページを確認してください。
エディターの操作方法は、文字列を選択して上部メニューでタグを適用し、
タグが適用された文章上で右クリックして編集です。
[コールバック]
editor.jsのロード前に、
function EditorLoadFunction()
が定義されている場合、エディタ設置後に実行されます。
[ファイルドロップの外部拡張]
EditorDropType['MIMEタイプ']=1;
とEditorDropTypeにMIMEタイプを設定すると、
EditorDropExtension(dataTransfer,id,Range)が実行され、ファイルドロップ機能を外部拡張することができます。
パラメータのidはエディタ領域の番号で、EditorVar.HTML[id]がエディタの編集可能<div>でEditorVar.Textarea[id]が<textarea>となります。
dataTransferとRangeはDOMのそれです。
[submitする際の注意事項]
エディターはフォーカスが外れた際にtextareaを更新します。
キーボードショートカットを使用した場合、フォーカスアウトが発生せずにsubmitすることが可能なブラウザがあります。
submit前に確実に更新したい場合は、onsubmitをキャンセルし、
<input type="submit">を使わずに、ボタン等の別イベントでtextareaを更新してからsubmit()するのがいいです。
エディターの<div>要素がEditorVar.HTML[0からの連番]で<textarea>がEditorVar.Textarea[0からの連番]で取得できます。
EditorVar.HTML[0からの連番].innerHTMLをEditorVar.Textarea[0からの連番].valueに流しこむ感じで更新できます。
更新履歴
サンプル
ダウンロード