[英]Include Headings in Quill Rich Editor
我正在使用 quill 豐富的編輯器,我需要所有標題 (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>
如何在羽毛筆編輯器中顯示所有標題? 如果有任何人指導我完成此操作,我將不勝感激。 謝謝,
嘗試以下操作( 復制粘貼給出新行):
//#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
Normal ,以便突出顯示。 此外,該值不應該存在,否則編輯器將使用undefined
標簽包裝 Blot。
ql-toolbar
類將被添加到工具欄容器中,Quill 將適當的處理程序附加到<button>
和<select>
元素,其類名稱為ql-${format}
。 Buttons 元素可以選擇有一個自定義value
屬性。
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.