オープンソースコラム


2010/02/09 18:10Update

TinyEditor - 軽量JavaScript WYSIWYG エディタ

TAGS: TinyEditor | JavaScript | WYSIWYG | エディタ | Web

スポンサード リンク


TinyEditorはシンプルなJavaScript WYSIWYG エディタです。軽量(わずか8KB)&スタンドアロンで、Webサイトの統合も容易に行えます。                                


ライセンス:creative commons license




new TINY.editor.edit('editor',{
    id:'input', // (必須) バインドするtextareaのID
    width:584, // (オプション) エディタの横幅
    height:175, //(オプション) エディタの縦幅
    cssclass:'te', // (オプション) エディタのclassプロパティ
    controlclass:'tecontrol', // (オプション) エディタ・ボタンのclassプロパティ
    rowclass:'teheader', // (オプション) ボタン(行)classプロパティ
    dividerclass:'tedivider', // (オプション) ボタン区切り線のclassプロパティ
    controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|' ,'outdent' ,'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'print'], // (必須)  '|' :区切り線を表示。 'n':改行表示
    footer:true, // (オプション) フッタ
    fonts:['Verdana','Arial','Georgia','Trebuchet MS'],  // (オプション) フォント設定
    xhtml:true, // (オプション) XHTML / HTML 生成
    cssfile:'style.css', // (オプション) エディタをCSSファイルと関連させる
    content:'starting content', // (オプション) エディタにデフォルトで表示されるテキスト設定
    css:'body{background-color:#ccc}', // (オプション) CSS設定
    bodyid:'editor', // (オプション) エディタ本体ID設定
    footerclass:'tefooter', // (オプション)フッタのclassプロパティ
    toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'}, // (オプション) toggle to markup view options
    resize:{cssclass:'resize'} // (オプション) エディタリサイズ関連のオプション
});


デモはこちら

Sponsored Link