https://github.com/postedin/ember-ckeditor
CKEditor 5 component for Ember JS.
https://github.com/postedin/ember-ckeditor
ckeditor ckeditor5 ember
Last synced: 4 months ago
JSON representation
CKEditor 5 component for Ember JS.
- Host: GitHub
- URL: https://github.com/postedin/ember-ckeditor
- Owner: postedin
- License: mit
- Created: 2019-11-20T17:33:22.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-03-15T08:24:54.000Z (about 3 years ago)
- Last Synced: 2025-01-17T03:38:21.837Z (over 1 year ago)
- Topics: ckeditor, ckeditor5, ember
- Language: JavaScript
- Homepage:
- Size: 2.17 MB
- Stars: 8
- Watchers: 3
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# CKEditor 5 component for Ember.js
@postedin/ember-ckeditor
**Un**official [CKEditor 5](https://ckeditor.com/ckeditor-5/) rich text editor component for Ember.js.
## Why we made it
[Postedin](https://www.postedin.com) is a content creation platform. A good rich text editor is at the core of our product. Our platform uses [Ember.js](https://emberjs.com) so we naturally need a good integration with CKEditor 5 which we consider to be the best editor for the browser by a long shot.
## What is next
### For 1.0.0
- write a proper readme with proper documentation
- write a proper contributing guide
- some basic tests
### Wishlist
- hopefully get changes we want into CKEditor instead of running custom builds or extending things
- full extensive testing
- autocomplete plugin (similar to gmail suggestions when writing an email)
- sources plugin (add a source that we can list at the bottom of the document)
## Compatibility
- Ember.js v3.24 or above
- Ember CLI v3.24 or above
- Node.js v12 or above
## Installation
```
ember install @postedin/ember-ckeditor
```
## Usage
TODO: proper detailed usage
You need to have a build to use with this component. We use a combined build, so we can use multiple different custom versions (https://github.com/postedin/ckeditor5-build-combined). You can use any build like the official classic (https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic).
You will need to import the build and use it in the component.
For example, make an `Editor` component. We added a basic option and it will update the value.
```js
// components/editor.js
import Component from '@glimmer/component';
import { action } from '@ember/object';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default class EditorComponent extends Component {
classicEditor = ClassicEditor;
value = '';
options = {
link: {
addTargetToExternalLinks: true,
},
};
@action
handleInput(value) {
this.value = value;
if (this.args.onChanged) {
this.args.onChanged(value); // for consuming this component and getting the updated value
}
}
}
```
```html
```
TODO: explain getting languages working
## Contributing
TODO: more details
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).