package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
{ "name": "ckeditor-vuejs-example", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@ckeditor/ckeditor5-build-classic": "31.1.0", "@ckeditor/ckeditor5-vue2": "1.0.5", "@vue/cli-plugin-babel": "4.1.1", "vue": "^2.6.11" }, "devDependencies": { "@vue/cli-plugin-eslint": "4.1.1", "@vue/cli-service": "4.1.1", "babel-eslint": "^10.0.3", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.0.1", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "keywords": [], "description": "" } |
main.ts
|
1 2 3 4 5 6 7 8 9 10 |
import Vue from "vue"; import App from "./App.vue"; import CKEditor from "@ckeditor/ckeditor5-vue2"; Vue.config.productionTip = false; Vue.use(CKEditor); new Vue({ render: (h) => h(App) }).$mount("#app"); |
App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<template> <div id="app"> <div @click="saveData()" v-if="editorData" class="np-save-btn">Save</div> <div @click="clearData()" v-if="editorData" class="np-save-btn">Clear</div> <div style="height: auto"> <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" ></ckeditor> </div> <div v-if="dataToSave"> <h4>Parsed data:</h4> {{ dataToSave }} </div> </div> </template> <script> import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; export default { name: "App", data() { return { editor: ClassicEditor, editorData: "", editorConfig: { // todo confg }, dataToSave: "", }; }, methods: { saveData() { this.dataToSave = this.editorData; }, clearData() { this.dataToSave = this.editorData = ""; }, }, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .np-credits { font-size: 12px; margin-bottom: 12px; } .np-save-btn { background: #eee; border-radius: 4px; padding: 2px; width: 100px; text-align: center; margin-bottom: 10px; cursor: pointer; } </style> |
