@atageldi194229/ckeditor-nuxt

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'
    }
}