Inject CSS/JS into content studio dom

Enonic version: 6.9.4
OS: Windows Server 2012 R2

Is there any way to inject CSS/JS files into the Content Studio dom from an application?

In the request there is a mode property.
Are we talking about preview or edit mode?

Either way it should run whatever script you include in the html.

In fact, in an app for a customer I’m working for we had the oppsite problem. Our client side js was interfering with the Content Studio js. So we simply removed our js when mode was edit.


We are talking about the edit mode dom (not the application dom which is in a iframe).

Hi @krelde!

This has actually been on the plate for a while, but not prioritized. Actually, our initial plan is to support custom input types, but I assume people might want to do other things too…
Would be nice to learn what you would actually like to do with such functionality, so we can use this as input when moving forward.

1 Like

Custom input types would be awesome :slight_smile: However what I really want to do is to create custom editors. The actual input type could be TextLine, what I would like is to be able to change and extend the editor of the property. Imagine you have ContentSelector property, that you can change to a dialog based editor that displays the page tree of the application (as an editor you might not remember the page name but remember where it’s located (the editor could also combine searching and page tree selection)).

Or you have a textline property, that you change to a custom editorused to select a font-awsome css class.

The real power to improve the editor experience in Content Studio would come from combining custom content types and custom editors.

My original problem:
I have create a custom selector to select front icons (font awesome, bootstrap, or custom). However I need the font awesome css (and other css files) in the DOM to display the icon (so the editor knows what I looks like). So I added at the CSS in the first item in the result. However as you scroll down in the editor the first items are removed from the DOM and new are added 10 at the time (and so on). The results is only the first 9 items is displayed with icon, the rest “breaks” as the font awesome css is gone from the DOM.
Why is the CustomSelector only adding 10 items to the DOM at the time? And why remove them, just hide them? I looks like a cap for 10 item in the DOM even though I return 100 items in the service response (and set 100 in the config).

1 Like

Just from the sidelines - in 6.10 (released next week) - we will introduce content tree navigation in ContentSelectors. That will at least help you with one of the use-cases here.

Erratum: May 2nd - I was wrong, the tree navigation is not part of the ContentSelectors, only the Move dialog from the main Content Studio grid/browse view.


Essentially what you describe sounds like custom input types to me. Underlying, we have a common property model from the Node API, i.e. using valueTypes such as String, Boolean, Geopoint etc. Input types will always produce a specific valueType in the end, but essentially help provides a high level schema on top of this model.


Yes i was trying to describing custom input types :stuck_out_tongue: I was thinking of the input types as the value types, thanks for the explanation.

1 Like