| 1 | # CKEditor 5 rich text editor component for Vue.js 3+
|
| 2 |
|
| 3 | [](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue)
|
| 4 | [](https://travis-ci.org/ckeditor/ckeditor5-vue)
|
| 5 | [](https://coveralls.io/github/ckeditor/ckeditor5-vue?branch=master)
|
| 6 | <br>
|
| 7 | [](https://david-dm.org/ckeditor/ckeditor5-vue)
|
| 8 | [](https://david-dm.org/ckeditor/ckeditor5-vue?type=dev)
|
| 9 |
|
| 10 | ⚠️ This repository contains the CKEditor 5 component for Vue.js `3+`. The component for lower Vue.js versions is located in another repository - [@ckeditor/ckeditor5-vue2](https://github.com/ckeditor/ckeditor5-vue2).
|
| 11 |
|
| 12 | Official [CKEditor 5](https://ckeditor.com/ckeditor-5/) rich text editor component for Vue.js.
|
| 13 |
|
| 14 | ## [Developer Documentation](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html) 📖
|
| 15 |
|
| 16 | See the ["Rich text editor component for Vue.js"](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html) guide in the [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest) to learn more:
|
| 17 |
|
| 18 | * [Quick start](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html#quick-start)
|
| 19 | * [Using component locally](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html#using-component-locally)
|
| 20 | * [Using CKEditor from source](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html#using-ckeditor-from-source)
|
| 21 | * [Using the Document editor build](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html#using-the-document-editor-build)
|
| 22 | * [Component directives](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html#component-directives)
|
| 23 | * [Component events](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html#component-events)
|
| 24 |
|
| 25 | ## Contributing
|
| 26 |
|
| 27 | After cloning this repository, install necessary dependencies:
|
| 28 |
|
| 29 | ```bash
|
| 30 | npm install
|
| 31 | ```
|
| 32 |
|
| 33 | ### Executing tests
|
| 34 |
|
| 35 | ```bash
|
| 36 | npm run test -- [additional options]
|
| 37 | # or
|
| 38 | npm t -- [additional options]
|
| 39 | ```
|
| 40 |
|
| 41 | The command accepts the following options:
|
| 42 |
|
| 43 | * `--coverage` (`-c`) – Whether to generate the code coverage.
|
| 44 | * `--source-map` (`-s`) – Whether to attach the source maps.
|
| 45 | * `--watch` (`-w`) – Whether to watch test files.
|
| 46 | * `--reporter` (`-r`) – Reporter for Karma (default: `mocha`, can be changed to `dots`).
|
| 47 | * `--browsers` (`-b`) – Browsers that will be used to run tests (default: `Chrome`, available: `Firefox`).
|
| 48 |
|
| 49 | If you are going to change the component (`src/ckeditor.js`) or plugin (`src/plugin.js`) files, remember about rebuilding the package. You can use `npm run develop` in order to do it automatically.
|
| 50 |
|
| 51 | ### Building the package
|
| 52 |
|
| 53 | Build a minified version of the package that is ready to publish:
|
| 54 |
|
| 55 | ```bash
|
| 56 | npm run build
|
| 57 | ```
|
| 58 |
|
| 59 | ### Changelog generator
|
| 60 |
|
| 61 | ```bash
|
| 62 | npm run changelog
|
| 63 | ```
|
| 64 |
|
| 65 | ### Testing component with Vue CLI
|
| 66 |
|
| 67 | When symlinking the component in an application generated using [Vue CLI](https://cli.vuejs.org/), make sure your `vue.config.js` file configures webpack in the following way:
|
| 68 |
|
| 69 | ```js
|
| 70 | module.exports = {
|
| 71 | configureWebpack: {
|
| 72 | resolve: {
|
| 73 | symlinks: false
|
| 74 | }
|
| 75 | }
|
| 76 | };
|
| 77 | ```
|
| 78 |
|
| 79 | Otherwise, the application will fail to load the component correctly and, as a result, it will throw a build error.
|
| 80 |
|
| 81 | ## Releasing package
|
| 82 |
|
| 83 | ### Changelog
|
| 84 |
|
| 85 | Before starting the release process, you need to generate the changelog:
|
| 86 |
|
| 87 | ```bash
|
| 88 | npm run changelog
|
| 89 | ```
|
| 90 |
|
| 91 | ### Publishing
|
| 92 |
|
| 93 | After generating the changelog, you are able to release the package.
|
| 94 |
|
| 95 | First, you need to bump the version:
|
| 96 |
|
| 97 | ```bash
|
| 98 | npm run release:bump-version
|
| 99 | ```
|
| 100 |
|
| 101 | You can also use the `--dry-run` option in order to see what this task does.
|
| 102 |
|
| 103 | After bumping the version, you can publish the changes:
|
| 104 |
|
| 105 | ```bash
|
| 106 | npm run release:publish
|
| 107 | ```
|
| 108 |
|
| 109 | Note: Only the `dist/` directory will be published.
|
| 110 |
|
| 111 | ## License
|
| 112 |
|
| 113 | Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the LICENSE.md file.
|