├── .babelrc
├── .eslintrc
├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── dist
    ├── vue-ckeditor5.js
    └── vue-ckeditor5.js.map
├── examples
    ├── custom-editors
    │   ├── ckeditor.js
    │   ├── ckeditor.js.map
    │   └── translations
    │   │   └── ru.js
    ├── example1
    │   └── index.html
    ├── example2
    │   └── index.html
    ├── example4
    │   ├── index.html
    │   └── style.css
    ├── example5
    │   └── index.html
    └── example6
    │   └── index.html
├── package.json
├── src
    ├── index.js
    └── vue-ckeditor.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@babel/preset-env"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "root": true,
3 |   "extends": "standard",
4 |   "globals": {
5 |     "VERSION": true
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | * text=auto
 2 | 
 3 | *.html         text eol=lf
 4 | *.js           text eol=lf
 5 | *.json         text eol=lf
 6 | *.md           text eol=lf
 7 | .babelrc       text eol=lf
 8 | .eslintrc      text eol=lf
 9 | .gitattributes text eol=lf
10 | .gitignore     text eol=lf
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .idea
3 | .git
4 | 
5 | package-lock.json
6 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 igorxut
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1>VueCkeditor5</h1>
  2 | 
  3 | [![License](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/igorxut/vue-ckeditor5/blob/master/LICENSE)
  4 | [![NPM version](https://img.shields.io/npm/v/vue-ckeditor5.svg)](https://www.npmjs.com/package/vue-ckeditor5)
  5 | [![File size](https://img.shields.io/github/size/igorxut/vue-ckeditor5/dist/vue-ckeditor5.js.svg)](https://github.com/igorxut/vue-ckeditor5/blob/master/dist/vue-ckeditor5.js)
  6 | 
  7 | <h2>Description</h2>
  8 | 
  9 | <div>
 10 |   <a href="https://github.com/vuejs/vue" target="_blank"><img alt="Vue 2" src="https://vuejs.org/images/logo.png" title="Vue 2" width="50" /></a>
 11 |   <a href="https://github.com/ckeditor" target="_blank"><img alt="CKEditor 5" src="https://avatars2.githubusercontent.com/u/825710?s=200&v=4" title="CKEditor 5" width="50" /></a>
 12 | </div>
 13 | 
 14 | <p>Component CKEditor&nbsp;5 for Vue&nbsp;2.</p>
 15 | 
 16 | <p>Project is outdated. See <a href="https://github.com/ckeditor/ckeditor5-vue" target="_blank">official release</a>.</p>
 17 | 
 18 | <h2>Installation</h2>
 19 | 
 20 | <h3>NMP</h3>
 21 | 
 22 | ```shell
 23 | npm install vue-ckeditor5
 24 | ```
 25 | 
 26 | <h3>Manual</h3>
 27 | 
 28 | <p><a href="https://github.com/igorxut/vue-ckeditor5/blob/master/dist/vue-ckeditor5.js" target="_blank">Download file</a> from repository, paste it in your project and insert path to it in your page by code:
 29 | 
 30 | ```html
 31 | <script src="vue-ckeditor5.js"></script>
 32 | ```
 33 | </p>
 34 | 
 35 | <p></p>
 36 | 
 37 | <h2>Usage</h2>
 38 | 
 39 | <h3>How to</h3>
 40 | 
 41 | <p>You must paste CKEditor's&nbsp;5 implementations to vue component. You can use even <a href="https://docs.ckeditor.com/ckeditor5/latest/builds/guides/development/custom-builds.html" target="_blank">custom build</a> of CKEditor&nbsp;5.</p>
 42 | 
 43 | <p>See <a href="https://github.com/igorxut/vue-ckeditor5/blob/master/examples" target="_blank">examples</a>.</p>
 44 | 
 45 | <h4>First way - Global</h4>
 46 | 
 47 | <p>You can register component globaly by plugin (recommended):</p>
 48 | 
 49 | ```javascript
 50 | import Vue from 'vue'
 51 | import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
 52 | import VueCkeditor from 'vue-ckeditor5'
 53 | 
 54 | const options = {
 55 |   editors: {
 56 |     classic: ClassicEditor,
 57 |   },
 58 |   name: 'ckeditor'
 59 | }
 60 | 
 61 | Vue.use(VueCkeditor.plugin, options);
 62 | ```
 63 | 
 64 | <p>Then you can use the component in your template:</p>
 65 | 
 66 | ```html
 67 | <ckeditor type="classic" v-model="value1"></ckeditor>
 68 | ```
 69 | 
 70 | <h5>Plugin options</h5>
 71 | 
 72 | <table>
 73 |   <thead>
 74 |     <tr>
 75 |       <th>property</th>
 76 |       <th>type</th>
 77 |       <th>required</th>
 78 |       <th>default</th>
 79 |       <th>description</th>
 80 |     </tr>
 81 |   </thead>
 82 |   <tbody>
 83 |     <tr>
 84 |       <td>editors</td>
 85 |       <td>Object</td>
 86 |       <td>true</td>
 87 |       <td></td>
 88 |       <td>
 89 |         Map of editors:
 90 |         <ul>
 91 |           <li>value - CKEditor&nbsp;5 implementation</li>
 92 |           <li>key - alias for it (for prop '<a href="#prop-type">type</a>')</li>
 93 |         </ul>
 94 |       </td>
 95 |     </tr>
 96 |     <tr>
 97 |       <td>name</td>
 98 |       <td>String</td>
 99 |       <td>false</td>
100 |       <td><code>'vue-ckeditor'</code></td>
101 |       <td>Name of component.</td>
102 |     </tr>
103 |   </tbody>
104 | </table>
105 | 
106 | <h4>Second way - Local</h4>
107 | 
108 | <p>You can register component localy:</p>
109 | 
110 | ```javascript
111 | import Vue from 'vue'
112 | import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
113 | import VueCkeditor from 'vue-ckeditor5'
114 | 
115 | new Vue({
116 |   el: '#app',
117 |   components: {
118 |     'vue-ckeditor': VueCkeditor.component
119 |   },
120 |   data: {
121 |     value1: 'hello',
122 |     value2: 'world',
123 |     editors: {
124 |       classic: ClassicEditor
125 |     }
126 |   },
127 |   template:
128 |   `<vue-ckeditor type="classic" v-model="value1" :editors="editors"></vue-ckeditor>`
129 | })
130 | ```
131 | 
132 | <h3>Component's props</h3>
133 | 
134 | <table>
135 |   <thead>
136 |     <tr>
137 |       <th>prop</th>
138 |       <th>type</th>
139 |       <th>required</th>
140 |       <th>default</th>
141 |       <th>description</th>
142 |     </tr>
143 |   </thead>
144 |   <tbody>
145 |     <tr>
146 |       <td>config</td>
147 |       <td>Object</td>
148 |       <td>false</td>
149 |       <td><code>{language:'en'}</code></td>
150 |       <td>Object with <a href="https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/configuration.html" target="_blank">config</a> properties for CKEditor&nbsp;5 instance.</td>
151 |     </tr>
152 |     <tr>
153 |       <td><a name="prop-editors">editors</a></td>
154 |       <td>Object</td>
155 |       <td>false</td>
156 |       <td><code>{}</code></td>
157 |       <td>
158 |         Map of editors:
159 |         <ul>
160 |           <li>value - CKEditor&nbsp;5 implementation</li>
161 |           <li>key - alias for it (for prop '<a href="#prop-type">type</a>')</li>
162 |         </ul>
163 |       </td>
164 |     </tr>
165 |     <tr>
166 |       <td>emptyValue</td>
167 |       <td></td>
168 |       <td>false</td>
169 |       <td></td>
170 |       <td>Set if you want to change the '<a href="https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model" target="_blank">v-model</a>' value of emptiness editor.</td>
171 |     </tr>
172 |     <tr>
173 |       <td>readonly</td>
174 |       <td>Boolean</td>
175 |       <td>false</td>
176 |       <td><code>false</code></td>
177 |       <td>Read-only mode for CKEditor&nbsp;5 instance.</td>
178 |     </tr>
179 |     <tr>
180 |       <td>tag</td>
181 |       <td>String</td>
182 |       <td>false</td>
183 |       <td><code>div</code></td>
184 |       <td>HTMLElement for rendering.</td>
185 |     </tr>
186 |     <tr>
187 |       <td><a name="prop-type">toolbarContainer</a></td>
188 |       <td>String</td>
189 |       <td>false</td>
190 |       <td>null</td>
191 |       <td>CSS-selector of DOM-element for CKEditor toolbar. The element is searched by <a href="//developer.mozilla.org/en-US/docs/Web/API/Document/querySelector" target="_blank">Document.querySelector()</a>.</td>
192 |     </tr>
193 |     <tr>
194 |       <td><a name="prop-type">type</a></td>
195 |       <td>String</td>
196 |       <td>true</td>
197 |       <td></td>
198 |       <td>Key for CKEditor&nbsp;5 implementation of '<a href="#prop-type">editors</a>' prop.</td>
199 |     </tr>
200 |     <tr>
201 |       <td>value</td>
202 |       <td>String</td>
203 |       <td>true</td>
204 |       <td><code>''</code></td>
205 |       <td>Value for data bindings. Use '<a href="https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model" target="_blank">v-model</a>' for it.</td>
206 |     </tr>
207 |   </tbody>
208 | </table>
209 | 
210 | <h3>Normal HTML attributes</h3>
211 | 
212 | <p>You can bind normal HTML attributes to component like this (<code>data-api</code> for example):</p>
213 | 
214 | ```html
215 | <vue-ckeditor type="classic" v-model="value" data-api="1"></vue-ckeditor>
216 | ```
217 | 
218 | <h2>Component's events</h2>
219 | 
220 | <table>
221 |   <thead>
222 |     <tr>
223 |       <th>name</th>
224 |       <th>parameters</th>
225 |       <th>description</th>
226 |     </tr>
227 |   </thead>
228 |   <tbody>
229 |     <tr>
230 |       <td>ready(instance)</td>
231 |       <td>
232 |         <dl>
233 |             <dt><strong>instance</strong><dt>
234 |             <dd>Instance of CKEditor.</dd>
235 |         </dl>
236 |       </td>
237 |       <td>Instance of CKEditor is ready.</td>
238 |     </tr>
239 |     <tr>
240 |       <td>destroy(instance)</td>
241 |       <td>
242 |         <dl>
243 |             <dt><strong>instance</strong><dt>
244 |             <dd>Instance of CKEditor.</dd>
245 |         </dl>
246 |       </td>
247 |       <td>Instance of CKEditor is destroyed.</td>
248 |     </tr>
249 |     <tr>
250 |       <td>input(newValue, instance, eventInfo, batch)</td>
251 |       <td>
252 |         <dl>
253 |             <dt><strong>newValue</strong><dt>
254 |             <dd>New value of CKEditor's data.</dd>
255 |             <dt><strong>instance</strong><dt>
256 |             <dd>Instance of CKEditor.</dd>
257 |             <dt><strong>eventInfo</strong><dt>
258 |             <dd>An object containing information about the fired event.</dd>
259 |             <dt><strong>batch</strong><dt>
260 |             <dd>The batch that was used in the executed changes block.</dd>
261 |         </dl>
262 |       </td>
263 |       <td>Data is changed.</td>
264 |     </tr>
265 |   </tbody>
266 | </table>
267 | 
268 | <p>Events from <a href="https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_document-Document.html#event-change:isComposing" target="_blank">engine.view.document</a> (check <a href="https://github.com/igorxut/vue-ckeditor5/blob/master/examples/example5" target="_blank">example5</a>).</p>
269 | 
270 | <h2>License</h2>
271 | 
272 | <p><a href="http://opensource.org/licenses/MIT" target="_blank">MIT</a></p>
273 | 


--------------------------------------------------------------------------------
/dist/vue-ckeditor5.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueCkeditor=t():e.VueCkeditor=t()}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);var r={name:"vue-ckeditor",render:function(e){return e(this.tag,{attrs:this.$attrs})},props:{config:{default:function(){return{language:"en"}},required:!1,type:Object},editors:{default:function(){return{}},required:!1,type:Object},readonly:{default:function(){return!1},required:!1,type:Boolean},emptyValue:{required:!1,type:String},tag:{default:function(){return"div"},required:!1,type:String},toolbarContainer:{default:function(){return null},required:!1,type:String},type:{required:!0,type:String},value:{default:function(){return""},required:!1,type:String}},data:function(){return{instance:null}},watch:{value:function(e){var t=this.instance;null==t||e===t.getData()||this.emptyValueProvided&&e===this.emptyValue||t.setData(e)}},computed:{emptyValueProvided:function(){return Object.prototype.hasOwnProperty.call(this.$options.propsData,"emptyValue")},isEmpty:function(){var e=this.instance.model.document;return!e.model.hasContent(e.getRoot())}},methods:{create:function(){var e=this;if(null==this.instance){var t=this.type,n=this.$VueCkeditorEditors||this.editors;if(!Object.keys(n).length)throw new Error("There are no CKEditor 5 implementations.");var r=n[t];if(null==r)throw new Error("Wrong key '".concat(t,"'. Allowed keys: ").concat(Object.keys(n)));r.create(this.$el,this.config).then((function(t){e.instance=t;var n=e.instance;e.createToolbarContainer(),e.setEventListeners(),n.isReadOnly=e.readonly,n.setData(e.value),e.$emit("ready",n)})).catch((function(e){console.log(e)}))}},createToolbarContainer:function(){var e=this.instance,t=this.toolbarContainer;if(null!=t&&null!=e){var n=document.querySelector(t);null!=n&&n.appendChild(e.ui.view.toolbar.element)}},destroy:function(){var e=this.instance;null!=e&&(e.destroy(),this.$emit("destroy",e))},setEventListeners:function(){var e=this,t=this.instance;if(null!=t){t.model.document.on("change:data",(function(){var n=t.getData();if(e.value!==n){e.emptyValueProvided&&e.isEmpty&&(n=e.emptyValue);for(var r=arguments.length,o=new Array(r),i=0;i<r;i++)o[i]=arguments[i];e.$emit.apply(e,["input",n,t].concat(o))}}));for(var n=t.editing.view.document,r=n._events,o=function(){var r=u[i];n.on(r,(function(){for(var n=arguments.length,o=new Array(n),i=0;i<n;i++)o[i]=arguments[i];e.$emit.apply(e,[r,t].concat(o))}))},i=0,u=Object.keys(r);i<u.length;i++)o()}}},mounted:function(){this.create()},beforeDestroy:function(){this.destroy()}},o={version:"0.5.0",component:r,plugin:{install:function(e,t){var n=t.name,o=t.editors;e.prototype.$VueCkeditorEditors=o||{},e.component(n||r.name,r)}}};t.default=o}]).default}));
2 | //# sourceMappingURL=vue-ckeditor5.js.map


--------------------------------------------------------------------------------
/dist/vue-ckeditor5.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack://VueCkeditor/webpack/universalModuleDefinition","webpack://VueCkeditor/webpack/bootstrap","webpack://VueCkeditor/./src/vue-ckeditor.js","webpack://VueCkeditor/./src/index.js"],"names":["root","factory","exports","module","define","amd","window","installedModules","__webpack_require__","moduleId","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","render","createElement","this","tag","attrs","$attrs","props","config","default","language","required","type","editors","readonly","Boolean","emptyValue","String","toolbarContainer","data","instance","watch","newValue","getData","emptyValueProvided","setData","computed","$options","propsData","isEmpty","document","model","hasContent","getRoot","methods","$VueCkeditorEditors","keys","length","Error","editor","$el","then","createToolbarContainer","setEventListeners","isReadOnly","$emit","catch","error","console","log","toolbarContainerElement","querySelector","appendChild","ui","view","toolbar","element","destroy","on","args","editingViewDocument","editing","events","_events","mounted","beforeDestroy","VueCkeditor","version","VERSION","component","VueCkeditorComponent","plugin","install","Vue"],"mappings":"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","file":"vue-ckeditor5.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"VueCkeditor\"] = factory();\n\telse\n\t\troot[\"VueCkeditor\"] = factory();\n})(window, function() {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","export default {\n  name: 'vue-ckeditor',\n\n  render (createElement) {\n    return createElement(this.tag, {\n      attrs: this.$attrs\n    })\n  },\n\n  props: {\n    config: {\n      default: () => {\n        return {\n          language: 'en'\n        }\n      },\n      required: false,\n      type: Object\n    },\n\n    editors: {\n      default: () => {\n        return {}\n      },\n      required: false,\n      type: Object\n    },\n\n    readonly: {\n      default: () => false,\n      required: false,\n      type: Boolean\n    },\n\n    emptyValue: {\n      required: false,\n      type: String\n    },\n\n    tag: {\n      default: () => 'div',\n      required: false,\n      type: String\n    },\n\n    toolbarContainer: {\n      default: () => null,\n      required: false,\n      type: String\n    },\n\n    type: {\n      required: true,\n      type: String\n    },\n\n    value: {\n      default: () => '',\n      required: false,\n      type: String\n    }\n  },\n\n  data () {\n    return {\n      instance: null\n    }\n  },\n\n  watch: {\n    value (newValue) {\n      const instance = this.instance\n\n      if (\n        instance != null &&\n        newValue !== instance.getData() &&\n        !(\n          this.emptyValueProvided &&\n          newValue === this.emptyValue\n        )\n      ) {\n        instance.setData(newValue)\n      }\n    }\n  },\n\n  computed: {\n    emptyValueProvided () {\n      return Object.prototype.hasOwnProperty.call(this.$options.propsData, 'emptyValue')\n    },\n    isEmpty () {\n      const document = this.instance.model.document\n      return !document.model.hasContent(document.getRoot())\n    }\n  },\n\n  methods: {\n    create () {\n      if (this.instance == null) {\n        const type = this.type\n        const editors = this.$VueCkeditorEditors || this.editors\n\n        if (!Object.keys(editors).length) {\n          throw new Error('There are no CKEditor 5 implementations.')\n        }\n\n        const editor = editors[type]\n\n        if (editor == null) {\n          throw new Error(`Wrong key '${type}'. Allowed keys: ${Object.keys(editors)}`)\n        }\n\n        editor\n          .create(this.$el, this.config)\n          .then(editor => {\n            this.instance = editor\n            const instance = this.instance\n\n            this.createToolbarContainer()\n\n            this.setEventListeners()\n\n            instance.isReadOnly = this.readonly\n            instance.setData(this.value)\n\n            this.$emit('ready', instance)\n          })\n          .catch(error => {\n            console.log(error)\n          })\n      }\n    },\n    createToolbarContainer () {\n      const instance = this.instance\n      const toolbarContainer = this.toolbarContainer\n\n      if (\n        toolbarContainer != null &&\n        instance != null\n      ) {\n        const toolbarContainerElement = document.querySelector(toolbarContainer)\n\n        if (toolbarContainerElement != null) {\n          toolbarContainerElement.appendChild(instance.ui.view.toolbar.element)\n        }\n      }\n    },\n    destroy () {\n      const instance = this.instance\n\n      if (instance != null) {\n        instance.destroy()\n        this.$emit('destroy', instance)\n      }\n    },\n    setEventListeners () {\n      const instance = this.instance\n\n      if (instance != null) {\n        instance.model.document.on('change:data', (...args) => {\n          let newValue = instance.getData()\n\n          if (this.value !== newValue) {\n            if (\n              this.emptyValueProvided &&\n              this.isEmpty\n            ) {\n              newValue = this.emptyValue\n            }\n\n            this.$emit('input', newValue, instance, ...args)\n          }\n        })\n\n        const editingViewDocument = instance.editing.view.document\n        const events = editingViewDocument._events\n        for (const key of Object.keys(events)) {\n          editingViewDocument.on(key, (...args) => {\n            this.$emit(key, instance, ...args)\n          })\n        }\n      }\n    }\n  },\n\n  mounted () {\n    this.create()\n  },\n\n  beforeDestroy () {\n    this.destroy()\n  }\n}\n","import VueCkeditorComponent from './vue-ckeditor'\n\nconst VueCkeditor = {\n  version: VERSION,\n  component: VueCkeditorComponent,\n  plugin: {\n    install (Vue, { name, editors }) {\n      Vue.prototype.$VueCkeditorEditors = editors || {}\n\n      Vue.component(name || VueCkeditorComponent.name, VueCkeditorComponent)\n    }\n  }\n}\n\nexport default VueCkeditor\n"],"sourceRoot":""}


--------------------------------------------------------------------------------
/examples/custom-editors/translations/ru.js:
--------------------------------------------------------------------------------
1 | (function(d){d['ru']=Object.assign(d['ru']||{},{a:"Невозможно загрузить файл",b:"Image toolbar",c:"Table toolbar",d:"Выравнивание по левому краю",e:"Выравнивание по правому краю",f:"Выравнивание по центру",g:"Выравнивание по ширине",h:"Выравнивание текста",i:"Выравнивание",j:"Жирный",k:"Вставьте изображение или файл",l:"Исходный код",m:"Зачеркнутый",n:"медиа-виджет",o:"Идёт загрузка",p:"Вставить таблицу",q:"Столбец заголовков",r:"Вставить столбец слева",s:"Вставить столбец справа",t:"Удалить столбец",u:"Столбец",v:"Строка заголовков",w:"Вставить строку ниже",x:"Вставить строку выше",y:"Удалить строку",z:"Строка",aa:"Объединить с ячейкой сверху",ab:"Объединить с ячейкой справа",ac:"Объединить с ячейкой снизу",ad:"Объединить с ячейкой слева",ae:"Разделить ячейку вертикально",af:"Разделить ячейку горизонтально",ag:"Объединить ячейки",ah:"Нумерованный список",ai:"Маркированный список",aj:"Вставить медиа",ak:"URL не должен быть пустым.",al:"Этот URL медиа не поддерживается.",am:"Увеличить отступ",an:"Уменьшить отступ",ao:"Загрузка не выполнена",ap:"Вставить изображение",aq:"Ссылка",ar:"Подпись к изображению",as:"Оригинальный размер изображения",at:"Боковое изображение",au:"Выравнивание по левому краю",av:"Выравнивание по центру",aw:"Выравнивание по правому краю",ax:"Виджет изображений",ay:"Выделение жёлтым маркером",az:"Выделение зелёным маркером",ba:"Выделение розовым маркером",bb:"Выделение синим маркером",bc:"Красный цвет текста",bd:"Зеленый цвет текста",be:"Убрать выделение",bf:"Выделить",bg:"Text highlight toolbar",bh:"Не удалось получить URL с измененным размером изображения.",bi:"Выбор изображения с измененным размером не удался",bj:"Нельзя вставить изображение на текущую позицию.",bk:"Вставка изображения не удалась",bl:"Widget toolbar",bm:"Редактор",bn:"Editor toolbar",bo:"Show more items",bp:"Dropdown toolbar",bq:"Редактор, %0",br:"Open in a new tab",bs:"Downloadable",bt:"Редактировать альтернативный текст",bu:"Убрать ссылку",bv:"Редактировать ссылку",bw:"Открыть ссылку в новой вкладке",bx:"Для этой ссылки не установлен адрес URL",by:"Сохранить",bz:"Отмена",ca:"Ссылка URL",cb:"%0 of %1",cc:"Previous",cd:"Next",ce:"Альтернативный текст",cf:"Вставьте URL медиа в поле ввода.",cg:"Подсказка: Вставьте URL в контент для быстрого включения.",ch:"URL медиа",ci:"Отменить",cj:"Повторить",ck:"Выбрать заголовок",cl:"Заголовок",cm:"Размер шрифта",cn:"По умолчанию",co:"Очень мелкий",cp:"Мелкий",cq:"Крупный",cr:"Очень крупный",cs:"Цитата",ct:"Семейство шрифтов",cu:"Подчеркнутый",cv:"Курсив",cw:"Параграф",cx:"Заголовок 1",cy:"Заголовок 2",cz:"Заголовок 3",da:"Заголовок 4",db:"Заголовок 5",dc:"Заголовок 6",dd:"Чёрный",de:"Тёмно-серый",df:"Серый",dg:"Светло-серый",dh:"Белый",di:"Красный",dj:"Оранжевый",dk:"Жёлтый",dl:"Салатовый",dm:"Зелёный",dn:"Аквамариновый",do:"Бирюзовый",dp:"Голубой",dq:"Синий",dr:"Фиолетовый"})})(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));


--------------------------------------------------------------------------------
/examples/example1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Custom CKEditor example</title>
 6 | 
 7 |   <!-- Vue -->
 8 |   <script src="//cdn.jsdelivr.net/npm/vue"></script>
 9 | 
10 |   <!-- CustomEditors BalloonEditor -->
11 |   <!-- CustomEditors ClassicEditor -->
12 |   <!-- CustomEditors DecoupledEditor -->
13 |   <!-- CustomEditors InlineEditor -->
14 |   <!-- CustomEditors ClassicMarkdownEditor -->
15 |   <script src="../custom-editors/ckeditor.js"></script>
16 | 
17 |   <!-- Translation of CKEditor -->
18 |   <script src="../custom-editors/translations/ru.js"></script>
19 | 
20 |   <!-- VueCkeditor -->
21 |   <script src="../../dist/vue-ckeditor5.js"></script>
22 | </head>
23 | 
24 | <body>
25 |   <div id="app"></div>
26 | 
27 |   <script>
28 |     Vue.use(VueCkeditor.plugin, {
29 |       editors: {
30 |         'classic': CustomEditors.ClassicEditor,
31 |         'inline': CustomEditors.InlineEditor,
32 |         'markdown': CustomEditors.ClassicMarkdownEditor
33 |       }
34 |     })
35 | 
36 |     new Vue({
37 |       el: '#app',
38 |       data: {
39 |         htmlContent: '<p><strong>html</strong><i>Content</i></p>',
40 |         markdownContent: '**markdown**_Content_',
41 |         markdownConfig: {
42 |           language: 'ru'
43 |         }
44 |       },
45 |       template: `
46 |         <div>
47 |           <h1>ClassicEditor</h1>
48 |           <vue-ckeditor type="classic" v-model="htmlContent"></vue-ckeditor><br /><br />
49 |           <h1>InlineEditor</h1>
50 |           <vue-ckeditor type="inline" v-model="htmlContent"></vue-ckeditor><br /><br />
51 |           <h1>html content</h1>
52 |           <div>{{ htmlContent }}</div><br /><br />
53 | 
54 |           <h1>ClassicEditor with markdown</h1>
55 |           <vue-ckeditor type="markdown" v-model="markdownContent" :config="markdownConfig"></vue-ckeditor><br /><br />
56 |           <h1>markdown content</h1>
57 |           <div>{{ markdownContent }}</div>
58 |         </div>
59 |       `
60 |     })
61 |   </script>
62 | </body>
63 | 
64 | </html>
65 | 


--------------------------------------------------------------------------------
/examples/example2/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>List Rendering</title>
  6 | 
  7 |   <!-- Vue -->
  8 |   <script src="//cdn.jsdelivr.net/npm/vue"></script>
  9 | 
 10 |   <!-- ClassicEditor -->
 11 |   <script src="//cdn.ckeditor.com/ckeditor5/16.0.0/classic/ckeditor.js"></script>
 12 | 
 13 |   <!-- VueCkeditor -->
 14 |   <script src="../../dist/vue-ckeditor5.js"></script>
 15 | </head>
 16 | 
 17 | <body>
 18 |   <div id="app"></div>
 19 | 
 20 |   <script>
 21 |     Vue.use(VueCkeditor.plugin, {
 22 |       editors: {
 23 |         'classic': ClassicEditor
 24 |       }
 25 |     })
 26 | 
 27 |     new Vue({
 28 |       el: '#app',
 29 |       data: {
 30 |         items: [
 31 |           {
 32 |             content: '<p>content0</p>',
 33 |             show: false,
 34 |             title: 'title0'
 35 |           },
 36 |           {
 37 |             content: '<p>content1</p>',
 38 |             show: true,
 39 |             title: 'title1'
 40 |           },
 41 |           {
 42 |             content: '<p>content2</p>',
 43 |             show: false,
 44 |             title: 'title2'
 45 |           },
 46 |           {
 47 |             content: '<p>content3</p>',
 48 |             show: true,
 49 |             title: 'title3'
 50 |           },
 51 |         ]
 52 |       },
 53 |       computed: {
 54 |         filteredItems () {
 55 |           return this.items.filter(item => item.show);
 56 |         }
 57 |       },
 58 |       methods: {
 59 |         print (eventName, ...args) {
 60 |           console.log(eventName)
 61 |           for (let index = 0, length = args.length; index < length; ++index) {
 62 |             console.log(args[index])
 63 |           }
 64 |           console.log('\n')
 65 |         },
 66 |         toggleShowItem (index) {
 67 |           const items = this.items;
 68 | 
 69 |           if (index < items.length) {
 70 |             const item = items[index];
 71 | 
 72 |             item.show = !item.show
 73 |           }
 74 |         }
 75 |       },
 76 |       template: `
 77 |         <div>
 78 |           <ul v-if="items.length">
 79 |             <li v-for="(item, index) in items" :key="'button' + index">
 80 |               <h4>{{ item.title }}</h4>
 81 |               <button type="button" @click="toggleShowItem(index)">Change status 'show'</button>
 82 |             </li>
 83 |           </ul>
 84 |           <hr />
 85 |           <ul v-if="filteredItems.length">
 86 |             <li v-for="(item, index) in filteredItems" :key="'ckeditor' + index">
 87 |               <h4>{{ item.title }}</h4>
 88 |               <vue-ckeditor
 89 |                 type="classic"
 90 |                 v-model="item.content"
 91 |                 @ready="(...args) => { print('ready', ...args) }"
 92 |                 @destroy="(...args) => { print('destroy', ...args) }"
 93 |               ></vue-ckeditor>
 94 |             </li>
 95 |           </ul>
 96 |         </div>
 97 |       `
 98 |     })
 99 |   </script>
100 | </body>
101 | 
102 | </html>
103 | 


--------------------------------------------------------------------------------
/examples/example4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>DecoupledEditor example</title>
 6 | 
 7 |   <!-- Vue -->
 8 |   <script src="//cdn.jsdelivr.net/npm/vue"></script>
 9 | 
10 |   <!-- DecoupledEditor -->
11 |   <script src="//cdn.ckeditor.com/ckeditor5/16.0.0/decoupled-document/ckeditor.js"></script>
12 | 
13 |   <!-- VueCkeditor -->
14 |   <script src="../../dist/vue-ckeditor5.js"></script>
15 | 
16 |   <!-- Styles from https://ckeditor.com/docs/ckeditor5/latest/framework/guides/ui/document-editor.html#the-user-interface -->
17 |   <link rel="stylesheet" href="style.css">
18 | </head>
19 | 
20 | <body>
21 |   <div id="app"></div>
22 | 
23 |   <script>
24 |     Vue.use(VueCkeditor.plugin, {
25 |       editors: {
26 |         'document': DecoupledEditor
27 |       }
28 |     })
29 | 
30 |     new Vue({
31 |       el: '#app',
32 |       data: {
33 |         htmlContent: '<p><strong>html</strong><i>Content</i></p>',
34 |       },
35 |       template: `
36 |         <div>
37 |           <div class="document-editor">
38 |             <div id="toolbar" class="document-editor__toolbar"></div>
39 | 
40 |             <div class="document-editor__editable-container">
41 |               <div class="document-editor__editable">
42 |                 <vue-ckeditor toolbar-container="#toolbar" type="document" v-model="htmlContent"></vue-ckeditor>
43 |               </div>
44 |             </div>
45 |           </div>
46 |         </div>
47 |       `
48 |     })
49 |   </script>
50 | </body>
51 | 
52 | </html>
53 | 


--------------------------------------------------------------------------------
/examples/example4/style.css:
--------------------------------------------------------------------------------
  1 | .document-editor {
  2 |   border: 1px solid var(--ck-color-base-border);
  3 |   border-radius: var(--ck-border-radius);
  4 | 
  5 |   /* Set vertical boundaries for the document editor. */
  6 |   max-height: 700px;
  7 | 
  8 |   /* This element is a flex container for easier rendering. */
  9 |   display: flex;
 10 |   flex-flow: column nowrap;
 11 | }
 12 | 
 13 | .document-editor__toolbar {
 14 |   /* Make sure the toolbar container is always above the editable. */
 15 |   z-index: 1;
 16 | 
 17 |   /* Create the illusion of the toolbar floating over the editable. */
 18 |   box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );
 19 | 
 20 |   /* Use the CKEditor CSS variables to keep the UI consistent. */
 21 |   border-bottom: 1px solid var(--ck-color-toolbar-border);
 22 | }
 23 | 
 24 | /* Adjust the look of the toolbar inside the container. */
 25 | .document-editor__toolbar .ck-toolbar {
 26 |   border: 0;
 27 |   border-radius: 0;
 28 | }
 29 | 
 30 | /* Make the editable container look like the inside of a native word processor application. */
 31 | .document-editor__editable-container {
 32 |   padding: calc( 2 * var(--ck-spacing-large) );
 33 |   background: var(--ck-color-base-foreground);
 34 | 
 35 |   /* Make it possible to scroll the "page" of the edited content. */
 36 |   overflow-y: scroll;
 37 | }
 38 | 
 39 | .document-editor__editable-container .ck-editor__editable {
 40 |   /* Set the dimensions of the "page". */
 41 |   width: 15.8cm;
 42 |   min-height: 21cm;
 43 | 
 44 |   /* Keep the "page" off the boundaries of the container. */
 45 |   padding: 1cm 2cm 2cm;
 46 | 
 47 |   border: 1px hsl( 0,0%,82.7% ) solid;
 48 |   border-radius: var(--ck-border-radius);
 49 |   background: white;
 50 | 
 51 |   /* The "page" should cast a slight shadow (3D illusion). */
 52 |   box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );
 53 | 
 54 |   /* Center the "page". */
 55 |   margin: 0 auto;
 56 | }
 57 | 
 58 | /* Set the default font for the "page" of the content. */
 59 | .document-editor .ck-content,
 60 | .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
 61 |   font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
 62 | }
 63 | 
 64 | /* Adjust the headings dropdown to host some larger heading styles. */
 65 | .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
 66 |   line-height: calc( 1.7 * var(--ck-line-height-base) * var(--ck-font-size-base) );
 67 |   min-width: 6em;
 68 | }
 69 | 
 70 | /* Scale down all heading previews because they are way too big to be presented in the UI.
 71 | Preserve the relative scale, though. */
 72 | .document-editor .ck-heading-dropdown .ck-list .ck-button:not(.ck-heading_paragraph) .ck-button__label {
 73 |   transform: scale(0.8);
 74 |   transform-origin: left;
 75 | }
 76 | 
 77 | /* Set the styles for "Heading 1". */
 78 | .document-editor .ck-content h2,
 79 | .document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
 80 |   font-size: 2.18em;
 81 |   font-weight: normal;
 82 | }
 83 | 
 84 | .document-editor .ck-content h2 {
 85 |   line-height: 1.37em;
 86 |   padding-top: .342em;
 87 |   margin-bottom: .142em;
 88 | }
 89 | 
 90 | /* Set the styles for "Heading 2". */
 91 | .document-editor .ck-content h3,
 92 | .document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
 93 |   font-size: 1.75em;
 94 |   font-weight: normal;
 95 |   color: hsl( 203, 100%, 50% );
 96 | }
 97 | 
 98 | .document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
 99 |   color: var(--ck-color-list-button-on-text);
100 | }
101 | 
102 | /* Set the styles for "Heading 2". */
103 | .document-editor .ck-content h3 {
104 |   line-height: 1.86em;
105 |   padding-top: .171em;
106 |   margin-bottom: .357em;
107 | }
108 | 
109 | /* Set the styles for "Heading 3". */
110 | .document-editor .ck-content h4,
111 | .document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
112 |   font-size: 1.31em;
113 |   font-weight: bold;
114 | }
115 | 
116 | .document-editor .ck-content h4 {
117 |   line-height: 1.24em;
118 |   padding-top: .286em;
119 |   margin-bottom: .952em;
120 | }
121 | 
122 | /* Set the styles for "Paragraph". */
123 | .document-editor .ck-content p {
124 |   font-size: 1em;
125 |   line-height: 1.63em;
126 |   padding-top: .5em;
127 |   margin-bottom: 1.13em;
128 | }
129 | 
130 | /* Make the block quoted text serif with some additional spacing. */
131 | .document-editor .ck-content blockquote {
132 |   font-family: Georgia, serif;
133 |   margin-left: calc( 2 * var(--ck-spacing-large) );
134 |   margin-right: calc( 2 * var(--ck-spacing-large) );
135 | }
136 | 


--------------------------------------------------------------------------------
/examples/example5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Check events</title>
 6 | 
 7 |   <!-- Vue -->
 8 |   <script src="//cdn.jsdelivr.net/npm/vue"></script>
 9 | 
10 |   <!-- ClassicEditor -->
11 |   <script src="//cdn.ckeditor.com/ckeditor5/16.0.0/classic/ckeditor.js"></script>
12 | 
13 |   <!-- VueCkeditor -->
14 |   <script src="../../dist/vue-ckeditor5.js"></script>
15 | 
16 |   <style>
17 |     .log {
18 |       border: 1px solid black;
19 |       min-height: 1rem;
20 |     }
21 |   </style>
22 | </head>
23 | 
24 | <body>
25 |   <div id="app"></div>
26 | 
27 |   <script>
28 |     Vue.use(VueCkeditor.plugin, {
29 |       editors: {
30 |         'classic': ClassicEditor,
31 |       }
32 |     })
33 | 
34 |     new Vue({
35 |       el: '#app',
36 |       data: {
37 |         htmlContent: '<p><strong>html</strong><i>Content</i></p>',
38 |         eventsLog: ''
39 |       },
40 |       methods: {
41 |         addEventLog (eventName, ...args) {
42 |           const eventValue = `Event: '${eventName}'.`
43 | 
44 |           this.eventsLog += `<p>${eventValue} Check debugger console.</p>`
45 | 
46 |           console.log(eventValue)
47 |           for (let index = 0, length = args.length; index < length; ++index) {
48 |             console.log(args[index])
49 |           }
50 |           console.log('\n')
51 |         }
52 |       },
53 |       template: `
54 |         <div>
55 |           <vue-ckeditor
56 |             type="classic"
57 |             v-model="htmlContent"
58 |             @blur="(...args) => { addEventLog('blur', ...args) }"
59 |             @change="(...args) => { addEventLog('change', ...args) }"
60 |             @click="(...args) => { addEventLog('click', ...args) }"
61 |             @clipboard-input="(...args) => { addEventLog('clipboardInput', ...args) }"
62 |             @clipboard-output="(...args) => { addEventLog('clipboardOutput', ...args) }"
63 |             @compositionend="(...args) => { addEventLog('compositionend', ...args) }"
64 |             @compositionstart="(...args) => { addEventLog('compositionstart', ...args) }"
65 |             @copy="(...args) => { addEventLog('copy', ...args) }"
66 |             @cut="(...args) => { addEventLog('cut', ...args) }"
67 |             @delete="(...args) => { addEventLog('delete', ...args) }"
68 |             @destroy="(...args) => { addEventLog('destroy', ...args) }"
69 |             @dragover="(...args) => { addEventLog('dragover', ...args) }"
70 |             @drop="(...args) => { addEventLog('drop', ...args, ) }"
71 |             @enter="(...args) => { addEventLog('enter', ...args) }"
72 |             @focus="(...args) => { addEventLog('focus', ...args) }"
73 |             @keydown="(...args) => { addEventLog('keydown', ...args) }"
74 |             @keyup="(...args) => { addEventLog('keyup', ...args) }"
75 |             @layout-changed="(...args) => { addEventLog('layoutChanged', ...args) }"
76 |             @mousedown="(...args) => { addEventLog('mousedown', ...args) }"
77 |             @mutations="(...args) => { addEventLog('mutations', ...args) }"
78 |             @paste="(...args) => { addEventLog('paste', ...args) }"
79 |             @ready="(...args) => { addEventLog('ready', ...args) }"
80 |             @selection-change="(...args) => { addEventLog('selectionChange', ...args) }"
81 |           ></vue-ckeditor><br /><br />
82 | 
83 |           <button @click="eventsLog=''">Clear event's log.</button><br/><br/>
84 |           <div class="log" v-html="eventsLog"></div>
85 |         </div>
86 |       `
87 |     })
88 |   </script>
89 | </body>
90 | 
91 | </html>
92 | 


--------------------------------------------------------------------------------
/examples/example6/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>Empty value</title>
  6 | 
  7 |   <!-- Vue -->
  8 |   <script src="//cdn.jsdelivr.net/npm/vue"></script>
  9 | 
 10 |   <!-- ClassicEditor -->
 11 |   <script src="//cdn.ckeditor.com/ckeditor5/16.0.0/classic/ckeditor.js"></script>
 12 | 
 13 |   <!-- VueCkeditor -->
 14 |   <script src="../../dist/vue-ckeditor5.js"></script>
 15 | 
 16 |   <style>
 17 |     code {
 18 |       padding: 2px 4px;
 19 |       font-size: 90%;
 20 |       color: #c7254e;
 21 |       background-color: #f9f2f4;
 22 |       border-radius: 4px;
 23 |     }
 24 |     .preview {
 25 |       border: 1px solid black;
 26 |       min-height: 1rem;
 27 |     }
 28 |     .list dt {
 29 |       float: left;
 30 |       width: 10%;
 31 |     }
 32 |   </style>
 33 | </head>
 34 | 
 35 | <body>
 36 |   <div id="app"></div>
 37 | 
 38 |   <script>
 39 |     Vue.use(VueCkeditor.plugin, {
 40 |       editors: {
 41 |         'classic': ClassicEditor,
 42 |       }
 43 |     })
 44 | 
 45 |     new Vue({
 46 |       el: '#app',
 47 |       data: {
 48 |         content1: '<p>content1</p>',
 49 |         content2: '<p>content2</p>',
 50 |         content3: '<p>content3</p>',
 51 |         content4: '<p>content4</p>',
 52 |         content5: '<p>content5</p>',
 53 |         content6: '<p>content6</p>'
 54 |       },
 55 |       methods: {
 56 |         clean () {
 57 |           this.content1 = ''
 58 |           this.content2 = ''
 59 |           this.content3 = ''
 60 |           this.content4 = ''
 61 |           this.content5 = ''
 62 |           this.content6 = ''
 63 |         }
 64 |       },
 65 |       template: `
 66 |         <div>
 67 |           <button @click="clean">Clean all</button><br /><br />
 68 | 
 69 |           <div class="preview">
 70 |             <template v-for="(item, index) in [content1, content2, content3, content4, content5, content6]">
 71 |               <dl class="list">
 72 |                 <dt>name:</dt>
 73 |                 <dd>content{{ index + 1 }}</dd>
 74 | 
 75 |                 <dt>type:</dt>
 76 |                 <dd>{{ typeof item }}</dd>
 77 | 
 78 |                 <dt>value:</dt>
 79 |                 <dd>{{ item }}</dd>
 80 |               </dl><br />
 81 |             </template>
 82 |           </div>
 83 | 
 84 |           <h3>Content1. Default value is not provided.</h3>
 85 |           <vue-ckeditor type="classic" v-model="content1"></vue-ckeditor><br />
 86 | 
 87 |           <h3>Content2. Default empty value is <code>''</code>.</h3>
 88 |           <vue-ckeditor type="classic" v-model="content2" empty-value=""></vue-ckeditor><br />
 89 | 
 90 |           <h3>Content3. Default empty value is <code>'empty'</code>.</h3>
 91 |           <vue-ckeditor type="classic" v-model="content3" empty-value="empty"></vue-ckeditor><br />
 92 | 
 93 |           <h3>Content4. Default empty value is <code>null</code>.</h3>
 94 |           <vue-ckeditor type="classic" v-model="content4" :empty-value="null"></vue-ckeditor><br />
 95 | 
 96 |           <h3>Content5. Default empty value is <code>false</code>.</h3>
 97 |           <vue-ckeditor type="classic" v-model="content5" :empty-value="false"></vue-ckeditor>
 98 | 
 99 |           <h3>Content6. Default empty value is <code>undefined</code>.</h3>
100 |           <vue-ckeditor type="classic" v-model="content6" :empty-value="undefined"></vue-ckeditor>
101 |         </div>
102 |       `
103 |     })
104 |   </script>
105 | </body>
106 | 
107 | </html>
108 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-ckeditor5",
 3 |   "version": "0.5.0",
 4 |   "description": "CKEditor 5 component for Vue 2.",
 5 |   "author": "Igor Iakovlev <igorxut@gmail.com>",
 6 |   "license": "MIT",
 7 |   "private": false,
 8 |   "main": "dist/vue-ckeditor5.js",
 9 |   "files": [
10 |     "dist",
11 |     "src"
12 |   ],
13 |   "keywords": [
14 |     "ckeditor",
15 |     "component",
16 |     "plugin",
17 |     "vue",
18 |     "vuejs"
19 |   ],
20 |   "bugs": {
21 |     "url": "https://github.com/igorxut/vue-ckeditor5/issues"
22 |   },
23 |   "homepage": "https://github.com/igorxut/vue-ckeditor5#readme",
24 |   "repository": {
25 |     "type": "git",
26 |     "url": "https://github.com/igorxut/vue-ckeditor5.git"
27 |   },
28 |   "scripts": {
29 |     "lint": "eslint src",
30 |     "build": "webpack"
31 |   },
32 |   "peerDependencies": {
33 |     "vue": "^2.6.11"
34 |   },
35 |   "devDependencies": {
36 |     "@babel/core": "^7.8.3",
37 |     "@babel/preset-env": "^7.8.3",
38 |     "babel-loader": "^8.0.6",
39 |     "eslint": "^6.8.0",
40 |     "eslint-config-standard": "^14.1.0",
41 |     "eslint-plugin-import": "^2.20.0",
42 |     "eslint-plugin-node": "^11.0.0",
43 |     "eslint-plugin-promise": "^4.2.1",
44 |     "eslint-plugin-standard": "^4.0.1",
45 |     "webpack": "^4.41.5",
46 |     "webpack-cli": "^3.3.10"
47 |   },
48 |   "engines": {
49 |     "node": ">= 12.14.1",
50 |     "npm": ">= 6.13.6"
51 |   },
52 |   "browserslist": [
53 |     "> 1%",
54 |     "last 2 versions",
55 |     "not ie <= 8"
56 |   ]
57 | }
58 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import VueCkeditorComponent from './vue-ckeditor'
 2 | 
 3 | const VueCkeditor = {
 4 |   version: VERSION,
 5 |   component: VueCkeditorComponent,
 6 |   plugin: {
 7 |     install (Vue, { name, editors }) {
 8 |       Vue.prototype.$VueCkeditorEditors = editors || {}
 9 | 
10 |       Vue.component(name || VueCkeditorComponent.name, VueCkeditorComponent)
11 |     }
12 |   }
13 | }
14 | 
15 | export default VueCkeditor
16 | 


--------------------------------------------------------------------------------
/src/vue-ckeditor.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   name: 'vue-ckeditor',
  3 | 
  4 |   render (createElement) {
  5 |     return createElement(this.tag, {
  6 |       attrs: this.$attrs
  7 |     })
  8 |   },
  9 | 
 10 |   props: {
 11 |     config: {
 12 |       default: () => {
 13 |         return {
 14 |           language: 'en'
 15 |         }
 16 |       },
 17 |       required: false,
 18 |       type: Object
 19 |     },
 20 | 
 21 |     editors: {
 22 |       default: () => {
 23 |         return {}
 24 |       },
 25 |       required: false,
 26 |       type: Object
 27 |     },
 28 | 
 29 |     readonly: {
 30 |       default: () => false,
 31 |       required: false,
 32 |       type: Boolean
 33 |     },
 34 | 
 35 |     emptyValue: {
 36 |       required: false,
 37 |       type: String
 38 |     },
 39 | 
 40 |     tag: {
 41 |       default: () => 'div',
 42 |       required: false,
 43 |       type: String
 44 |     },
 45 | 
 46 |     toolbarContainer: {
 47 |       default: () => null,
 48 |       required: false,
 49 |       type: String
 50 |     },
 51 | 
 52 |     type: {
 53 |       required: true,
 54 |       type: String
 55 |     },
 56 | 
 57 |     value: {
 58 |       default: () => '',
 59 |       required: false,
 60 |       type: String
 61 |     }
 62 |   },
 63 | 
 64 |   data () {
 65 |     return {
 66 |       instance: null
 67 |     }
 68 |   },
 69 | 
 70 |   watch: {
 71 |     value (newValue) {
 72 |       const instance = this.instance
 73 | 
 74 |       if (
 75 |         instance != null &&
 76 |         newValue !== instance.getData() &&
 77 |         !(
 78 |           this.emptyValueProvided &&
 79 |           newValue === this.emptyValue
 80 |         )
 81 |       ) {
 82 |         instance.setData(newValue)
 83 |       }
 84 |     }
 85 |   },
 86 | 
 87 |   computed: {
 88 |     emptyValueProvided () {
 89 |       return Object.prototype.hasOwnProperty.call(this.$options.propsData, 'emptyValue')
 90 |     },
 91 |     isEmpty () {
 92 |       const document = this.instance.model.document
 93 |       return !document.model.hasContent(document.getRoot())
 94 |     }
 95 |   },
 96 | 
 97 |   methods: {
 98 |     create () {
 99 |       if (this.instance == null) {
100 |         const type = this.type
101 |         const editors = this.$VueCkeditorEditors || this.editors
102 | 
103 |         if (!Object.keys(editors).length) {
104 |           throw new Error('There are no CKEditor 5 implementations.')
105 |         }
106 | 
107 |         const editor = editors[type]
108 | 
109 |         if (editor == null) {
110 |           throw new Error(`Wrong key '${type}'. Allowed keys: ${Object.keys(editors)}`)
111 |         }
112 | 
113 |         editor
114 |           .create(this.$el, this.config)
115 |           .then(editor => {
116 |             this.instance = editor
117 |             const instance = this.instance
118 | 
119 |             this.createToolbarContainer()
120 | 
121 |             this.setEventListeners()
122 | 
123 |             instance.isReadOnly = this.readonly
124 |             instance.setData(this.value)
125 | 
126 |             this.$emit('ready', instance)
127 |           })
128 |           .catch(error => {
129 |             console.log(error)
130 |           })
131 |       }
132 |     },
133 |     createToolbarContainer () {
134 |       const instance = this.instance
135 |       const toolbarContainer = this.toolbarContainer
136 | 
137 |       if (
138 |         toolbarContainer != null &&
139 |         instance != null
140 |       ) {
141 |         const toolbarContainerElement = document.querySelector(toolbarContainer)
142 | 
143 |         if (toolbarContainerElement != null) {
144 |           toolbarContainerElement.appendChild(instance.ui.view.toolbar.element)
145 |         }
146 |       }
147 |     },
148 |     destroy () {
149 |       const instance = this.instance
150 | 
151 |       if (instance != null) {
152 |         instance.destroy()
153 |         this.$emit('destroy', instance)
154 |       }
155 |     },
156 |     setEventListeners () {
157 |       const instance = this.instance
158 | 
159 |       if (instance != null) {
160 |         instance.model.document.on('change:data', (...args) => {
161 |           let newValue = instance.getData()
162 | 
163 |           if (this.value !== newValue) {
164 |             if (
165 |               this.emptyValueProvided &&
166 |               this.isEmpty
167 |             ) {
168 |               newValue = this.emptyValue
169 |             }
170 | 
171 |             this.$emit('input', newValue, instance, ...args)
172 |           }
173 |         })
174 | 
175 |         const editingViewDocument = instance.editing.view.document
176 |         const events = editingViewDocument._events
177 |         for (const key of Object.keys(events)) {
178 |           editingViewDocument.on(key, (...args) => {
179 |             this.$emit(key, instance, ...args)
180 |           })
181 |         }
182 |       }
183 |     }
184 |   },
185 | 
186 |   mounted () {
187 |     this.create()
188 |   },
189 | 
190 |   beforeDestroy () {
191 |     this.destroy()
192 |   }
193 | }
194 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const DefinePlugin = require('webpack').DefinePlugin
 3 | 
 4 | module.exports = {
 5 |   mode: 'production',
 6 |   devtool: 'source-map',
 7 |   entry: './src/index.js',
 8 |   resolve: {
 9 |     extensions: [
10 |       '.js'
11 |     ],
12 |     alias: {
13 |       'vue-ckeditor5': path.join(__dirname, 'dist', 'vue-ckeditor5')
14 |     }
15 |   },
16 |   output: {
17 |     path: path.join(__dirname, 'dist'),
18 |     filename: 'vue-ckeditor5.js',
19 |     library: 'VueCkeditor',
20 |     libraryExport: 'default',
21 |     libraryTarget: 'umd'
22 |   },
23 |   module: {
24 |     rules: [
25 |       {
26 |         test: /\.js$/,
27 |         include: [
28 |           path.join(__dirname, 'src')
29 |         ],
30 |         use: [
31 |           {
32 |             loader: 'babel-loader'
33 |           }
34 |         ]
35 |       }
36 |     ]
37 |   },
38 |   plugins: [
39 |     new DefinePlugin({
40 |       VERSION: JSON.stringify(require('./package.json').version)
41 |     })
42 |   ]
43 | }
44 | 


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