17
Views
6
Comments
Solved
[TinyMCE] Set HTML inside list
Question
TinyMCE
Forge asset by Community Labs

Hi Community,

i am trying to use Tiny MCE 'SetHTML' to display my content, inside a list.

However, i am not able to do it. Am not sure whether to do it in the 'OnAfterFetch' of my aggregate. Even if so, i couldn't get the widget Id of the container inside the list.

But i am able to do it using the actual TinyEditor block (ReadContainer). I am trying not to use it thou, as it still still display the word count, 'p>strong' etc at the bottom. I am aware that i am able to remove the toolbar via configuration. Just that i didn't do it for these screenshots.

The first 'test test test test' in the screen shot, are display in a container outside of my list. And i trigger the SetHTML in the OnAfterFetch. But this way, i can only show 1 record. (ReadRead Container)

Any assistance will be greatly appreciated, thank you!

2024-07-12 05-57-50
Gourav Shrivastava
Champion
Solution

Hello, @Jun Mun Chanas i understand, you need to show html in the container, not the editor,r so make another block the same as I created for the text editor, but this time, inside that block, the editor doesn't exist only the container exists and with the help of setHtml you can set HTML of that container for view only 

2022-05-01 03-47-53
Jun Mun Chan

Thank you! This is exactly what i needed. Now i can continue to add style to the container, eg. "card shadow-m margin-bottom-s", and also add other expression and information for my use card above the container, but still inside the list-item

2024-07-12 05-57-50
Gourav Shrivastava
Champion

Hello, @Jun Mun Chan 

If possible, please share your application OML file so I can easily make changes.

2022-05-01 03-47-53
Jun Mun Chan

Hi,

My original is done using my company environment and with ODC. I had recreated 1 in my personal O11 environment and had attached.

I think the main idea is the same, so we couldn't get the widget ID to pass in the 'SetHTML' client action.

Anyway, if you try to key in something and click save, there will be an error. But the data will still get save. 

Error cause by OnAfterFetch, where there is a For/Each to SetHTML, and i had temporary pass in ""

Thank you.

tinyMCE.oml
2024-07-12 05-57-50
Gourav Shrivastava
Champion

Hello, @Jun Mun Chan 

I have created a proper demo for you to show how to use the editor inside the list. You can refer to this.

I just used the Block for proper and easy implementation 

Demo

tinyMCE_Grv.oml
2022-05-01 03-47-53
Jun Mun Chan

Hi @Gourav Shrivastava ,

Thank you for your .oml file. Eventually, i wanted to create something like this. As per revised oml attached, i am able to use it inside LIST, provided i have drag the TinyEditor block to it.

But what i don't like, is that even if i set ReadOnly: True, users are still able to click into the editor, even thou they can't edit. And also depending on where the user clicks in the View portion, the corresponding HTML tags will be display too. I don't want to show this. 

They do have a client action 'SetHTML' available, however as we are not able to pass in the widget id, i am not able to use it. 

For every item, i wanted to show something like the one with a tick. I had used the 'SetHTML' action, but had to trigger it with a button click.

I had tried to do something like the solution provided in this forum question, but it's not working. Keep promoting errors like 'n is not a function' 'r is not a function' etc

Any advise or suggestions will be greatly appreciated.

Thank you.



tinyMCE_revised.oml
2024-07-12 05-57-50
Gourav Shrivastava
Champion
Solution

Hello, @Jun Mun Chanas i understand, you need to show html in the container, not the editor,r so make another block the same as I created for the text editor, but this time, inside that block, the editor doesn't exist only the container exists and with the help of setHtml you can set HTML of that container for view only 

2022-05-01 03-47-53
Jun Mun Chan

Thank you! This is exactly what i needed. Now i can continue to add style to the container, eg. "card shadow-m margin-bottom-s", and also add other expression and information for my use card above the container, but still inside the list-item

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.