Issue
- In a web content having an HTML field, after inserting this HTML in the source view:
<video id="vid1" class="video-js vjs-default-skin" controls width="100%" height="480" data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=2EPZxIC5ogU"}] }'>It will be observed that such markup will turn to
<video class="video-js vjs-default-skin" controls="" data-setup="{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=2EPZxIC5ogU"}] }" height="480" id="vid1" width="100%"> </video>Once published, turning the double quotes into"
Environment
- Liferay DXP 7.0+
Resolution
-
Solution #1: Modify the Ckeditor so that the quotes are not converted. Considering:
- https://ckeditor.com/old/forums/CKEditor-3.x/Stop-CKEditor-converting-quotes
- https://stackoverflow.com/questions/34617947/ckeditor-leave-html-double-quotes-code-34-alone
Those have to be adapted to the Ckeditor within Liferay 7, for that, the tutorial to start with is: https://portal.liferay.dev/docs/7-0/tutorials/-/knowledge_base/t/modifying-an-editors-configuration
-
Solution #2: Add a plugin to embed media/video so that the embedding will be handled differently, with a satisfactory end result. These two may be a good starting point to test
- https://ckeditor.com/cke4/addon/youtube
- https://ckeditor.com/cke4/addon/embed
(CKEditor docs: https://ckeditor.com/docs/ckeditor4/latest/examples/mediaembed.html)
You may also refer to this third party resource in order to get an idea on the required steps: https://inexture.in/integrate-media-embed-and-iframe-plugins-in-liferay-7-ckeditor/ however, please note, this solution can't be confirmed, endorsed nor supported by Liferay
-
Workaround: Use the
<iframe>tag instead. this would be something like:<iframe width="560" height="315" src="https://www.youtube.com/embed/2EPZxIC5ogU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
And it can be obtained on a YouTube video by clicking on the "Share" icon (bottom-right corner of the video) -> Embed
Additional Information
- Note: CKEditor and Alloy Editor are provided as WYSIWYG Content Editors and are not intended to be HTML Editors. These editors' Source Modes are provided for convenience and are only intended for minor markup adjustments. Any markup entered into Source Mode is not guaranteed to remain unmodified nor intact upon publication.