ckeditor5-youtube-embed/youtubeui.js

Embed Youtube video's in CKeditor 5

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

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

export default class YoutubeUI extends Plugin {
	init() {

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

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

			/* Get the insert command for the youtube embed */
			const insertCommand = editor.commands.get('insertYoutube')

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

			/* Set the button's properties */
			buttonView.set({
				label: translate('Youtube embed'),
				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('insertYoutube')

			})

			return buttonView

		})

	}
}