Hi,
I've used the Forge asset "Tiny Rich Text editor 6" to enable rich text in my project. My aim is to save the formatted data to the database, and display the text with the HTML. While saving the data to DB, I also save the HTML for the corresponding text to the DB.
Client actions that I used are from Tiny Rich Text editor 6 Forge component:
I used the SetEditorContent Client action to display the Editor text with the saved HTML.
Now, I would like to the show the List of text with the HTML applied in an Interaction Carousel/Table. There is a possibility to apply HTML using the SetHTML Client action by passing WidgetId and HTML Content, but the problem is I'm unable to pass the WidgetId of the text as it belongs inside the List.
This is the Widget where I need the HTML to be applied
Here I have used an OnAfterFetch event to apply HTML to the list of text.
It doesn't show the TextArea.Id widget.
Since I don't point to the right widget, this is what I see on the Interface.
Could anyone please help me resolve this issue? I'm open to ideas/suggestions as well.
Thanks in advance!
I passed the text with the HTML markup that I got from the "GetEditorContentHTML" client action. This is the data:
And this is how it's rendered by using the "Content" property:
Hello,
You can use JavaScript to inject the HTML into the Carousel. Here's how I've implemented this:
The JavaScript code:
document.querySelector("[containeridentifier='" + $parameters.CurrentID + "']").innerHTML = $parameters.HTMLContent;
Hi @Gayathri Hariharan ,
I hope this component may solve your problem.https://www.outsystems.com/forge/component-overview/7239/injecthtml
Thank you @aravind mani and @Aurelio Junior
Both the solutions worked perfectly.
There is another place where I would like to set the HTML, which is in the editor window. I used the SetEditorContent Server action to achieve this. But the problem here is, it seems to work at times not most of the time. I have called the SetEditorContent action in the OnRender event of the screen. Please let me know if there is a better solution for this.
Thank you!
Hello!
The OnRender event is definitely not the right place to do this. Since you're fetching the data from the database, the best place to do this would be in your aggregate's OnAfterFetch event:
Hi @Aurelio Junior,
I tried using an OnAfterFetch event, it doesn't seem to apply the HTML to the editor window and it throwed an error.
That means that the code is running before the TinyMCE component is fully loaded. Taking a step back, why exactly are you setting the editor's content explicitly via code? You can also use the editor's "Content" property to do it:
Initially, I did use the Content property to display the text with formatting and passed the HTML on the content's property.
It shows the editor window with simply the text but it doesn't not seem to apply the HTML. (Note: I save the HTML to the database, and try to apply it to the text when I open the editor window). Hence I tried to do it explicitly.
Whenever, I open up a particular record I would like to apply HTML stored for that text dynamically in the text editor window.
@Gayathri Hariharan ,
Instead of onRender, try placing it onReady. It should work!!
That's actually bad advice. There's no guarantee that the data from the Aggregate is going to be available at the moment the OnReady event is triggered.
The formatting should be automatically applied when you use the "Content" property. I've tested this myself and it works. Is there any chance you could share your OML so we can take a look?
@aravind mani
Sorry, it didn't work and this error was thrown.
Yes, It actually did work for me while I was trying out in my personal environment. But the problem that I have now is related to a project that I'm working on so unfortunately I wouldn't be able to share the OML.
I just have one query. Did you pass the HTML script or the plain Text to the Content properties?
@Aurelio Junior
I figured out why the HTML was missing on the editor window. I have been using a TextArea, and passed its ID as the widgetID to the TinyMCE component, rather I should have used a Container. After replacing it by just a Container, I confirm that it is working as expected.
Thanks for the help! :)
Great to hear it's working! Don't forget to mark the answers that helped you as solutions. ;)
When a File Server path is given on the Editor window as a Link, it doesn't open the file path. I would also want the Text given under editor window to be displayed in a screen with the File path to allow user to access the link.
Could someone please help me fix this?