Quill編輯器的全屏按鈕？

Question

我正在使用Quill編輯器。迄今爲止，它一直很好。我的問題是，是否有任何方法讓工具欄中的按鈕讓全屏幕（免費模式）？ 如果不是，我該如何繼續自行實施？

Answer 1

要進入全屏模式，我認爲這是最容易使用的庫，例如screenfull.js - https://github.com/sindresorhus/screenfull.js/

至於添加自定義按鈕添加到工具欄奎爾，我發現有兩種方式。

方法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，而不是通過JavaScript指定的按鈕。官方文檔（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>