QuillJS Editorでカスタムドロップダウンを使用できない

Question

説明Quill Editorツールバーでドロップダウンを作成する際に問題が発生します。どんな助けもありがとう。理想的には、ツールバーにドロップダウンを表示し、エディタに選択オプションのテキストをテキストとして追加することをおすすめします。

テストケース：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> 

JS

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) 
} 

は

Answer 1

私はツールバーといくつかのJSでそれを表示するには、いくつかのCSSを追加する必要がありました、ありがとうそれをテキストエディタに挿入します。

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' 
} 

JS

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