ITエンジニア/デザイナ向けにオープンソースを毎日紹介

自由に組み込めるのは良さそうですね!

WebベースのWYSIWYGエディタと言えばCKEditorやTinyMCEなどが思いつきますが、大型なものは組み込みは手軽でもカスタマイズが難しかったり、サイトの色に合わせて見た目を変更するのも困難だったりします。

かといってシンプルなものだと機能が足りないなどと、どっちつかずになってしまいます。そこで紹介したいのがScribe、カスタマイズ前提で作られているWYSIWYGエディタです。

Scribeのデモ

デモがあるので試してみましょう。

トップページ。上が入力、下が結果です。
トップページ。上が入力、下が結果です。

日本語を入力するとボタンが点滅してしまうのが残念かも(修正できると思いますが)。
日本語を入力するとボタンが点滅してしまうのが残念かも(修正できると思いますが)。

リストなどは自動で次の項目が入力されます。
リストなどは自動で次の項目が入力されます。

引用。有効になっている書式はボタンが押された状態になります。
引用。有効になっている書式はボタンが押された状態になります。

引用+打ち消し線といった装飾も可能です。
引用+打ち消し線といった装飾も可能です。

Scribeの使い方

実装としては次のようになります。jQueryは使っていないようです。

require(['scribe'], function (Scribe) {
  var scribeElement = document.querySelector('.scribe');
  // Create an instance of Scribe
  var scribe = new Scribe(scribeElement);

  // Use some plugins
  scribe.use(scribePluginBlockquoteCommand());
  var toolbarElement = document.querySelector('.toolbar');
  scribe.use(scribePluginToolbar(toolbarElement));
});

なお全てのボタンはプラグインとして作られていますので、自分好みのカスタマイズはプラグインの修正、作成によって行えるようになっています。Undo/Redoも実装されているので実用性は高いのではないでしょうか。

ScribeはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。

Scribe

guardian/scribe

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2