Hongi Editor Lite
このライブラリは、WEBアプリケーション組み込み向けのJavascript多機能WYSIWYG方式HTMLエディタであるHongi Editorから、ソースコード編集補助機能やフォーム要素挿入機能などの一部機能を省いて軽量化したシンプルなWYSIWYGエディタです。※Hongi Editorとは排他仕様であるため、同一のページに「Hongi Editor」と「Hongi Editor Lite」の両方を導入することはできません。
サンプル
特徴
- ソースコードハイライト機能やテーブル編集、フォーム要素挿入機能などの一分機能を省くことでファイルサイズと動作を軽量化したWYSIWYGエディタです。
- PCからも、スマートフォンからも使用できるシンプルな共通ユーザーインターフェイスを備えています。
- 日本語環境向けにデザインされており、IMEによる入力でも安定して動作します。
- 外部ライブラリを徹底的に排除したことで、著作権フリー(パブリックドメイン)での利用が可能です。
動作環境
最新版のChrome(モバイル版を含む)またはFireFox (IEでは一部機能が利用できません)ダウンロード
Vectorからダウンロード(推奨)当サイトからダウンロード
使い方
導入方法
エディタを設置するHTMLファイルがあるフォルダに、「hongi_editor_lite_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_lite_2/main.js"></script>
※「hongi_editor_2」フォルダを別のフォルダに設置することも可能ですが、その場合は、srcの部分を書き替えてください。
最後に、上記のテキストエリアとscriptタグより後に次のJavaScript関数を呼び出します。
<script type="text/javascript">
hongi_editor_include("example_textarea");
</script>
※引数は、上記のテキストエリアのnameです。
拡張
以下の関数により、機能の追加が可能です。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","きのかわゴシック");