Quill Editor 的全屏按钮?
Fullscreen button for Quill Editor?
我正在使用 Quill Editor。到目前为止一切都很好。我的问题是有什么方法可以通过工具栏中的按钮使 Quill Editor 进入全屏模式(一种无干扰模式)?
如果不是,我该如何继续自己实施?
要全屏我认为使用库最简单,例如 screenfull.js - https://github.com/sindresorhus/screenfull.js/
关于向 Quill 工具栏添加自定义按钮,我找到了两种方法。
方法一:
至少可以通过工具栏选项直接添加简单的按钮。是这样的:
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>
方法二:
将工具栏设置为使用自定义 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>
我正在使用 Quill Editor。到目前为止一切都很好。我的问题是有什么方法可以通过工具栏中的按钮使 Quill Editor 进入全屏模式(一种无干扰模式)? 如果不是,我该如何继续自己实施?
要全屏我认为使用库最简单,例如 screenfull.js - https://github.com/sindresorhus/screenfull.js/
关于向 Quill 工具栏添加自定义按钮,我找到了两种方法。
方法一:
至少可以通过工具栏选项直接添加简单的按钮。是这样的: 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>
方法二:
将工具栏设置为使用自定义 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>