@mikaleb/ckeditor-nuxt

CKEditor 5 editor for nuxt apps. The component includes all free available plugins (except CKFinder, instead of simple upload adapter used)

Usage no npm install needed!

<script type="module">
  import mikalebCkeditorNuxt from 'https://cdn.skypack.dev/@mikaleb/ckeditor-nuxt';
</script>

README

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 @mikaleb/ckeditor-nuxt
npm install --save @mikaleb/ckeditor-nuxt

List of included plugins

  • Alignment,
  • Autoformat,
  • Autolink,
  • Autosave,
  • BlockQuote,
  • Bold,
  • Code,
  • CodeBlock,
  • Essentials,
  • FontBackgroundColor,
  • FontColor,
  • FontFamily,
  • FontSize,
  • Heading,
  • Highlight,
  • HorizontalLine,
  • Image,
  • ImageCaption,
  • ImageInsert,
  • ImageResize,
  • ImageStyle,
  • ImageToolbar,
  • ImageUpload,
  • Indent,
  • IndentBlock,
  • Italic,
  • Link,
  • List,
  • ListStyle,
  • Markdown,
  • MathType,
  • MediaEmbed,
  • 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'
    }
}