@blowstack/ckeditor-nuxt

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

0.6.0

latest

npm

Version published: 2 years ago

Maintainers: 1

Weekly downloads: 576; decreased by-18.18%

Weekly downloads

Readme

Source

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

Keywords

FAQs

What is @blowstack/ckeditor-nuxt?

Is @blowstack/ckeditor-nuxt popular?

Is @blowstack/ckeditor-nuxt well maintained?

Last updated on 02 Apr 2021

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket