ckeditor5-cta-link/buttonui.js

Link with button class for CTA

import Plugin from '@ckeditor/ckeditor5-core/src/plugin'

import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'

export default class ButtonUI extends Plugin {
	init() {

		const editor = this.editor
		const translate = editor.t

		/* Register the button */
		editor.ui.componentFactory.add('Button', locale => {

			/* Get the insert command for the Button */
			const insertCommand = editor.commands.get('insertButton')

			/* Create a new ButtonView instance */
			const buttonView = new ButtonView(locale)

			/* Set the button's properties */
			buttonView.set({
				label: translate('Call to Action'),
				withText: true,
				tooltip: true
			})

			/* Bind the state of the button to the command */
			buttonView.bind('isOn', 'isEnabled').to(insertCommand, 'value', 'isEnabled')

			this.listenTo(buttonView, 'execute', () => {

				editor.execute('insertButton')

			})

			return buttonView

		})

	}
}