blowstack

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