Tuesday, 7 October 2014

IFrames in CKEditor

During the past period I have been asked how an IFRAME can be added in the CKEditor (Rich Text Field) so that, for example, a YouTube video can be played directly from the XPages application.
In this particular situation, the problem was that an instruction video could not been seen in a Teamroom Application after the video (IFRAME) had been added to the Rich Text Field.

The source of the Rich Text Field

<p dir="ltr">Christian Gudemann discusses OpenNTF and the importance of open source</p>
<p dir="ltr">In this interview, Christian Gudemann and Celia Hamilton discuss the recent OpenNTF Board elections, what the OpenNTF board does, why</p>
<p dir="ltr">an open source community is so important to the Notes/Domino space, and what to say to critics who say open source isn&#39;t secure or is low quality.</p>
<p dir="ltr"><iframe allowfullscreen="" frameborder="0" height="315" scrolling="no" src="//www.youtube.com/embed/kTwREsPYQq0" width="560"></iframe></p>

The result was that de video (IFRAME) was not shown in the CKEditor.

The solution can be found in the Rich Text properties htmlFilter and htmlFilterIn.
The property htmlFilter runs when DISPLAYING richtext content and the property htmlFilterIn runs when SAVING richtext content.
The following filters are available:
-  identity: leave it as it is
-  empty: remove all content
-  acf: active content filter, removes potential dangerous HTML and JavaScript
-  striptags: remove all tags, leave only plain text

In order for this to work I set the properties htmlFilter and htmlFilterIn to 'identity' which leaves the input as it is.
The result is that an iframe can be added and the video can be played in the Teamroom.

There will also be other solutions for this problem.
In case you have another solution please let me know and please leave a comment.

No comments:

Post a Comment