How to add code block support on CK Editor in Vue 3 Project

Exercitationem voluptatibus saepe veritatis quibusdam similique. Sed consequatur dolores sunt fuga et. Voluptas rerum reiciendis rerum velit et eos. Ut ut ex sunt consectetur rem cum. Quia ut veritatis minus ad. Aliquid suscipit dicta consequatur est sunt beatae. Quas vel unde dolorem maiores non reiciendis. Tempora laborum et necessitatibus suscipit error repellat. Doloremque quibusdam et nisi excepturi dolorum quia eveniet. Voluptas sed quibusdam numquam non sunt consequatur. Iste et illum provident modi aut qui. Et facere iusto ut earum repudiandae. Modi voluptatibus doloribus eaque iusto quos aspernatur. In officia eum et dolor. Atque minima odit harum omnis quos provident. Sequi deleniti id saepe quam iusto est omnis.

Qoute Block Style

An object at rest remains at rest, and an object in motion remains in motion at constant speed and in a straight line unless acted on by an unbalanced force.

- By Isaac Newton

The acceleration of an object depends on the mass of the object and the amount of force applied.

- By Isaac Newton

Whenever one object exerts a force on another object, the second object exerts an equal and opposite on the first.

- By Isaac Newton

Testing for image block using file uploader:

Testing for image that was uploaded using url (Centered image):

Slide image:

How can I add code block support to CKEditor 5 on vue 2 project

1. Add first you need to install the ckeditor code block:

npm i @ckeditor/ckeditor5-code-block

When install is finished import the plugin:

import { CodeBlock } from '@ckeditor/ckeditor5-code-block';

Then Add that code block to your ck editor config:

editorConfig: {
	plugins: [CodeBlock],
	toolbar: {
		items: ['codeBlock']
	},
	codeBlock: {
		languages: [
			{ language: 'plaintext', label: 'Plain text' }, // The default language.
			{ language: 'c', label: 'C' },
			{ language: 'cs', label: 'C#' },
			{ language: 'cpp', label: 'C++' },
			{ language: 'css', label: 'CSS' },
			{ language: 'diff', label: 'Diff' },
			{ language: 'html', label: 'HTML' },
			{ language: 'java', label: 'Java' },
			{ language: 'javascript', label: 'JavaScript' },
			{ language: 'php', label: 'PHP' },
			{ language: 'python', label: 'Python' },
			{ language: 'ruby', label: 'Ruby' },
			{ language: 'typescript', label: 'TypeScript' },
			{ language: 'xml', label: 'XML' }
		]
	}
}

Here is the demo php code:

<?php
class MySpecialClass {
	public function __construct(User $user, Service $service, Product $product) {}
	public function authenticate() {
		$this->user->login();
	}
	
	public function process() {
		$this->product->generateUUID();
		
		try {
			return $this->service->validate($this->product)
					->deliver();
			}
		catch (MySpecialErrorHandler $e) {
			$e->throwError();
		}
	}
}