dimanche 12 juin 2016

How to prevent VideoDetector plugin for Ckeditor to duplicate content when there are multiple instances on the page?


The setup and goal:

I am using the Video Detector plugin for CKEditor: http://ckeditor.com/addon/videodetector

My goal is to allow for videos to be added to the content.

There are about five instances of CKeditor on the page. Each has .ckeditor class to initialise the plugin (the jQuery plugin is included). Then in the code I set up the custom toolbar that is used by default for all the plugins on the page.

You can see below the example setup.

$(document).ready(function() {

    CKEDITOR.config.toolbar = [
        [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord' ],
        {
            name: 'basicstyles',
            groups: [ 'basicstyles', 'cleanup' ],
            items: [ 'Bold', 'Italic', '-', 'RemoveFormat' ]
        },
        {
            name: 'paragraph',
            groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ],
            items: [ 'NumberedList', 'BulletedList', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ]
        },
        {
            name: 'links',
            items: [ 'Link', 'Unlink', 'VideoDetector' ]
        }
    ];

    CKEDITOR.config.uiColor = '#e5e5e5';
    CKEDITOR.config.removePlugins = 'elementspath';
    CKEDITOR.config.extraPlugins = 'videodetector';
    CKEDITOR.config.extraAllowedContent = 'iframe[*]';
    CKEDITOR.config.allowedContent = true;
});

The problem:

This configuration works, but the problems start when you begin inserting the videos in the different instances. To begin with, if you add a different videos to each CKEditor instance using the plugin, the same video is always added. I can only insert new videos if I save, refresh and then insert the new videos. However, once I save the form the initial video is replaced by the new ones.

I think the problem is potentially to do with the instances and them overwriting each other, but I am not sure how to solve it.

Let me know if there are any questions.


Aucun commentaire:

Enregistrer un commentaire