Many types of content in Collaborate, such as the Home module, wiki pages, blog posts and events, use a rich text WYSIWYG editor. As described here and here, external content can easily be displayed from within these pages, such as RSS feeds and embedded media, like a YouTube video. Also, information from other site modules can also be embedded in a page, such as a list of files.
There are more advanced ways to embed content from external sources and to make these rich text editor pages even richer:
iFrames
Firstly, content from another web site can be included using an <iframe> element. Click Source within the editor:
The Source screen is displayed:
As described in more detail here, an IFRAME should include a src attribute which is the URL of the content to be included, and don't forget to set the height and width of the IFRAME. Those attributes can be entered manually from the Source editor. Alternatively, after toggling back to the regular WYSIWYG editor view, double click on the IFRAME that was added:
To display the IFrame Properties screen:
Library files, CSS & script tags
An even more advanced way to include external content and to make rich-text editor pages richer is to reference external and internal javascript files, CSS files and settings, and any other files (like images).
File library
There is an administrative feature in Collaborate: the File Library. This can be accessed via the System Admin console:
The File Library is where any type of file can be stored in the Collaborate instance and then later referenced from within the Collaborate. You need to upload a file to the File Library for it to be displayed in the File Library list.
As discussed below, the File Library is the place to store CSS files, javascript files, images and other files that may be required to create more complex rich text editor pages. Based on the nature of the File Library, do not add files there that contain confidential information, as any user in Collaborate will potentially have access to them.
If files need to be added to the File Library, please reach out to a system administrator, who can load files and provide the appropriate URL for accessing each one.
CSS
By default, it is possible to add CSS styles to a rich text editor page. This can be done by applying the @style attribute to any HTML element from the Source editor, but CSS can also be added in two other ways, as described in more detail here. Those two ways are by including a <style> element or by adding a <link> element that references a .css file. That .css file should be stored in the File Library, otherwise it will be necessary to reference a publicly accessible .css file, the location of which could change.
Be careful when using either of these two methods of embedding CSS in a page, as it may interfere with how existing site elements are styled
Javascript
You can also include javascript inside of a rich text page, although by default this is not permitted. Reach out to the HighQ support team if this feature should be, but is not enabled on the Collaborate instance.
Javascript can be added to a page using the <script> element. Javascript can embedded directly into the page, as follows:
<script type="text/javascript">
<![CDATA[
...javascript code...
]]>
</script>
or an external .js file can be referenced:
<script src="script.js" type="text/javascript"></script>
That external .js file should be saved to the File Library and referenced directly using the URL value shown above:
<script src="./flag/flag_2199.action" type="text/javascript"></script>
Otherwise, it would be necessary to reference a publicly accessible .js file, the location of which could change.
