@jaroya/ckeditor5

CKEditor 5 Full Build

Quick start

First, install the build from npm:

npm install --save @jaroya/ckeditor5-build-full

And use it in your website: You can use the build in any project eg. Nuxt 3, Next 13, React 17, Vue 3, HTML e.t.c. When used in Nuxt 3 or Next 13 projects, install it and also install the official components eg Ckeditor-Vue and Ckeditor-React.

<div id="editor">
	<p>This is the editor content.</p>
</div>
<script src="./node_modules/@jaroya/ckeditor5-build-full/build/ckeditor.js"></script>
<script>
	ClassicEditor
		.create( document.querySelector( '#editor' ), {
			// Add your config options here
			simpleUpload: {
                    uploadUrl: 'http://example.com',
            }
		})
		.then( editor => {
			window.editor = editor;
		} )
		.catch( error => {
			console.error( 'There was a problem initializing the editor.', error );
		} );
</script>

Usage in Nuxt 3 and Vue 3

npm install --save @jaroya/ckeditor5-build-full
npm install --save @ckeditor/ckeditor5-vue

Then create a component file in your components' directory e.g CkeditorNuxt.client.vue The extension .client explicitly tells Nuxt 3 to render the component on the client side only. You can learn more here If using Vue 3 there's no need of the .client extension as everything will be rendered on the client.

	<template>
		<ckeditor
			:editor="editor"
			:value="value"
			:config="config"
			:tag-name="tagName"
			:disabled="disabled"
			@input="event => $emit('input', event)"
		/>    
	</template>

	<script>
		import ClassicEditor from '@jaroya/ckeditor5-build-full'
		import CKEditor from '@ckeditor/ckeditor5-vue'

		export default {
			name: 'CkeditorNuxt',
			components: {
				ckeditor: CKEditor.component,
			},
			props: {
				value: {
					type: String,
					required: false,
				},
				tagName: {
					type: String,
					required: false,
					default: 'div',
				},
				disabled: {
					type: Boolean,
					required: false,
				},
				uploadUrl: {
					type: String,
					required: false,
				},
				config: {
					type: Object,
					required: false,
					default: () => ({}),
				},
			},

			data() {
				return {
					editor: ClassicEditor,
				}
			},
		}
	</script>

In your Parent component, you can use the component as follows. You can still fire the component with the plugins of choice, so long as they are included in the package. If you don't specify the toolbar and plugins, then all the configured tools and plugins will be loaded.

	<template>
		<CkeditorNuxt v-model="mycontent" :config="editorConfig"/>
	</template>

	<script setup>
		const mycontent = ref("");
		const editorConfig = ref({
			simpleUpload: {
				uploadUrl: 'http://localhost:3000/quizes/img'
			},
        	// removePlugins: ['Title'], //already removed it from the package
			toolbar: {
				items: [
				'heading',
				'undo',
				'redo',
				'bold',
				'italic',
				'fontBackgroundColor',
				'fontColor',
				'fontSize',
				'fontFamily',
				'underline',
				'removeFormat',
				'highlight',
				'|',
				'bulletedList',
				'numberedList',
				'todoList',
				'outdent',
				'indent',
				'alignment',
				'|',
				'MathType',
				'ChemType',
				'imageUpload',
				'blockQuote',
				'insertTable',
				'mediaEmbed',
				'link',
				'code',
				'codeBlock',
				'findAndReplace',
				'htmlEmbed',
				'horizontalLine',
				'selectAll',
				'sourceEditing',
				'specialCharacters',
				'strikethrough',
				'subscript',
				'superscript',
				'style'
				],
				shouldNotGroupWhenFull: true,
			}
    	})
	</script>

Built-in plugins:

• MathType,
• Chemtype,
• Alignment,
• Autoformat,
• BlockQuote,
• Bold,
• CloudServices,
• Code,
• CodeBlock,
• DataFilter,
• Essentials,
• FindAndReplace,
• FontBackgroundColor,
• FontColor,
• FontFamily,
• FontSize,
• GeneralHtmlSupport,
• Heading,
• Highlight,
• HorizontalLine,
• HtmlComment,
• HtmlEmbed,
• Image,
• ImageCaption,
• ImageResize,
• ImageStyle,
• ImageToolbar,
• ImageUpload,
• SimpleUpload,
• Indent,
• IndentBlock,
• Italic,
• Link,
• List,
• MediaEmbed,
• Paragraph,
• PasteFromOffice,
• RemoveFormat,
• SelectAll,
• SourceEditing,
• SpecialCharacters,
• SpecialCharactersArrows,
• SpecialCharactersCurrency,
• SpecialCharactersEssentials,
• SpecialCharactersMathematical,
• SpecialCharactersText,
• Strikethrough,
• Style,
• Subscript,
• Superscript,
• Table,
• TableCaption,
• TableCellProperties,
• TableColumnResize,
• TableProperties,
• TableToolbar,
• TextTransformation,
• Title,
• TodoList,
• Underline,
• WordCount