Question

我正在使用丰富的鹅毛笔编辑器，我需要所有标题（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>

我如何在羽毛笔编辑器中显示所有标题？如果有任何指导，我将不胜感激。谢谢，

Answer 1

尝试以下（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>

Answer 2

如文档中所述，“普通”应为selected，以便突出显示。此外，该值也不应该存在，否则编辑器将使用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>

在Quill Rich Editor中包含标题

2 个答案: