concrete5 v8 で Lightboxってどう使うんだろう・・？

前略

鴉河雛です

というわけで、タイトルの通りconcrete5 v8でLightboxを入れる方法ですが・・

パッと見た感じCKEditor上にそれっぽいのがありません。。

Redactorの時はどうやって入れてたのか・・・思い出せないですがｗ

とりあえず画像のLightBoxだけでも使えないと不便（？）だということで、

CKEditorのプラグインでも作れないものかと思いましたが、なにしろ私はプログラムがわからないので四苦八苦ｗ

(最初はconcrete5とCKEditorのdocsをみてましたがわからず・・)

(function() {
    CKEDITOR.plugins.add( 'lightbox', {
        init: function( editor ){
            editor.addCommand( 'insertLightbox', {
                exec : function( editor ) {

                    var element = editor.getSelection().getStartElement();
                    var image_url= element.$.childNodes["0"].currentSrc;
                    var image_alt= element.$.childNodes["0"].alt;
                    var image_height =element.$.childNodes["0"].attributes[3].value;
                    var image_width =element.$.childNodes["0"].attributes[4].value;
                    var element = CKEDITOR.dom.element.createFromHtml('<a data-concrete5-link-lightbox="image" href="' + image_url + '"><img alt="' + image_alt + '" height="' + image_height + '" width="' + image_width + '" src="' + image_url + '" />');
                    editor.insertElement(element);
                }
            });

            editor.ui.addButton( 'lightbox', {
                label: 'InsertLightBox', 
                command: 'insertLightbox',
                toolbar: 'insert'
            });
        }
    });
})();

で、とりあえずはボタン一つで画像のLightBoxを入れられるようになりました。

とまぁ、ソースが汚いとかエラー処理がないとかそんなのは置いておくとして、

ボタンを押したら、url/alt/height/widthを取得して、既存と置き換える。

そんな感じです。

置き換えた後は、画像のwidgetが反応しなくなりましたが、保存すればちゃんと戻りました。

正しいとかそんなのはわかりませんが(絶対違うけどw)とりあえずしばらくはこれでやっていきます。

では、また。

[ ](‘ + image_url + ‘)