Note, that the implementation provided below is not the only way to use dhtmlxRichText in a Angular-based application. It gives you initial schema of the integration and implies further extension of the app functionality depending on your goals.
Including source files
To add RichText package into your Angular-based app you need to download the component package and unpack it into a folder of your project.
richtext.css files into a page.
Make sure that you set correct relative paths to these files:
There are two possible scenarios of initializing RichText inside an Angular application. One consists in isolating RichText structure and data inside of the Angular component and another one suggests separating view and data parts with the possibility of interaction between them.
Scenario 1. Isolating RichText in an Angular component
In this variant RichText configuration and data are held inside of the Angular component with no bonds with the external part of the application.
- Create a
RichText.tsfile, where you will define a Component. Each component must have a template assigned, for RichText it will be a plain DIV tag with a named reference.
- Use the
new Richtextconstructor to initialize RichText inside of the container that you've set above:
- Next you can do some actions, e.g. add a new control into the toolbar:
Scenario 2. Exposing RichText data and config
This variant adds flexibility in the control over RichText data and configuration by allowing access to them from other parts of the application.
- The first step is the same. Create a file, let it be
RichText2.tsthis time, and add a container for the RichText:
- Then initialize RichText with the
new RichTextconstructor and define the configuration properties of RichText in the object passed as a second parameter of the constructor:
Working with configuration options
- Set the list of used RichText configuration properties and their types before the initialization function:
The properties of RichText are exposed and available to work with outside the component. In the example below the
"document" mode is specified for richtext:
Working with RichText API
This variant of using RichText in a Angular application allows working with its API moving all calls of methods and event handlers into a separate file.
First, you can add a couple of wrappers for convenient work with RichText API. The example below shows how you can wrap actions for setting RichText value and handling the
change event taking into account the type of data:
After that you can use the ready wrappers in other parts of application.
- Create a
DataSample.tsfile and describe the methods you want to use while working with the richtext. In the example below the
updateHTMLmethods are added for updating the content of the RichText editor:
- Use the above methods to update the Richtext content depending on the type of entered data when some changes are made: