在 Quill Rich Editor 中包含标题
Include Headings in Quill Rich Editor
我正在开发 quill rich editor,我需要所有标题 (h1....h6)。我尝试了不同的方式,但它只显示(h1 和 h2),有时它显示 3 个标题。
Html代码:
<div id="standalone-container">
<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-font"></select>
<select class="ql-header"></select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<span class="ql-formats">
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
</span>
</div>
<div id="editor-container" style="height: 400px;"> </div>
<input type="hidden" value="" name="blog_description" id="blog_description" required="">
</div>
JS代码:
<script src="{{url('quill/quill.min.js')}}"></script>
<script>
var quill = new Quill('#editor-container', {
modules: {
// formula: true,
// syntax: true,
toolbar: '#toolbar-container'
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
</script>
如何在羽毛笔编辑器中显示所有标题?如果有人能指导我完成这件事,我将不胜感激。
谢谢,
尝试以下操作 (copy paste gives new line):
//#region Fix for copy paste giving new line
var Block = Quill.import('blots/block');
Block.tagName = 'div';
Quill.register(Block);
//#endregion
var quill = new Quill('#editor-container', {
modules: {
// formula: true,
// syntax: true,
toolbar: '#toolbar-container'
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
p {
margin-top: 0;
margin-bottom: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js"></script>
<div id="standalone-container">
<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-font"></select>
<select class="ql-header">
<option value="1">Heading 1</option>
<option value="2">Heading 2</option>
<option value="3">Heading 3</option>
<option value="4">Heading 4</option>
<option value="5">Heading 5</option>
<option value="6">Heading 6</option>
<option value="">Normal</option>
</select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<span class="ql-formats">
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
</span>
</div>
<div id="editor-container" style="height: 400px;"> </div>
<input type="hidden" value="" name="blog_description" id="blog_description" required="">
</div>
如文档中所述,正常值应为 selected
,以便突出显示。
此外,该值不应该存在,否则编辑器将用 undefined
标签包装印迹。
The ql-toolbar
class will be added to the toolbar container and Quill attach appropriate handlers to <button>
and <select>
elements with a class name in the form ql-${format}
. Buttons element may optionally have a custom value
attribute.
<select class="ql-size">
<option value="small"></option>
<!-- Note a missing, thus falsy value, is used to reset to default -->
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
如此应用于标题大小写:
<select class="ql-header">
<option value="1">Heading 1</option>
<option value="2">Heading 2</option>
<option value="3">Heading 3</option>
<option value="4">Heading 4</option>
<option value="5">Heading 5</option>
<option value="6">Heading 6</option>
<option selected>Normal</option>
</select>
我正在开发 quill rich editor,我需要所有标题 (h1....h6)。我尝试了不同的方式,但它只显示(h1 和 h2),有时它显示 3 个标题。
Html代码:
<div id="standalone-container">
<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-font"></select>
<select class="ql-header"></select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<span class="ql-formats">
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
</span>
</div>
<div id="editor-container" style="height: 400px;"> </div>
<input type="hidden" value="" name="blog_description" id="blog_description" required="">
</div>
JS代码:
<script src="{{url('quill/quill.min.js')}}"></script>
<script>
var quill = new Quill('#editor-container', {
modules: {
// formula: true,
// syntax: true,
toolbar: '#toolbar-container'
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
</script>
如何在羽毛笔编辑器中显示所有标题?如果有人能指导我完成这件事,我将不胜感激。 谢谢,
尝试以下操作 (copy paste gives new line):
//#region Fix for copy paste giving new line
var Block = Quill.import('blots/block');
Block.tagName = 'div';
Quill.register(Block);
//#endregion
var quill = new Quill('#editor-container', {
modules: {
// formula: true,
// syntax: true,
toolbar: '#toolbar-container'
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
p {
margin-top: 0;
margin-bottom: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js"></script>
<div id="standalone-container">
<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-font"></select>
<select class="ql-header">
<option value="1">Heading 1</option>
<option value="2">Heading 2</option>
<option value="3">Heading 3</option>
<option value="4">Heading 4</option>
<option value="5">Heading 5</option>
<option value="6">Heading 6</option>
<option value="">Normal</option>
</select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<span class="ql-formats">
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
</span>
</div>
<div id="editor-container" style="height: 400px;"> </div>
<input type="hidden" value="" name="blog_description" id="blog_description" required="">
</div>
如文档中所述,正常值应为 selected
,以便突出显示。
此外,该值不应该存在,否则编辑器将用 undefined
标签包装印迹。
The
ql-toolbar
class will be added to the toolbar container and Quill attach appropriate handlers to<button>
and<select>
elements with a class name in the formql-${format}
. Buttons element may optionally have a customvalue
attribute.
<select class="ql-size">
<option value="small"></option>
<!-- Note a missing, thus falsy value, is used to reset to default -->
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
如此应用于标题大小写:
<select class="ql-header">
<option value="1">Heading 1</option>
<option value="2">Heading 2</option>
<option value="3">Heading 3</option>
<option value="4">Heading 4</option>
<option value="5">Heading 5</option>
<option value="6">Heading 6</option>
<option selected>Normal</option>
</select>