Quill Editorのフルスクリーンボタン？

Question

私はQuill Editorを使っています。これまでのところ素晴らしいです。私の質問は、Quill Editorをツールバーのボタンでフルスクリーン（気晴らしのない種類のモード）にする方法はありますか？ これを自分で実装するにはどうすればいいですか？私はそれは、例えば、screenfull.jsのために、ライブラリを使用するのが最も簡単だと思いますフルスクリーンに行くために

Answer 1

- クイルのツールバーにカスタムボタンを追加するためとしてhttps://github.com/sindresorhus/screenfull.js/

を、私は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：

ジャバスクリプト経由のボタンを指定するのではなく、カスタム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>