Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zhuowenli/vue-ckeditor
✏️ Vue2.0 Ckeditor component.
https://github.com/zhuowenli/vue-ckeditor
ckeditor vue2
Last synced: 23 days ago
JSON representation
✏️ Vue2.0 Ckeditor component.
- Host: GitHub
- URL: https://github.com/zhuowenli/vue-ckeditor
- Owner: zhuowenli
- License: mit
- Created: 2017-03-17T04:01:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-07-30T13:16:20.000Z (over 4 years ago)
- Last Synced: 2024-10-25T22:04:45.319Z (26 days ago)
- Topics: ckeditor, vue2
- Language: Vue
- Homepage: https://zhuowenli.github.io/vue-ckeditor
- Size: 227 KB
- Stars: 17
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VueCkeditor
Vue2.0 Ckeditor component.
## Install
```bash
yarn add vueckeditor
```
## Usage
`VueCkeditor` is using `ckeditor` external.
To start using CKEditor on your website, add a single `` tag to your HTML page:
```html
<script src="//cdn.ckeditor.com/4.6.2/full/ckeditor.js">
```
Or visit the official [CKEditor Download](http://ckeditor.com/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.
```html
```
## Import VueCkeditor to your page
Single ckeditor
```vue
#app
vue-ckeditor(v-model="content")
import VueCkeditor from 'vueckeditor';
export default {
components: {
VueCkeditor
},
data() {
return {
content: 'Hello World!',
};
}
}
```
Multi ckeditor
```vue
#app
vue-ckeditor(v-model="contentA" id="editor-a")
vue-ckeditor(v-model="contentB" id="editor-b")
import VueCkeditor from '../src/vueckeditor.vue';
export default {
components: {
VueCkeditor
},
data() {
return {
contentA: 'Hello World!',
contentB: 'Hello World!',
};
}
}
```
## Props
### id
- Type: `String`
- Required: false
- Default: `null`
### height
- Type: `String`
- Required: false
- Default: `300px`
### toolbar
You can find toolbar list of [Toolbar Configurator](http://nightly.ckeditor.com/17-03-19-07-08/full/samples/toolbarconfigurator/index.html#advanced).
- Type: `Array`
- Required: false
- Default:
```js
[
'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: `''`
## TIP!!
Update components value with id:
[https://jsfiddle.net/zhuowenli/okx75cem/](https://jsfiddle.net/zhuowenli/okx75cem/)
## 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](https://github.com/egoist/vbuild-karma)
Check out your npm scripts, it's using [vbuild](https://github.com/egoist/vbuild) under the hood.
---
Generated by [create-vue-app](https://github.com/egoist/create-vue-app)