nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

SitePublisher - TinyMCE : Adding a Drop Down List of Custom CSS Classes

Vijay_Tandel

Hi,

I am trying to customize TinyMCE for SitePublisher to display Custom CSS Classes in Style Drop Down.

I followed the steps listed in SP Dev guide, but no luck

I added following

[HTML]/example_data/example_full.css[/HTML]

in

/iw-home/local/config/lib/content_center/livesite_customer_src/etc/conf/livesite_customer/resources/customer-livesite-resource-config.xml

and ran LS Build. However I don't see the custom classes in Style Drop Down.

- What is the path to custom css in prop key? vapth to workarea?
- Any other config missing?

Thanks,

Find more posts tagged with

Comments

Vijay_Tandel

Any ideas about this??

miroperez

What version of Teamsite/SitePub are you running?

Also, that url pattern most likely need to be either an absolute path or a relative path from url that invoked the tinymce component.

Miro

Vijay_Tandel

Running TeamSite 6.7.2 SP2.

I tried deploy CSS under livesite_customer_src/web/custom/css and ran LS build still no luck.....

miroperez

This could be a bug.

When you open the component properties edit window, right click in Firefox, and View Frame Source.

From there look for something like this in the source:
<script type="text/javascript" src="/iw/tinymce/jscripts/tiny_mce/tiny_mce_src.js"></script>

<script type="text/javascript" src="/iw-cc/livesite/javascript/combine-output/122c147c4b9e1703305e1bcbf25e324ebffa6754.js"></script>

he second script src name will vary but it should be the one I need to see the contents of. Click on the link in the Firefox source view and it should open that js source file. Now find the following string:

tinyMCE.init({

Copy the contents of this function and post it here.

miroperez

If you find:

content_css : enabledContentCss

in this function then you should have the right code.

However, this property actually doesn't use the value you pass it in the spring config. It was changed to look for all css added to the page/site properties, then it appends those translated urls to the property via the js var "enabledContentCss". This makes sure that the css specified is pushed out to the runtime as part of the deployment.

Sorry for the confusion.

Miro

Vijay_Tandel

I can see enabledContentCss picking up right CSS set for page/site. And display the styles defined in those CSS.

In this case

[HTML]enabledContentCss = /iw/cci/meta/no-injection/iw-mount/[/HTML]
However the property defined in customer-livesite-resource-config.xml is not bening picked up.

miroperez

That was my point - it's not going to pick up anything from that property. The only thing that will be added to the styles is css added to the page or site properties. The presence of this property is used to signal us to add the styles menu.

Sorry for the confusion. Originally the string in the property could be used but after mishaps where customers forgot to add the css to the deployment and also that external css wouldn't be used in the editor and preview this change was made. There is no way to reference an external css in a page therefore this property has to be programmatically generated based on page/site properties.

Miro

DrillThroughEventHandler.zip