ckeditor5-youtube-embed/youtubeediting.js

Embed Youtube video's in CKeditor 5

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

import {
	toWidget,
	toWidgetEditable
} from '@ckeditor/ckeditor5-widget/src/utils'

import Widget from '@ckeditor/ckeditor5-widget/src/widget'

import InsertYoutubeCommand from './youtubecommand'

export default class YoutubeEditing extends Plugin {

	static get requires() {
		return [
			Widget
		]
	}

	init() {

		/* Define the schema structure */
		this._defineSchema()

		/* Define the converters for the schema */
		this._defineConverters()

		/* Register insertion command */
		this.editor.commands.add('insertYoutube', new InsertYoutubeCommand(this.editor))

	}

	_defineSchema() {

		const schema = this.editor.model.schema

		schema.register('Youtube', {
			/* Is a self contained object */
			isObject: true,
			/* Allow in places where blocks are allowed */
			allowWhere: '$block'
		})

		schema.register('YoutubeFrame', {
			/* If false, on enter a new YoutubeTitle is created */
			isLimit: true,
			/* Is only allowed in the Youtube schema */
			allowIn: 'Youtube',
			/* Allow content which is allowed in blocks (i.e. text with attributes, not lists, etc.) */
			allowContentOf: '$block',
			allowAttributes: ['src']
		})

	}

	_defineConverters() {

		const conversion = this.editor.conversion

		/* Containing wrapper */
		conversion.for('upcast').elementToElement({
			model: 'Youtube',
			view: {
				name: 'div',
				classes: 'youtube-embed'
			}
		})

		conversion.for('dataDowncast').elementToElement({
			model: 'Youtube',
			view: {
				name: 'div',
				classes: 'youtube-embed'
			}
		})

		/* Conversion while editing */
		conversion.for('editingDowncast').elementToElement({
			model: 'Youtube',
			view: (modelElement, viewWriter) => {

				const div = viewWriter.createContainerElement('div', {
					class: 'youtube-embed'
				})

				/* To widget makes the element not editable */
				return toWidget(div, viewWriter, {
					label: 'Youtube widget'
				})

			}
		})

		let src = []

		/* Containing wrapper */
		conversion.for('upcast').elementToElement({
			model: 'YoutubeFrame',
			view: (modelElement, viewWriter) => {

				const index = modelElement.index

				if(modelElement.getAttribute('src')) {
					src[index] = modelElement.getAttribute('src')
				}

				return modelElement
			}
		})

		conversion.for('dataDowncast').elementToElement({
			model: 'YoutubeFrame',
			view: (modelElement, viewWriter) => {

				const index = modelElement.index

				const frame = viewWriter.createContainerElement('iframe', {
					src: modelElement.getAttribute('src') || src[index]
				})

				return frame

			}
		})

		/* Conversion while editing */
		conversion.for('editingDowncast').elementToElement({
			model: 'YoutubeFrame',
			view: (modelElement, viewWriter) => {

				const index = modelElement.index

				const frame = viewWriter.createContainerElement('iframe', {
					src: modelElement.getAttribute('src') || src[index]
				})

				/* To widget makes the element not editable */
				return toWidget(frame, viewWriter, {
					label: 'Youtube widget'
				})

			}
		})

	}

}