CONTRANCE6: CKEDITOR AUDIO PLUGIN

created: 18.01.2019 14:09

edited: 18.01.2019 14:19

back

CHANGE: contrance/Plugin/CKEditor/View/Helper/CKEditor/FrontendCKEditorPlugin.php
L36

php
['MediaImage', 'MediaLink', 'MediaAudio'],

CHANGE: contrance/Plugin/Media/Model/Behavior/MediaBehavior.php
L367-372

php
/** @var DOMElement $audio */
foreach ($xpath->query('//audio[@data-media-id]') as $audio) {
   if ($audio->getAttribute('data-media-id')) {
      $ids[] = $audio->getAttribute('data-media-id');
   }
}

CHANGE: contrance/Plugin/Media/View/Helper/MediaHelper.php
L127-137

php
/** @var DOMElement $span */
foreach ($xpath->query('//audio[@data-media-id]') as $audio) {
   $row = $mediaModel->findById($audio->getAttribute('data-media-id'));
   if (empty($row)) {
      $audio->parentNode->removeChild($audio);
      continue;
   }
   $upload = $this->extractUpload($row);
   $audio->setAttribute('src', $this->Upload->url($upload, true));
}

ADD: contrance/Plugin/Media/webroot/ckeditor/media/dialogs/audio.js

javascript
CKEDITOR.dialog.add('media.audio', function (editor) {

    return {
        title: editor.lang.media.audio.dialog.title,
        minWidth: 300,
        minHeight: 100,
        resizable: CKEDITOR.DIALOG_RESIZE_NONE,
        onShow: function () {
            this.reset();
        },
        contents: [
            {
                id: 'tab1',
                label: editor.lang.media.audio.dialog.tab1.title,
                elements: [
                    {
                        type: 'button',
                        label: editor.lang.media.link.dialog.tab1.btnSelectMedia,
                        style: 'display:block;',
                        onClick: function () {
                            // Mediandatenbank in Modal öffnen
                            $('<a>').attr('data-modal-title', editor.lang.media.link.dialog.modalTitle).attr('data-modal-rel', this.domId).attr('href', editor.config.pluginConfig.media.mediaSelectUrl).attr('rel', 'modal').appendTo('body').trigger('click').remove();
                        },
                        onShow: function () {
                            // Change bei der Medien-ID
                            $(this.getInputElement().$).closest('.cke_dialog_body').find('.media input').trigger('change');
                        }
                    },
                    {
                        id: 'preview',
                        type: 'html',
                        html: '<div class="media-preview"></div>'
                    },
                    {
                        type: 'hbox',
                        widths: ['33%', '33%', '33%'],
                        style: 'display:none;',
                        children: [
                            {
                                id: 'media',
                                className: 'media',
                                type: 'text',
                                onLoad: function () {
                                    var dialog = this._.dialog;
                                    $(this.getInputElement().$).on('change', function () {
                                        var input = $(this);
                                        var preview = input.closest('.cke_dialog_body').find('.media-preview');
                                        preview.html('');
                                        if ($(this).val()) {
                                            $.ajax({
                                                'type': 'GET',
                                                'url': editor.config.pluginConfig.media.previewUrl,
                                                'data': {ids: [$(this).val()]}
                                            }).done(function (data) {
                                                preview.html(data);
                                                preview.find('img,iframe').load(function () {
                                                    preview.find('.img-placeholder').addClass('done');
                                                });
                                                // Dialog neu Positionieren
                                                dialog._.moved = false;
                                                dialog.layout();
                                            });
                                        } else {
                                            // Dialog neu Positionieren
                                            dialog._.moved = false;
                                            dialog.layout();
                                        }
                                    });
                                },
                                setup: function (widget) {
                                    this.setValue(widget.data.media);
                                    $(this.getInputElement().$).trigger('change');
                                },
                                commit: function (widget) {
                                    widget.setData('media', this.getValue());
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    };
});

ADD: contrance/Plugin/Media/webroot/ckeditor/media/icons/audio.png
(Icon)

CHANGE: contrance/Plugin/Media/webroot/ckeditor/media/lang/de.js
L39-52

js
audio: {
   button: 'Medien - Audio einfügen',
   dialog: {
       title: 'Medien - Audio-Eigenschaften',
       modalTitle: 'Medium auswählen',
       tab1: {
          title: 'Allgemein',
          btnSelectMedia: 'Medium auswählen',
          chckbxFileIcon: 'Icon anzeigen',
          chckbxFileSize: 'Dateigröße anzeigen',
          txtTitle: 'Titel',
          chckbxTitle: 'Eigenen Titel verwenden'
       }
   }
}

CHANGE: contrance/Plugin/Media/webroot/ckeditor/media/plugin.js
L14

javascript
CKEDITOR.dialog.add('media.audio', this.path + 'dialogs/audio.js');

CHANGE: contrance/Plugin/Media/webroot/ckeditor/media/plugin.js
L261-321

javascript
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Audio ///////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        editor.widgets.add('media.audio', {
            createFakeElement: function (realElement) {
                var fakeElement = editor.createFakeElement(realElement);
                var media = realElement.getAttribute('data-media-id');
                if (media) {
                    $.getJSON(editor.config.pluginConfig.media.dataUrl, {
                        id: media
                    }, function (data) {
                        fakeElement.setAttribute('src', editor.config.pluginConfig.media.uploadsUrl + '/' + data.row[data.uploadModel.alias][0].alias);
                    });
                }
                realElement.copyAttributes(fakeElement);
                fakeElement.renameNode('audio');
                fakeElement.insertAfter(realElement);
                fakeElement.removeAttributes(['class', 'width', 'height', 'align', 'alt', 'title']);
                realElement.remove();
            },
            updateFakeElement: function (fakeElement, callback) {
                var realElement = editor.restoreRealElement(fakeElement);
                callback.call(realElement);
                realElement.insertAfter(fakeElement);
                this.createFakeElement(realElement);
                fakeElement.remove();
            },
            createSkeleton: function (element) {
                return {
                    container: element,
                    media: element.getChild(0)
                }
            },
            allowedContent: 'div(media-audio);audio[data-media-id,controls]',
            upcast: function (element) {
                return element.name == 'div' && element.hasClass('media-audio');
            },
            dialog: 'media.audio',
            template: '<div class="media-audio">' +
                '<audio data-media-id controls>&nbsp;</audio>' +
                '</div>',
            init: function () {
                var skel = this.createSkeleton(this.element);
                this.setData('media', skel.media.getAttribute('data-media-id'));
                this.createFakeElement(skel.media);
            },
            data: function () {
                var _this = this;
                var skel = this.createSkeleton(this.element);
                this.updateFakeElement(skel.media, function (element) {
                    this.setAttribute('data-media-id', _this.data.media);
                });
            }
        });

        editor.ui.addButton('MediaAudio', {
            label: editor.lang.media.link.button,
            icon: this.path + 'icons/audio.png',
            command: 'media.audio'
        });

CHANGE: webroot/less/ckeditor.less
L114-117

less
audio {
  display: block;
  width: 100%;
}