ckeditor-nuxt
CKEditor 5 editor for nuxt apps. The component includes all free available plugins (except CKFinder, instead simple upload adapter used)
Requirements
yarn add nuxt
npm i nuxt
Component integration
yarn add @blowstack/ckeditor-nuxt
npm install --save @blowstack/ckeditor-nuxt
List of included plugins
- Alignment,
- AutoImage,
- Autoformat,
- Autolink,
- BlockQuote,
- Bold,
- CloudServices,
- Code,
- CodeBlock,
- Essentials,
- FontBackgroundColor,
- FontColor,
- FontFamily,
- FontSize,
- Heading,
- Highlight,
- HorizontalLine,
- Image,
- ImageCaption,
- ImageInsert,
- ImageResize,
- ImageStyle,
- ImageToolbar,
- ImageUpload,
- Indent,
- IndentBlock,
- Italic,
- Link,
- LinkImage,
- List,
- ListStyle,
- MathType,
- MediaEmbed,
- MediaEmbedToolbar,
- PageBreak,
- Paragraph,
- PasteFromOffice,
- RemoveFormat,
- SimpleUploadAdapter,
- SpecialCharacters,
- SpecialCharactersArrows,
- SpecialCharactersCurrency,
- SpecialCharactersEssentials,
- SpecialCharactersLatin,
- SpecialCharactersMathematical,
- SpecialCharactersText,
- Strikethrough,
- Subscript,
- Superscript,
- Table,
- TableCellProperties,
- TableProperties,
- TableToolbar,
- TextTransformation,
- Title,
- TodoList,
- Underline,
- WordCount
Usage
<template>
<client-only placeholder="loading...">
<ckeditor-nuxt v-model="contentHolder" :config="editorConfig" />
</client-only>
</template>
<script>
export default {
components: {
'ckeditor-nuxt': () => { if (process.client) { return import('@blowstack/ckeditor-nuxt') } },
},
data() {
return {
editorConfig: {
simpleUpload: {
uploadUrl: 'path_to_image_controller',
headers: {
'Authorization': 'optional_token'
}
}
},
contentHolder: ""
}
}
}
</script>
Customization
To make customization use editorConfig object. It works the same way as the default ckeditor 5. More info at https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html
For example if you want to disable Title plugin:
editorConfig: {
removePlugins: ['Title'],
}
You can also change the behaviour of any plugin. For the Title plugin you can change for example the placeholder:
editorConfig: {
title: {
placeholder: 'h1'
}
}