問題
- HTMLフィールドを持つWebコンテンツにおいて、このHTMLをソースビューに挿入した後：
<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"}] }'>に変わり、そのようなマークアップが観察される。
<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>出版後、二重引用符を"にする。
環境
- Liferay DXP 7.0+
解像度
-
解決策1: 引用符が変換されないようにCkeditorを修正します。
- 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
これらは Liferay 7 の Ckeditor に適合させる必要があります。そのために、まず始めるべきチュートリアルは https://portal.liferay.dev/docs/7-0/tutorials/-/knowledge_base/t/modifying-an-editors-configuration
です。 -
解決策その2: メディア/動画を埋め込むプラグインを追加することで、埋め込みが別の処理になり、最終的に満足のいく結果が得られるようにします。
- https://ckeditor.com/cke4/addon/youtube
- https://ckeditor.com/cke4/addon/embed
(CKEditor docs: https://ckeditor.com/docs/ckeditor4/latest/examples/mediaembed.html) この2つはテストするのに良い出発点かもしれません。
https://inexture.in/integrate-media-embed-and-iframe-plugins-in-liferay-7-ckeditor/ ただし、このソリューションはLiferayによって確認、承認、サポートされるものではないことに注意してください。
-
回避策: 代わりに
<iframe>タグを使用してください。 というようなものになると思います：<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>
また、YouTubeの動画上で「共有」アイコン（動画右下）をクリックすることで取得できます -> Embed
追加情報
- 注: CKEditorおよびAlloy EditorはWYSIWYGコンテンツエディターとして提供されており、HTMLエディターとしての機能は備えていません。 これらのエディターのソースモードは、便宜上提供されているもので、ちょっとしたマークアップの調整程度を目的としています。 ソースモードに入力されたマークアップは、公開時に変更されず、そのままであることを保証するものではありません。