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>