Quill 编辑器的全屏按钮? [英] Fullscreen button for Quill Editor?

问题描述

我正在使用 Quill 编辑器.到目前为止还不错.我的问题是有什么方法可以通过工具栏中的按钮使 Quill Editor 全屏显示(一种无干扰模式)?如果不是，我该如何继续自己实施?

解决方案

全屏我认为使用库最简单，例如 screenfull.js - https://github.com/sindresorhus/screenfull.js/

至于向 Quill 工具栏添加自定义按钮，我找到了两种方法.

方法一:

至少可以通过工具栏选项直接添加简单的按钮.像这样的东西:http://codepen.io/nik10110/pen/PbyNoW

<风格>#编辑{高度:375px；}.ql-omega:后{内容:Ω"；}</风格><script type="text/javascript">var 工具栏选项 = [[{'字体':[]}]，['粗体'，'斜体'，'下划线']，['blockquote', '代码块'],[{ 'list': 'ordered'}, { 'list': 'bullet' }],[{ '对齐': [] }]，['欧米茄']];var quill = new Quill('#editor', {模块:{工具栏:工具栏选项},主题:雪"});var customButton = document.querySelector('.ql-omega');customButton.addEventListener('click', function() {如果(screenfull.enabled){console.log('请求全屏');screenfull.request();} 别的 {console.log('屏幕未启用');}});

方法二:

将工具栏设置为使用自定义 Html，而不是通过 javascript 指定按钮.官方文档( http://quilljs.com/docs/modules/toolbar/ )是对此非常详细.

以下是经过调整的代码示例:

<!-- 像以前一样添加按钮--><button class="ql-bold"></button><button class="ql-italic"></button><!-- 但您也可以添加自己的 --><button id="toggle-fullscreen"></button>
<div id="编辑器"></div><script type="text/javascript">var quill = new Quill('#editor', {模块:{工具栏:'#工具栏'}});var customButton = document.querySelector('#toggle-fullscreen');customButton.addEventListener('click', function() {如果(screenfull.enabled){console.log('请求全屏');screenfull.request();} 别的 {console.log('屏幕未启用');}});

I am working with Quill Editor. Its been nice so far. My question is that is there any way to make Quill Editor go full-screen (sort of distraction free mode) by a button in the toolbar? If not than how can I proceed to implement this on my own?

解决方案

To go fullscreen I think it is easiest to use a library, for example screenfull.js - https://github.com/sindresorhus/screenfull.js/

As for adding custom buttons to the Quill toolbar, I have found two ways.

Method 1:

At least simple buttons can be added directly through the toolbar options. Something like this: 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>

Method 2:

Set the toolbar to use custom Html rather than specifying the buttons through javascript. The official documentation ( http://quilljs.com/docs/modules/toolbar/ ) is quite detailed for this.

Here's a tweaked code sample from there:

<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>

这篇关于Quill 编辑器的全屏按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！