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 here. On the Forum Topic page however the lithium tinymce editor does not get added, because it is not in the Lithium.RenderedScripts global variable . Is there a way to control this to add the scripts to the disucssion page so that the editor lithium version of tiny mce can be added to the page. I figure that after this the constructor function can be called on a text box and it would work. Trying to find the simplest way to do this if anyone knows.

 nicoleguzzo 

  • 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.

  • AdamA's avatar
    AdamA
    Khoros Oracle

    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.

    • 💙would give you a hug if I could, that worked, saved me a bunch of time

    • AdamA we realized today that the tinymce scripts do not get added to the page Forum Topic Page in a mobile view when having this component on the page <component id="messages.form.reply-inline" message="lia-message:env" /> . Is there a way to force the scripts to get added in mobile view.

      • AdamA's avatar
        AdamA
        Khoros Oracle

        Yes, you can enable this setting:

        Admin>>Discussion Styles>>Post & Topics>>Settings>>Use Rich Text Editor on mobile devices