Adding iframe

I have created a button to add iframe into the editor, but no way to select it and apply styles ( align left, right, center ... ) to it without adding text. Is there a way to do this?

[ipeychev]

Hey @trecreat,

This is normal and expected. When you add an iframe and select it, the selection does not match any of the selections AlloyEditor recognize.
If you look here you will see we recognize a few selections - link, text, etc. You will have to add another type of selection and to specify the buttons which should appear when the user selects something which matches your selection.

Hope that helps!

Thank you @ipeychev !
I tried by adding a new selection, but it seems not work, the toolbar for new selection does not appear

HTML code in the editor's content

<figure>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/jeWYdbi5CbM" frameborder="0" allowfullscreen></iframe>
    <div class="iframe-block"></div>
</figure>

in 'alloy-editor-all.js'

(function () {
    'use strict';

    var figureSelectionTest = function figureSelectionTest(payload) {
        var selectionData = payload.data.selectionData;

        return selectionData.element && selectionData.element.getName() === 'figure';
    };

    var linkSelectionTest = function linkSelectionTest(payload) {
        var nativeEditor = payload.editor.get('nativeEditor');

        return !nativeEditor.isSelectionEmpty() && new CKEDITOR.Link(nativeEditor).getFromSelection();
    };

    var imageSelectionTest = function imageSelectionTest(payload) {
        var selectionData = payload.data.selectionData;

        return selectionData.element && selectionData.element.getName() === 'img';
    };

    var textSelectionTest = function textSelectionTest(payload) {
        var nativeEditor = payload.editor.get('nativeEditor');

        var selectionEmpty = nativeEditor.isSelectionEmpty();

        var selectionData = payload.data.selectionData;

        return !selectionData.element && selectionData.region && !selectionEmpty;
    };

    var tableSelectionTest = function tableSelectionTest(payload) {
        var nativeEditor = payload.editor.get('nativeEditor');

        return !!new CKEDITOR.Table(nativeEditor).getFromSelection();
    };

    AlloyEditor.SelectionTest = {
        image: imageSelectionTest,
        link: linkSelectionTest,
        table: tableSelectionTest,
        text: textSelectionTest,
        figure: figureSelectionTest
    };
})();
'use strict';

invoke the static editable method of AlloyEditor

var advanced_toolbars = {
                add: {
                    buttons: ['images', 'attchments', 'embed', 'hline', 'table'],
                    tabIndex: 2
                },
                styles: {
                    selections: [
                       {
                            name: 'figure',
                            buttons: ['figureLeft', 'figureFull', 'figureRight'],
                            test: AlloyEditor.SelectionTest.figure
                        }, {
                            name: 'link',
                            buttons: ['linkEdit'],
                            test: AlloyEditor.SelectionTest.link
                        }, {
                            name: 'image',
                            buttons: ['imageLeft', 'imageCenter', 'imageRight'],
                            test: AlloyEditor.SelectionTest.image
                        }, {
                            name: 'text',
                            buttons: ['styles', 'bold', 'italic', 'underline', 'strike', 'quote', 'ol', 'ul', 'link', 'paragraphLeft', 'paragraphRight', 'paragraphCenter', 'paragraphJustify', 'removeFormat'],
                            test: AlloyEditor.SelectionTest.text
                        }, {
                            name: 'table',
                            buttons: [{
                                name: 'styles',
                                cfg: {
                                    styles: tableStyles
                                }
                            },'tableHeading', 'tableRow', 'tableColumn', 'tableCell', 'tableRemove'],
                            getArrowBoxClasses: AlloyEditor.SelectionGetArrowBoxClasses.table,
                            setPosition: AlloyEditor.SelectionSetPosition.table,
                            test: AlloyEditor.SelectionTest.table
                        }
                    ],
                    tabIndex: 1
                }
            };
var editor = AlloyEditor.editable('content-body-{{ content.id }}', {
    toolbars: advanced_toolbars
 });