Skip to main content

Rich Text Editor - Oracle JET

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.

Labels:

Comments

  1. John smithMarch 7, 2019 at 11:29 AM

    Thanks for sharing this useful information about RTF Editor component. This is a very helpful for me.

    ReplyDelete
  2. sobiaOctober 26, 2019 at 1:15 PM

    The most interesting text on this interesting topic that can be found on the net ... how to get rich quick

    ReplyDelete
  3. MelNovember 30, 2021 at 8:11 PM

    Interesting thhoughts

    ReplyDelete

Post a Comment

Popular posts from this blog

Exception Handling in ADF

This blog will give you an overview on how you can successfully deal with unhandled Runtime exceptions in an ADF application. This will give you an idea of: How to catch the unhandled exceptions. Write a separate log file with stacktrace and thread dumps. Redirect the user to an static error page #1. Catch unhandled exceptions :  Create a class "MyExceptionHandler" which extends : oracle.adf.view.rich.context.ExceptionHandler. Override handleException() method.     public void handleException(FacesContext facesContext, Throwable throwable, PhaseId phaseId) throws Throwable {         // this method is going to create a separate file with stacktrace and thread dumps         writeException(throwable);         // redirect to error page         redirectToErrorPage(facesContext);     }  Create a fo...
8 comments
Read more

Chatbots and Oracle Cloud Services

Thanks to Oracle A-Team, I had a chance to work with Chatbots. 3 pure NodeJS applications, on couple of Oracle Cloud platforms and Facebook messenger, and my chatbot was running. Let me explain, the architecture a bit. To start with, following is the simple representation of how it works. Message Platform Server : Is a NodeJS application, deployed on Oracle Application Container cloud, acts as a channel between Facebook Messenger and the chatbot engine. It simply converts the incoming messages from Facebook and sends it to chatbot readable format. Also, when chatbot replies, it converts to Facebook readable formats and passes it to messenger. Chatbot Engine : Is a NodeJS application, which communicate with some REST APIs based on a conversation flow document and moves the flow of the conversation from one state to another. Flow JSON : Where we document, every state of a conversation and which APIs to call to generate a response. For example, at the beginning of the con...
23 comments
Read more