无法让自定义下拉菜单在 QuillJS 编辑器中工作答案

【问题标题】：Cannot Get Custom Dropdown to Work in QuillJS Editor无法让自定义下拉菜单在 QuillJS 编辑器中工作
【发布时间】：2017-10-26 19:51:20
【问题描述】：

描述：我在 Quill 编辑器工具栏中创建下拉菜单时遇到问题。任何帮助，将不胜感激。理想情况下，我希望下拉菜单显示在工具栏中，并将选择选项文本添加为编辑器中的文本。

测试用例：https://codepen.io/Graphettion/pen/OxezbO

HTML

<div id="editor-toolbar">
  <select class="ql-emailVars">
    <option value="1">Account Url</option>
    <option value="2">First Name</option>
    <option value="3">Login</option>
    <option value="4">Org Name</option>
    <option value="5">Support Email</option>
  </select>
</div>
<div id="editor"></div>
<div class="text-output"></div>
<div class="html-output"></div>

const quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: "#editor-toolbar",
        handlers: {
          "emailVars": emailVars
        }
    }
  },
  theme: 'snow'
});

// Add Custom Dropdown to Toolbar
function emailVars(args) {
  const value = args[0];
  const cursorPosition = this.quill.getSelection().index
  this.quill.insertText(cursorPosition, value)
  this.quill.setSelection(cursorPosition + value.length)
}

谢谢，

【问题讨论】：

标签： javascript rich-text-editor quill

【解决方案1】：

我必须添加一些 CSS 以将其显示在工具栏上，并添加一些 JS 以将其插入文本编辑器。

CSS

.ql-picker.ql-emailVars {
  width: 120px;
}

.ql-picker.ql-emailVars .ql-picker-item::before, 
.ql-picker.ql-emailVars .ql-picker-label::before {
  content: 'Custom'
}

.ql-picker.ql-emailVars [data-value="1"]::before {
  content: 'Account Url'
}

.ql-picker.ql-emailVars [data-value="2"]::before {
  content: 'First Name'
}

.ql-picker.ql-emailVars [data-value="3"]::before {
  content: 'Login'
}

.ql-picker.ql-emailVars [data-value="4"]::before {
  content: 'Org Name'
}

.ql-picker.ql-emailVars [data-value="5"]::before {
  content: 'Support Email'
}

const quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: "#editor-toolbar",
      handlers: {
        "emailVars": emailVars
      }
    }
  },
  theme: 'snow'
});

// Add Custom Dropdown to Toolbar
function emailVars(args) {
  const value = args[0]
  const cursorPosition = this.quill.getSelection().index
  if (value == 1) {
    this.quill.insertText(cursorPosition, "{AccountURL}")
  } else if (value == 2) {
    this.quill.insertText(cursorPosition, "{FirstName}")
  } else if (value == 3) {
    this.quill.insertText(cursorPosition, "{Login}")
  } else if (value == 4) {
    this.quill.insertText(cursorPosition, "{OrganizationName}")
  } else if (value == 5) {
    this.quill.insertText(cursorPosition, "{SupportEmail}")
  } else {
    this.quill.insertText(cursorPosition, "Please add an email variable.")
  }

  this.quill.setSelection(cursorPosition + value.length)
}

https://codepen.io/Graphettion/pen/OxezbO

【讨论】：

感谢您的帮助，这对解决问题有很大帮助！

【解决方案2】：

我也有这个烦恼。不幸的是，Quill 中有一个硬代码。只有默认的工具栏选择具有 options 显示文本的 CSS 规则

.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}

但最好的方法是为所有自定义选择添加 content: attr(data-label);，因为在我的情况下，data-label 设置正确，它可以从 CSS attr(data-label) 访问

【讨论】：