Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@ckeditor/ckeditor5-vue2

ckeditor65.1kGPL-2.0-or-later3.0.1

Official Vue.js 2.x component for CKEditor 5 – the best browser-based rich text editor.

wysiwyg, rich text, editor, html, contentEditable, editing, vue, vue.js, vue component, vue.js component, ckeditor, ckeditor5, ckeditor 5

readme

CKEditor 5 rich text editor component for Vue.js 2.x

npm version Build Status Coverage Status Dependency Status

⚠️ This repository contains the CKEditor 5 component for Vue.js 2.x. The component for Vue.js 3+ is located in another repository - @ckeditor/ckeditor5-vue.

Official CKEditor 5 rich text editor component for Vue.js.

Developer Documentation 📖

See the "Rich text editor component for Vue.js" guide in the CKEditor 5 documentation to learn more:

Contributing

After cloning this repository, install necessary dependencies:

npm install

Executing tests

npm run test -- [additional options]
# or
npm t -- [additional options]

The command accepts the following options:

  • --coverage (-c) – Whether to generate the code coverage.
  • --source-map (-s) – Whether to attach the source maps.
  • --watch (-w) – Whether to watch test files.
  • --reporter (-r) – Reporter for Karma (default: mocha, can be changed to dots).
  • --browsers (-b) – Browsers that will be used to run tests (default: Chrome, available: Firefox).

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.

Building the package

Build a minified version of the package that is ready to publish:

npm run build

Changelog generator

npm run changelog

Testing component with Vue CLI

When symlinking the component in an application generated using Vue CLI, make sure your vue.config.js file configures webpack in the following way:

module.exports = {
    configureWebpack: {
        resolve: {
            symlinks: false
        }
    }
};

Otherwise, the application will fail to load the component correctly and, as a result, it will throw a build error.

Releasing package

Changelog

Before starting the release process, you need to generate the changelog:

npm run changelog

Publishing

After generating the changelog, you are able to release the package.

First, you need to bump the version:

npm run release:bump-version

You can also use the --dry-run option in order to see what this task does.

After bumping the version, you can publish the changes:

npm run release:publish

Note: Only the dist/ directory will be published.

License

Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md file.

changelog

Changelog

3.0.1 (2022-05-18)

Bug fixes

  • Synchronize the editor content after the editor is ready. Closes #21. (commit)

3.0.0 (2022-04-12)

BREAKING CHANGES

  • Due to introducing the lock mechanism for the Editor#isReadOnly property, the <CKEditor> component uses the new way of enabling the read-only mode in the editor. The component requires an instance of CKEditor 5 in version 34 or higher. See ckeditor/ckeditor5#10496.

Other changes

  • Aligned the <CKEditor> component API to use the new lock mechanism when enabling/disabling the read-only mode. (commit)
  • Bumped Karma test runner to v6.x. Closes #18. (commit)

2.0.0 (2022-03-17)

BREAKING CHANGES

  • Upgraded the minimal versions of Node.js to 14.0.0 due to the end of LTS.

Other changes

  • Updated the required version of Node.js to 14. Closes #10972. (commit)

1.0.5 (2020-11-23)

Bug fixes

  • When using the <CKEditor> component with an unsupported version of Vue.js, the component will display an error. Closes #6. (commit)

1.0.4 (2020-11-20)

Starting from this version, the CKEditor 5 WYSIWYG editor component is compatible with Vue.js 2.x only. For Vue.js 3.x, check the dedicated @ckeditor/ckeditor5-vue component.

1.0.3 (2020-09-22)

Bug fixes

  • The editor should not slow down with lots of content when using the integration. Closes #153. (commit)

MINOR BREAKING CHANGES ℹ️

  • The reference to the CKEditor 5 instance previously available under the instance property of the component (data) is now private ($_instance). We recommend you use the ready component event to access the editor API instead.

1.0.2 (2020-09-01)

Bug fixes

  • The #input event should be fired immediately despite being debounced to prevent race conditions. Closes #149. (commit)

1.0.1 (2019-12-05)

Bug fixes

  • Editor config defined in the component should not be mutable. Closes #101. (42651e3)

1.0.0 (2019-09-20)

Bug fixes

1.0.0-beta.2 (2019-04-24)

Bug fixes

  • Improved performance when editing large content. Debounced the component #input event. Closes #42. (dfaee36)
  • The data initialization should not break collaboration. Instead of using editor.setData(), the initial content is now set via innerHTML of the source element. Closes #47. (6f821fa)

1.0.0-beta.1 (2018-11-06)

First developer preview. It contains a ready-to-use <ckeditor> component that allows using CKEditor 5 Builds and CKEditor 5 Framework in Vue.js applications.