Quill WYSIWYG 编辑器 - 为按钮添加属性答案

【问题标题】：Quill WYSIWYG editor - adding attributes to buttonsQuill WYSIWYG 编辑器 - 为按钮添加属性
【发布时间】：2015-07-01 04:17:15
【问题描述】：

如何在基于 Quill 的 WYSIWIG 编辑器中为按钮添加属性？

这是我的代码

<div class="quill-wrapper">
  <div id="toolbar" class="ql-toolbar-container toolbar">
    <div class="ql-format-group">
      <span class="ql-bold ql-format-button"></span>
      <span class="ql-italic ql-format-button"></span>
      <span class="ql-strike ql-format-button"></span>
      <span class="ql-underline ql-format-button"></span>
      <span class="ql-link ql-format-button"></span>
      <span class="ql-format-button ql-color"></span>
      <span class="ql-format-separator"></span>
      <select class="ql-font">
        <option value="Times New Roman">Times New Roman</option>
      </select>
      <select class="ql-size">
        <option value="small">Small</option>
        <option value="normal">Normal</option>
        <option value="large">Large</option>
      </select>

    </div>
  </div>
  <input type="hidden" id="postDesc" name="postDesc" value="pavitar dua">
  <!-- Create the editor container -->
  <div style="height:300px" class="form-control" id="editor" name="editor">
    <div>Hello World!</div>
    <div>Some initial <b>bold</b> text</div>
    <div>
      <br>
    </div>
  </div>
  <div class="counter" id="counter"></div>
</div>

现在，如果我要为<span class="ql-format-button ql-color"></span> 添加颜色，我不知道该怎么做。

【问题讨论】：

这些例子有什么问题？ quilljs.com/examples 但说真的，要求链接到场外资源的问题是题外话。
@StephenC 我特别在寻找有关如何添加按钮及其属性的文档，检查编辑。
@stephenC 你建议关闭/改写这个问题吗？
我撤回了我的反对票。但是，是的，我认为你应该改写你的问题。确保问题是询问您真正想了解的内容……而不仅仅是“示例不好，给出好的示例”。首先删除“EDIT”之前的everything ...并使标题更易于解释。
@StephenC 谢谢 :) 我做了必要的修改

标签： wysiwyg quill

【解决方案1】：

Quill 中的颜色是一种可选择的格式，因此您添加它的方式与添加字体和大小的方式完全相同。例如。

<select class="ql-color">
  <option value="red">Red</option>
  <option value="#00f">Blue</option>
  <option value="rgb(255,255,0)">Yellow</option>
</select>

【讨论】：