@blowstack/ckeditor-nuxt

    0.6.0 • Public • Published

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

    Install

    npm i @blowstack/ckeditor-nuxt

    DownloadsWeekly Downloads

    488

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    10.6 MB

    Total Files

    17

    Last publish

    Collaborators

    • blowstack