2

Running version 9.3

I have an editor who mentioned they will paste some code into the rich text editor (usually a div for a widget) and they've had other editors accidentally delete it out because nothing is showing in the design tab.

<div class="gdWidget" data-topicid="MNHENNE_703" data-copy="Get updates on grants, programs, and resources available to improve sustainability at schools." data-position="bottom">&nbsp;</div>

Is it possible to highlight a div in the RTE only? The placement of these widgets aren't always fixed, so I was hoping to avoid creating a new field. Either route, I appreciate any insight

2 Answers 2

1

Another approach is to add a CSS class to the html/body element when in experience editor mode:

<body class="@(Sitecore.Context.PageMode.IsExperienceEditor ? "experience-editor" : string.Empty)">

Then in your own CSS files, you can use a descendant selector so the styles only apply when this class is present:

.experience-editor .gdWidget {
    /* Let's style some content when in the Experience Editor */
    border: 2px solid red;
}

With this approach, you can use this class in RTE or anywhere on the website with an experience editor.

You can refer to this nice article by Kamruz Jaman: Injecting Resources into Experience Editor in Powerful Ways

Hope it helps!

1

This is a good idea for helping content authors be more aware of what they are copying / pasting / changing in rich text fields.

Look for this setting and override it with your desired values. The RTE will use those styles when displaying a WYSIWYG.

<!--   WEB SITE STYLESHEET
            CSS file for HTML content of Sitecore database.
            The file pointed to by WebStylesheet setting is automatically included in Html and Rich Text fields.
            By using it, you can make the content of HTML fields look the same as the actual Web Site
       -->
<setting name="WebStylesheet" value="/my-path/css/my.rte.min.css?v=1" patch:source="My.config"/>

Whenever you make these changes, make sure to clear your browser cache and restart the site to ensure that the old version isn't getting cached anywhere. Versioning the src also helps avoid caching issues.

Additional reading:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.