QuillJS 편집기에서 사용자 지정 드롭 다운을 사용할 수 없다

Question

설명 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> 

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