Oracle JET has a lot of excellent UI components, but according to Murphy's law, client always comes up with something which you don't have at your disposal.
So, driven by one of my client's requirements, I created a Rich Text Editor or WYSIWYG editor for Oracle JET. This is based on Quill JS and fully customizable.
Github project download: https://github.com/sohamda/JET-Web-Components/tree/master/rich-text-editor
I will explain in this blog, on how to integrate it in your own Oracle JET project.
1. Create and initialize your JET application and then put the downloaded web component inside "src\js\jet-composites" folder.
2. Once copied update your viewModel first.
Add a snippet for passing the default content to be displayed by the editor after load.
3. Update view to load this editor
Above you can see the "toolbar-options" property, that controls which options you should display to user on the editor. Those are basically the formatting options provided by the editor at runtime.
These are based on Quill JS documentation and if you want more info and options, please check the Github project readMe file.
That's it, when you run this project, you should see this :
If you want to read and save the updated data from the editor, the web component exposes a method which you can call on a button and use the returned HTML to store in DB or any other content management system.
You should get back the raw html from the editor.
Feel free to fork and update the webcomponent as necessary.
I had a choice between CKEditor or Quill and I went ahead with quill, as it looks pretty simple to integrate and work with.
So, driven by one of my client's requirements, I created a Rich Text Editor or WYSIWYG editor for Oracle JET. This is based on Quill JS and fully customizable.
Github project download: https://github.com/sohamda/JET-Web-Components/tree/master/rich-text-editor
I will explain in this blog, on how to integrate it in your own Oracle JET project.
1. Create and initialize your JET application and then put the downloaded web component inside "src\js\jet-composites" folder.
2. Once copied update your viewModel first.
Add a snippet for passing the default content to be displayed by the editor after load.
3. Update view to load this editor
Above you can see the "toolbar-options" property, that controls which options you should display to user on the editor. Those are basically the formatting options provided by the editor at runtime.
These are based on Quill JS documentation and if you want more info and options, please check the Github project readMe file.
That's it, when you run this project, you should see this :
If you want to read and save the updated data from the editor, the web component exposes a method which you can call on a button and use the returned HTML to store in DB or any other content management system.
You should get back the raw html from the editor.
Feel free to fork and update the webcomponent as necessary.
I had a choice between CKEditor or Quill and I went ahead with quill, as it looks pretty simple to integrate and work with.
Thanks for sharing this useful information about RTF Editor component. This is a very helpful for me.
ReplyDeleteThe most interesting text on this interesting topic that can be found on the net ... how to get rich quick
ReplyDeleteInteresting thhoughts
ReplyDelete