Forum Discussion

browneandrae's avatar
5 years ago

Add new scripts to a page

I realized that lithium has a global object which actually shows the scripts loaded on a page, for example the ideapage in the Lithium.RenderedScripts property the lithium tinymce editor gets added h...
  • AdamA's avatar
    5 years ago

    Hello browneandrae,

    You are correct that the LITHIUM.RenderedScripts JS object contains an array of all of the loaded scripts on the page. This is used internally when we dynamically render components to determine if the scripts needed for the dynamically rendered components are already on the page. There is currently no mechanism or API for the LITHIUM.RenderedScripts to have it load scripts for components not on the page.

    The only way you could force the version of TinyMce to be on a page that does not have an editor on it by default would be to add a component to the page that uses TinyMce.

    On the ForumTopicPage you might (read: I did not verify) be able to add one of the following components to force the TinyMce editor lib to be on the page. My examples below use the code as you would insert the component via the XML tab for a Page in Studio:

     

    • <component id="message-list-detail-with-inline-editors" />
      • This component is only available on the ForumTopicPage
    • <component id="messages.form.reply-inline" message="lia-message:env" />
      • The "message" parameter requires a message to be passed to tell the component which message the component will use to reply to. In this case we use "lia-message:env" which will attempt to grab the message from the environment. On the ForumTopicPage it will use the message for the page. This will break on pages that do not have the context of a message on them.
    • <component id="messages.form.reply-inline" message="lia-message:env" />
      • Same comment as above for the "message" parameter.

    Please note, some (or all?) of these components may lazily load TinyMce, often at the point where the editor is opened via clicking a button or clicking into a textarea. In which case, the TinyMce library still might not be on the page until some interaction in the UI occurs.

    Perhaps you can explain a little more about your use case and the desired functionality. There might be an existing component I can recommend that accomplishes the desired functionality.