Created
August 4, 2018 18:52
-
-
Save tshafer/306ed82964ee1f6e9d0dbfa324ccf340 to your computer and use it in GitHub Desktop.
ckeditor 5 dropdown plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; | |
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; | |
import { | |
createDropdown, | |
addToolbarToDropdown | |
} from '@ckeditor/ckeditor5-ui/src/dropdown/utils'; | |
export default class MergeFields extends Plugin { | |
static get pluginName() { | |
return 'mergeFields'; | |
} | |
init() { | |
const editor = this.editor; | |
const t = this.editor.t; | |
const componentFactory = editor.ui.componentFactory; | |
const mergeOptions = editor.config.get('mergeFields.options') | |
mergeOptions.forEach(option => this._addButton(option)); | |
componentFactory.add('mergeFields', locale => { | |
const dropdownView = createDropdown(locale); | |
const buttons = mergeOptions.map(option => componentFactory.create(`mergeFields:${ option.displayValue }`)); | |
addToolbarToDropdown(dropdownView, buttons); | |
dropdownView.buttonView.set({ | |
label: t('Merge Fields'), | |
tooltip: true, | |
withText: true | |
}); | |
dropdownView.toolbarView.isVertical = true; | |
dropdownView.extendTemplate({ | |
attributes: { | |
class: 'ck-alignment-dropdown' | |
} | |
}); | |
return dropdownView; | |
}); | |
} | |
/** | |
* Helper method for initializing the button and linking it with an appropriate command. | |
* | |
* @private | |
* @param {String} option The name of the alignment option for which the button is added. | |
*/ | |
_addButton(option) { | |
const editor = this.editor; | |
editor.ui.componentFactory.add(`mergeFields:${ option.displayValue }`, locale => { | |
const command = editor.commands.get('mergeField'); | |
const buttonView = new ButtonView(locale); | |
buttonView.set({ | |
label: option.displayValue, | |
withText: true, | |
// icon: icons.get(option), | |
tooltip: true | |
}); | |
this.listenTo(buttonView, 'execute', () => { | |
editor.model.change(writer => { | |
const insertPosition = editor.model.document.selection.getLastPosition(); | |
writer.insertText('[' + option.name + ']', { | |
bold: true | |
}, insertPosition); | |
}); | |
editor.editing.view.focus(); | |
}); | |
return buttonView; | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment