wheditor

WYSIWYGエディター?
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未満
非対応ブログエディターが利用できません。
Firefox3.0未満及びIE6は非対応です。
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に流しこむ感じで更新できます。


更新履歴
サンプル
ダウンロード
【wheditorの最新記事】
posted by ST at 2010-10-31 03:11 | wheditor | このブログの読者になる | 更新情報をチェックする