quill - Quill Editor のフルスクリーン ボタン?

Question

Quill Editor を使用しています。これまでのところ素晴らしかったです。私の質問は、Quill Editor をツールバーのボタンで全画面表示 (気が散らないモードのようなもの) にする方法はありますか? そうでない場合、どうすればこれを自分で実装できますか？

Answer 1

フルスクリーンにするには、screenfull.js などのライブラリを使用するのが最も簡単だと思います - https://github.com/sindresorhus/screenfull.js/

Quill ツールバーにカスタム ボタンを追加する方法については、2 つの方法を見つけました。

方法 1:

少なくとも単純なボタンは、ツールバー オプションから直接追加できます。このようなもの: http://codepen.io/nik10110/pen/PbyNoW

<div id="editor"></div>

<style>
  #editor {
    height: 375px;
  }

  .ql-omega:after {
    content: "Ω";
  }
</style>

<script type="text/javascript">
  var toolbarOptions = [
    [{ 'font': [] }],
    ['bold', 'italic', 'underline'],
    ['blockquote', 'code-block'],
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'align': [] }],
    ['omega']
  ];

  var quill = new Quill('#editor', {
    modules: {
      toolbar: toolbarOptions
    },
    theme: 'snow'
  });

  var customButton = document.querySelector('.ql-omega');
  customButton.addEventListener('click', function() {
    if (screenfull.enabled) {
      console.log('requesting fullscreen');
      screenfull.request();
    } else {
      console.log('Screenfull not enabled');
    }
  });
</script>

方法 2:

JavaScript でボタンを指定するのではなく、カスタム Html を使用するようにツールバーを設定します。公式ドキュメント ( http://quilljs.com/docs/modules/toolbar/ ) は、これについて非常に詳細です。

そこから調整されたコードサンプルを次に示します。

<div id="toolbar">
  <!-- Add buttons as you would before -->
  <button class="ql-bold"></button>
  <button class="ql-italic"></button>

  <!-- But you can also add your own -->
  <button id="toggle-fullscreen"></button>
</div>
<div id="editor"></div>

<script type="text/javascript">
var quill = new Quill('#editor', {
  modules: {
    toolbar: '#toolbar'
  }
});

var customButton = document.querySelector('#toggle-fullscreen');
customButton.addEventListener('click', function() {
  if (screenfull.enabled) {
    console.log('requesting fullscreen');
    screenfull.request();
  } else {
    console.log('Screenfull not enabled');
  }
});
</script>