Adding Block into TinyMCE Programmatically

volume_up

A critical vulnerability was discovered in React Server Components (Next.js). Our systems remain protected but we advise to update packages to newest version. Learn More.

Home / Forums / Developers (Main Products) Forum / CMS 7.5 - 11 /

Adding Block into TinyMCE Programmatically

Harinarayanan

Vote:

expand_less 0 expand_more

Hi,

I'm trying to add a specific block into TinyMCE programmatically. To achieve this I'm trying to generate the below HTML programmatically

But I'm not sure, how/where I can access or get the value of data-classid="xxxxxxxx-xx..." , Can anyone suggest how I can get the GUID value of data-classid from IContent.

Or If any other better way to achieve this task.

Update:

To add more clarity below are the HTML parts that need to be retrieved from the IContent object block.

data-classid = "xxxxxxx.xx.." ----- This is the part I'm not able to get from the IContent.
data-contentguid = "365aad66-2cad-4679-867a-4892f2127dbc" ----- I'm able to retrive, No issues
data-contentlink = "440555" I'm able retrive, No issues

Below are the sample code,

Thanks in Advance.

Hari

#275818

Edited, Mar 07, 2022 14:05

Ted

Vote:

expand_less 0 expand_more

It's the same for all block types. The data-contentguid and data-contentlink attributes are the critical parts.

#275819

Edited, Mar 07, 2022 14:10

- Mar 07, 2022 14:46

@Ted, I just added some more clarity in the question above, In short, I'm able to fetch data-contentguid and data-contentlink, but not sure from which property I can get the data-classid property value from IContent.

Ted - Mar 07, 2022 15:57

I'm not sure if there's a public part of the API through which you can get it, but otherwise: simply hard-code it.

In other words, set "data-classid" attribute to "36f4349b-8093-492b-b616-05d8964e4c89".

It's not site-specific. All blocks in TinyMCE have the exact same value for the "data-classid" attribute.

Jake Jones

Vote:

expand_less 0 expand_more

Hi,

The class ID is just hard-coded in the ContentFragment (EPiServer.Core.Html.StringParsing), so you can hard-code it as well.

By the way, you can generate this markup the same way the CMS does by getting a ContentFragment from the ContentFragmentFactory (which is in an Internal namespace, but probably still better than generating the HTML yourself). The simplest option would be to just directly add it to an XhtmlString as a fragment, saving you even having to generate the HTML.

Here is a dirty example, please excuse my use of the ServiceLocator--it's for example purposes only:

var contentFragmentFactory = ServiceLocator.Current.GetInstance<ContentFragmentFactory>();
var securedFragmentMarkupGeneratorFactory = ServiceLocator.Current.GetInstance<ISecuredFragmentMarkupGeneratorFactory>();

var fragment = contentFragmentFactory.CreateContentFragment(content.ContentLink, content.ContentGuid, securedFragmentMarkupGeneratorFactory.CreateSecuredFragmentMarkupGenerator());'

// Get the HTML string formatted for edit mode...
var editFormattedFragment = fragment.GetEditFormat();

//...or add it to an XhtmlString
xhtmlString.Fragments.Add(fragment);

#275826

Edited, Mar 07, 2022 17:22

- Mar 08, 2022 5:24

Thank you, Jake Jones, the above solution is worked.

error This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.