├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
└── src
    ├── App.vue
    ├── components
        ├── CkeditorNuxt.vue
        └── index.js
    └── main.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ckeditor-nuxt
  2 | CKEditor 5 editor for nuxt apps. The component includes all free available plugins (except CKFinder, instead simple upload adapter used)
  3 | 
  4 | ## Requirements
  5 | ```
  6 | yarn add nuxt
  7 | npm i nuxt
  8 | ```
  9 | 
 10 | ## Component integration
 11 | ```
 12 | yarn add @blowstack/ckeditor-nuxt
 13 | npm install --save @blowstack/ckeditor-nuxt
 14 | ```
 15 | 
 16 | ## List of included plugins
 17 | * Alignment,
 18 | * AutoImage,
 19 | * Autoformat,
 20 | * Autolink,
 21 | * BlockQuote,
 22 | * Bold,
 23 | * CloudServices,
 24 | * Code,
 25 | * CodeBlock,
 26 | * Essentials,
 27 | * FontBackgroundColor,
 28 | * FontColor,
 29 | * FontFamily,
 30 | * FontSize,
 31 | * Heading,
 32 | * Highlight,
 33 | * HorizontalLine,
 34 | * Image,
 35 | * ImageCaption,
 36 | * ImageInsert,
 37 | * ImageResize,
 38 | * ImageStyle,
 39 | * ImageToolbar,
 40 | * ImageUpload,
 41 | * Indent,
 42 | * IndentBlock,
 43 | * Italic,
 44 | * Link,
 45 | * LinkImage,
 46 | * List,
 47 | * ListStyle,
 48 | * MathType,
 49 | * MediaEmbed,
 50 | * MediaEmbedToolbar,
 51 | * PageBreak,
 52 | * Paragraph,
 53 | * PasteFromOffice,
 54 | * RemoveFormat,
 55 | * SimpleUploadAdapter,
 56 | * SpecialCharacters,
 57 | * SpecialCharactersArrows,
 58 | * SpecialCharactersCurrency,
 59 | * SpecialCharactersEssentials,
 60 | * SpecialCharactersLatin,
 61 | * SpecialCharactersMathematical,
 62 | * SpecialCharactersText,
 63 | * Strikethrough,
 64 | * Subscript,
 65 | * Superscript,
 66 | * Table,
 67 | * TableCellProperties,
 68 | * TableProperties,
 69 | * TableToolbar,
 70 | * TextTransformation,
 71 | * Title,
 72 | * TodoList,
 73 | * Underline,
 74 | * WordCount
 75 | 
 76 | ## Usage
 77 | ```
 78 | <template>
 79 |   <client-only placeholder="loading...">
 80 |     <ckeditor-nuxt v-model="contentHolder" :config="editorConfig"  />
 81 |   </client-only>
 82 | </template>
 83 | 
 84 | <script>
 85 | export default {
 86 |   components: {
 87 |     'ckeditor-nuxt': () => { if (process.client) { return import('@blowstack/ckeditor-nuxt') } },
 88 |   },
 89 |   data() {
 90 |     return {
 91 |       editorConfig: {
 92 |         simpleUpload: {
 93 |           uploadUrl: 'path_to_image_controller',
 94 |           headers: {
 95 |             'Authorization': 'optional_token'
 96 |           }
 97 |         }
 98 |       },
 99 |       contentHolder: ""
100 |     }
101 |   }
102 | }
103 | </script>
104 | ```
105 | ## Customization
106 | 
107 | To make customization use editorConfig object.
108 | It works the same way as the default ckeditor 5.
109 | More info at https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html
110 | 
111 | For example if you want to disable Title plugin:
112 | 
113 | ```
114 | 
115 | editorConfig: {
116 |     removePlugins: ['Title'],
117 | }
118 | ```
119 | 
120 | You can also change the behaviour of any plugin. For the Title plugin you can change for example the placeholder:
121 | 
122 | ```
123 | 
124 | editorConfig: {
125 |     title: {
126 |         placeholder: 'h1'
127 |     }
128 | }
129 | ```
130 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@blowstack/ckeditor-nuxt",
 3 |   "version": "0.6.0",
 4 |   "private": false,
 5 |   "author": {
 6 |     "name": "BlowStack",
 7 |     "email": "piotr.golon@gmail.com"
 8 |   },
 9 |   "keywords": [
10 |     "ckeditor5 nuxt",
11 |     "ckeditor 5 nuxt",
12 |     "ckeditor nuxt",
13 |     "rich text editor nuxt",
14 |     "wysiwyg nuxt",
15 |     "wysiwyg vue",
16 |     "ckeditor plugins nuxt",
17 |     "ckeditor plugins vue"
18 |   ],
19 |   "license": "MIT",
20 |   "main": "./dist/ckeditorNuxt.common.js",
21 |   "scripts": {
22 |     "serve": "vue-cli-service serve",
23 |     "build": "vue-cli-service build",
24 |     "lint": "vue-cli-service lint",
25 |     "build-bundle": "vue-cli-service build --target lib --name ckeditorNuxt ./src/components/index.js"
26 |   },
27 |   "dependencies": {
28 |     "@blowstack/ckeditor5-full-free-build": "^27.0.1",
29 |     "@ckeditor/ckeditor5-vue2": "^1.0.5"
30 |   },
31 |   "devDependencies": {
32 |     "@vue/cli-plugin-babel": "~4.3.0",
33 |     "@vue/cli-plugin-eslint": "~4.3.0",
34 |     "@vue/cli-service": "~4.3.0",
35 |     "babel-eslint": "^10.1.0",
36 |     "core-js": "^3.8.3",
37 |     "eslint": "^6.7.2",
38 |     "eslint-plugin-vue": "^6.2.2",
39 |     "vue": "^2.6.12",
40 |     "vue-template-compiler": "^2.6.12"
41 |   },
42 |   "eslintConfig": {
43 |     "root": true,
44 |     "env": {
45 |       "node": true
46 |     },
47 |     "extends": [
48 |       "plugin:vue/essential",
49 |       "eslint:recommended"
50 |     ],
51 |     "parserOptions": {
52 |       "parser": "babel-eslint"
53 |     },
54 |     "rules": {}
55 |   },
56 |   "browserslist": [
57 |     "> 1%",
58 |     "last 2 versions",
59 |     "not dead"
60 |   ],
61 |   "files": [
62 |     "dist/*",
63 |     "src/*",
64 |     "public/*",
65 |     "*.json",
66 |     "*.js"
67 |   ]
68 | }
69 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/blowstack/ckeditor-nuxt/fe5399debc2cab881c85d013dbc6a406beb8a5b8/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <CkeditorNuxt v-model="content"/>
 4 | 
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import CkeditorNuxt from './components/CkeditorNuxt.vue'
10 | 
11 | export default {
12 |   name: 'App',
13 |   components: {
14 |     CkeditorNuxt
15 |   },
16 |   data() {
17 |     return {
18 |       content: ''
19 |     }
20 |   }
21 | }
22 | </script>
23 | 
24 | <style>
25 | #app {
26 |   font-family: Avenir, Helvetica, Arial, sans-serif;
27 |   -webkit-font-smoothing: antialiased;
28 |   -moz-osx-font-smoothing: grayscale;
29 |   text-align: center;
30 |   color: #2c3e50;
31 |   margin-top: 60px;
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/src/components/CkeditorNuxt.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <ckeditor
 3 |             :editor="editor"
 4 |             :value="value"
 5 |             :config="config"
 6 |             :tagName="tagName"
 7 |             :disabled="disabled"
 8 |             @input="event => $emit('input', event)"
 9 |     />
10 | </template>
11 | <script>
12 | 
13 |     import FullFreeBuildEditor from '@blowstack/ckeditor5-full-free-build'
14 |     import CKEditor from '@ckeditor/ckeditor5-vue2'
15 | 
16 |     export default {
17 |         components: {
18 |             ckeditor: CKEditor.component
19 |         },
20 |         props: {
21 |             value: {
22 |                 type: String,
23 |                 required: false
24 |             },
25 |             tagName: {
26 |                 type: String,
27 |                 required: false,
28 |                 default: 'div'
29 |             },
30 |             disabled: {
31 |                 type: Boolean,
32 |                 required: false,
33 |             },
34 |             uploadUrl: {
35 |                 type: String,
36 |                 required: false
37 |             },
38 |             config: {
39 |                 type: Object,
40 |                 required: false,
41 |                 default: function () {
42 |                 }
43 |             }
44 |         },
45 |         data() {
46 |             return {
47 |                 editor: FullFreeBuildEditor,
48 |             }
49 |         },
50 |     };
51 | </script>
52 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import CkeditorNuxt from './CkeditorNuxt'
3 | 
4 | Vue.component('CkeditorNuxt', CkeditorNuxt)
5 | 
6 | export default CkeditorNuxt
7 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------