MediumEditor - Web用のインラインテキスト編集ツールバー

皆知っています Medium.com そして彼らの大人気のブログプラットフォーム。彼ら デザインの世界で多くのアイデアを再定義しました そして、あなたはそれらのデザインを複製する方法をあなたに教えるたくさんのチュートリアルを見つけることができます.

あなたが好きかもしれない一つのツールは MediumEditorプラグイン 純粋なJavaScriptに基づいています。それはあなたをすることができます カスタムインラインテキストエディタを追加する Mediumブログサイトと同じデザインの任意のページに。ですから、読者にボールド、イタリック体、リンク、ヘッダー、その他ほとんどすべてを追加させることができます。, 簡単なビジュアルツールバーを使って.

このプロジェクトはいかなる意味でもMediumと提携していないので注意してください。 公式のプラグインではありません.

それはサイトのファンとミディアムデザインスタイルを愛する誰かによって作成されました。あなたはできる GitHubでのセットアップに関する詳細 すべてのコードを格納し、完全に無料で使用できます。.

編集者 すべての主要ブラウザで動作します, 現在のバージョンのMicrosoft EdgeおよびIEを含みます。 IE7までさかのぼる、より古いバージョンのInternet Explorerさえもサポートします。クレイジー!

あなたがすることができる場所にインストールは簡単です すべてのファイルを直接引き出す npmやBower、あるいはでさえ 無料のオンラインCDNを使用する JSDelivrなど.

それならあなたはCSSファイルとJavaScriptファイルの両方 あなたのウェブサイトのヘッダーに。やさしい.

そこから、あなたは エディタを呼び出す 1行のコードで

 var editor = new MediumEditor（ '。editable'）; 

あなたはできる ページ要素のリストを渡す それはエディタでしか動作しないはずです。 ページ全体を走らせる.

おそらくこのプラグインの最も実用的な用途は 何らかのWYSIWYGエディタを作成する Webアプリの場合.

それ データのやり取りをやり取りしない サーバーとクライアントの間では、そのロジックを自分で作成する必要があります。それでも、このプラグインは一から始めるよりもずっと簡単です。.

MediumEditorデモページの一番下までスクロールすると、 拡張機能のリスト あなたもテストすることができます。これらは含まれています フルマークダウン編集, に加えて 中型ボタン そして 他のインターフェース機能.

このプラグインは、中規模のファンにお勧めです。 それらのUXのいくつかを複製する 別のプロジェクトに.