tiny editor

Tiny-Editor

バニラjavascriptに書かれた小さなHTMLリッチテキストエディター

ゴール

HTML要素をPlain Old Vanilla JavaScriptの豊富なテキストエディターとして使用できるようにする5 kb（圧縮）ライブラリを作成します。

サポート

このライブラリを使用して気に入っている場合は、オープンソースプロジェクトをお気軽にサポートしてください。

インストール方法

 npm install tiny-editor

または、HTMLドキュメントの最後にバンドルファイルを直接ロードします。

 <script src="https://unpkg.com/tiny-editor/dist/bundle.js"></script>

使い方

1. HTMLドキュメントでエディターライブラリを参照してください
2. エディターに変換するHTML要素にdata-tiny-editor属性を追加する

エディターを動的に作成する方法

エクスポートされた関数window.__tinyEditor.transformToEditor()は、編集者に変換するDOM要素（通常は<div> ）を最初に引数として使用します。例については、 /public/index.html index.htmlを参照してください。

フォーマットされたテキストを抽出する方法

エディターHTML要素のinputイベントを聞いてください。

 document
  .querySelectorAll('[data-tiny-editor]')
  .forEach(editor =>
    editor.addEventListener('input', e => console.log(e.target.innerHTML)
  )
);

カスタマイズする方法

小さなエディターのレンダリング方法をカスタマイズするために使用できるさまざまなオプションがあります。デフォルトでは、すべてのオプションが有効になっています。データ属性を使用してオプションを無効にすることができます。

たとえば、次の属性を使用して、太字フォーマットボタンを削除できます。

 <div data-tiny-editor data-bold="no"></div>

オプション

• data-formatblock="no" ：スタイルドロップダウンリストを削除します
• data-bold="no" ：太字を削除します
• data-italic="no" ：：斜体ボタンを削除します
• data-underline="no" ：下線ボタンを削除します
• data-fontname="no" ：フォントドロップダウンリストを削除します
• data-forecolor="no" ：：テキスト色のボタンを削除します
• data-justifyleft="no" ：左のアライメントボタンを削除します
• data-justifycenter="no" ：中央のアライメントボタンを削除します
• data-justifyright="no" ：右のアライメントボタンを削除します
• data-insertorderedlist="no" ：番号付きリストボタンを削除します
• data-insertunorderedlist="no" ：箇条書きボタンを削除します
• data-outdent="no" ：減少インデントボタンを削除します
• data-indent="no" ：インデントの増加ボタンを削除します
• data-remove-format="no" ：クリアフォーマットボタンを削除します
• data-autofocus="no" ：エディターからオートフォーカスを削除します

サポートされているブラウザ

最新のブラウザ（Chrome、Firefox、Edge、...）がサポートされています。 Tiny EditorはInternet Explorerで動作しません。