Hongi Editor
このライブラリは、Javascriptを用いて制作されたWEBアプリケーション向けの組み込み用多機能WYSIWYGエディタです。サンプル
特徴
充実したソースコード編集機能
Hongi Editorは、WYSIWYGでの編集に主眼をおいたエディタでありながら、充実したHTMLソースコード編集機能を備えています。WYSIWYGモードとソースコードモードを切り替えながらの編集が可能であり、ソースコード編集モードでは、タグを色分けして表示し、メニューからはクイックなタグ挿入が可能です。
高度なスマートフォン対応UI
Hongi Editorは、スマートフォン環境を判別して自動的にモバイル向けに最適化されたUIに切り替わります。モバイル向けUIでは、Android環境でも元に戻す(Redo)操作が可能であり、PC向けUIでのほぼ全ての機能を利用できます。
日本国内で開発された日本語環境向けのエディタ
Hongi Editorは、日本国内の開発拠点において、日本語環境向けにデザイン・開発されています。多くの海外製のエディタとは異なり、IMEによる日本語入力を前提に設計しているため、IMEを使用した入力でも安定して動作します。
完全な著作権フリー
外部ライブラリを徹底的に排除したことで、著作権フリー(パブリックドメイン)での利用が可能です。Hongi Editorは、営利・非営利を問わず、いかなる利用についても著作権による制限を課しません。
動作環境
最新版のChrome(モバイル版を含む)、または、Safari、FireFox、IE(IEでは一部機能が利用できない場合があります)ダウンロード
Vectorからダウンロード(推奨)当サイトからダウンロード
使い方
導入方法
エディタを設置するHTMLファイルがあるフォルダに、「hongi_editor_2」フォルダをコピーしてください。次に、エディタを設置するHTMLファイルに、WYSIWYGエディタとなるテキストエリアを作成します。
例： <textarea name="example_textarea" style="width: 80%; height: 300px;">サンプルテキスト</textarea>
※nameは自由に設定できます。
※複数のテキストエリアをWYSIWYGエディタとする場合は、それぞれのテキストエリアに別々のnameを設定して下さい。
※スタイルシートで指定した「width」と「height」の値はWYSIWYG入力エリアに自動的に引き継がれます。
続いて、以下のscriptタグをそのHTMLファイルの適当な位置に挿入します。
<script type="text/javascript" src="hongi_editor_2/main.js"></script>
※「hongi_editor_2」フォルダを別のフォルダに設置することも可能ですが、その場合は、srcの部分を書き替えてください。
最後に、上記のテキストエリアとscriptタグより後に次のJavaScript関数を呼び出します。
<script type="text/javascript">
hongi_editor_include("example_textarea");
</script>
※引数は、上記のテキストエリアのnameです。
※フォームの送信ボタンを用いずにHongi Editorで編集しているデータを取り出す場合(Ajaxを使用しての送信など)は、当該の動作の前に下記の関数を実行してください。
hongi_editor_onsubmit();
拡張
以下の関数により、機能の追加が可能です。hongi_editor_set_browse_image_function(function_name);
画像の挿入ダイアログで「参照」ボタンを表示させ、そのボタンがクリックされたときに、引数で指定された関数を実行します。
ダイアログ中の入力欄を参照するには、ID「hongi_editor_img_src」と「hongi_editor_img_alt」のエレメントのvalueを参照します。
例:
function image_sansho(){
document.getElementById("hongi_editor_img_src").value = "example.png";
}
hongi_editor_set_browse_image_function("image_sansho");
hongi_editor_add_font_family(family,name);
フォントの選択ダイアログで利用可能な書体を追加します。第1引数はCSSで指定するフォントのファミリー名、第2引数は任意の表示名です。
例:
hongi_editor_add_font_family("Kinokawa","きのかわゴシック");