VueCkeditor
Vue2.0 Ckeditor component.
Install
yarn add vueckeditor
Usage
VueCkeditor
is using ckeditor
external.
To start using CKEditor on your website, add a single <script>
tag to your HTML page:
<script src="//cdn.ckeditor.com/4.6.2/full/ckeditor.js"></script>
Or visit the official CKEditor Download site. And click the Download CKEditor button to get the .zip
installation file. If you want to try out more editor features, you can download the Full Package instead.
Unpack (extract) the downloaded .zip
archive to the ckeditor
directory in the root of your website.
<script src="/path/to/ckeditor.js"></script>
Import VueCkeditor to your page
Single ckeditor
<template lang="pug">
#app
vue-ckeditor(v-model="content")
</template>
<script>
import VueCkeditor from 'vueckeditor';
export default {
components: {
VueCkeditor
},
data() {
return {
content: 'Hello World!',
};
}
}
</script>
Multi ckeditor
<template lang="pug">
#app
vue-ckeditor(v-model="contentA" id="editor-a")
vue-ckeditor(v-model="contentB" id="editor-b")
</template>
<script>
import VueCkeditor from '../src/vueckeditor.vue';
export default {
components: {
VueCkeditor
},
data() {
return {
contentA: 'Hello World!',
contentB: 'Hello World!',
};
}
}
</script>
Props
id
- Type:
String
- Required: false
- Default:
null
height
- Type:
String
- Required: false
- Default:
300px
toolbar
You can find toolbar list of Toolbar Configurator.
- Type:
Array
- Required: false
- Default:
[
'Format',
['Bold', 'Italic', 'Strike', 'Underline'],
['BulletedList', 'NumberedList', 'Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink'],
['FontSize', 'TextColor'],
['Image'],
['Undo', 'Redo'],
['Source', 'Maximize']
]
language
- Type:
String
- Required: false
- Default:
'zh-cn'
extraplugins
- Type:
String
- Required: false
- Default:
''
Folder structure
-
src/
: Source files for this component-
vueckeditor.vue
The component itself
-
-
example/
: Example for demonstrating this component-
index.js
: Entry for the example -
App.vue
: The root component which we use to load this component
-
-
vbuild.example.js
: Config file for your example -
vbuild.component.js
: Config file for your component -
vbuild.unit.js
: Config file for vbuild to run unit tests -
package.json
: App manifest -
.editorconfig
: Ensure consistent editor behaivor -
.gitignore
: Ignore files we don't need to push
Development
-
yarn example
: Run example in development mode -
yarn deploy
: Deploy example to gh-pages -
yarn build:cjs
: Build component in commonjs format -
yarn build:umd
: Build component in umd format -
yarn build
: Build component in both format -
yarn lint
: Run eslint -
yarn test:unit
: Run unit tests using vbuild-karma
Check out your npm scripts, it's using vbuild under the hood.
Generated by create-vue-app