Show movies in CMS

Questions
1

How do I link in a movie in a html field?
I know i can do a video tag, or embed a youtube link.

But is it possible to use 1 of the standard functions? (Not flash)

richtext
richtext.PNG771×423 17.9 KB

Litium version: 5

2

The HTML editor was shipped without Video embed feature by default, but you can configure the Editor to add the Video embed addon. For example: https://ckeditor.com/cke4/addons/search/plugins/video

3

I have tried to installed this, but the Icon is not displayed. What should I add to the globalConfig.js?

4

Which plugin did you download? Video Embed?

I just tested it with the config below. It seems the trickiest part is knowing the proper capitalization of the the plugins name when pushing to the toolbar. In this case it has to be “VideoEmbed”

//load plugin from folder that does not exist in default `Litium/Editor/plugins`‐folder
(function () {
    CKEDITOR.plugins.addExternal('videoembed', '/site/editor/videoembed/', 'plugin.js')
})();
// change the configuration of CKEditor to add the plugin
(function () {
    var old = CKEDITOR.editorConfig;
    CKEDITOR.editorConfig = function (config) {
        old(config);
        // CKEDITOR LOAD PLUGINS
        config.extraPlugins += ',videoembed';
        // CKEDITOR TOOLBAR CUSTOMIZATION
        config.toolbar.push(['VideoEmbed']);
        config.allowedContent = true;
    }
})();
5

Tried with https://ckeditor.com/cke4/addon/html5video but no luck. I’m not sure if I need all the dependencies, but I did download them as well.

(function () {        
CKEDITOR.plugins.addExternal('widgetselection', '/site/editor/widgetselection/', 'plugin.js');
    CKEDITOR.plugins.addExternal('toolbar', '/site/editor/toolbar/', 'plugin.js');
    CKEDITOR.plugins.addExternal('notification', '/site/editor/notification/', 'plugin.js');
    CKEDITOR.plugins.addExternal('dialogui', '/site/editor/dialogui/', 'plugin.js');
    CKEDITOR.plugins.addExternal('dialog', '/site/editor/dialog/', 'plugin.js');
    CKEDITOR.plugins.addExternal('clipboard', '/site/editor/clipboard/', 'plugin.js');
    CKEDITOR.plugins.addExternal('lineutils', '/site/editor/lineutils/', 'plugin.js');
    CKEDITOR.plugins.addExternal('widget', '/site/editor/widget/', 'plugin.js');
    CKEDITOR.plugins.addExternal('html5video', '/site/editor/html5video/', 'plugin.js');
})();
// change the configuration of CKEditor to add the plugins
(function () {
    var old = CKEDITOR.editorConfig;
    CKEDITOR.editorConfig = function (config) {
        old(config);
        // CKEDITOR PLUGINS LOADING        
        config.extraPlugins += ',html5video,widget,widgetselection,clipboard,lineutils,dialog,dialogui,notification,toolbar';   
        config.toolbar.push(['html5video']);
        config.allowedContent = true;
    }
})();
6

Try changing the name when pushing to the toolbar: config.toolbar.push(['Html5video']);

7

Thanks, that worked and the movie Icon is displayed. But there is no browse option in the dialog, so I cant choose any file. But I guess I will have to look at another plugin. Or is there any setting you know of that I need to set in order to browse files?

8

Found this on their website:

By default CKEditor does not include a file browser or uploader. The “Browse server” and “Upload” tabs need server side code to work so they don’t appear if there is no file browser or uploader.

To fix the problem you can install CKFinder and integrate it with CKEditor. There are how-to guides in the documentation:

http://docs.cksource.com/ckfinder3/#!/guide

So it is not something that works right out of the box. I have never tried this plugin unfortunately, I have no idea how can it integrate to Litium’s DAM system. But in case you want to create a custom dialog to select video files, please check out this guide: https://docs.litium.com/documentation/architecture/back-office_1/select-dialog_1