Спойлер Drupal 7

Главные вкладки

Аватар пользователя ShegoYouko ShegoYouko 31 октября 2017 в 4:27

Сайт на Drupal 7 достался мне "по наследству". Там показ некоторого табличного контента был реализован через спойлер. Мне надо было добавить туда информацию, но в модуле CKEditor не оказалось этого самого спойлера. Ну я и решила добавить его. После этого, нормально отображающиеся спойлеры покинули меня. Выглядят как пустой текст, но если на них нажать, то они разворачиваются. Что делать?

Комментарии

Аватар пользователя ivnish ivnish 31 октября 2017 в 5:55

1) Восстановить сайт из резервной копии
2) Дать нам больше подробностей, а лучше код. Код спойлера ДО, что конкретно вы делали в CKeditor

Аватар пользователя ShegoYouko ShegoYouko 31 октября 2017 в 7:21

Я скопировала из локальной версии сайта сайта папочку "Spoiler" из директории \сайт\www\sites\all\modules\ckeditor\plugins в аналогичную папочку на хостинге. После этого в настройках ckeditor включила этот плагин, кнопочка появилась, а вот спойлеры пропали. На локальной версии сайта всё работает.
Когда открываешь инспектор он его показывает как <div class="spoiler-title">, но в правилах, в отличие от локальной версии сайта он показывает что берет CSS код из style.css, вместо spoiler.css
И этот файл spoiler.css лежит ещё в папке темы.

Аватар пользователя ShegoYouko ShegoYouko 31 октября 2017 в 7:25

Код CSS

/* spoiler */
div.spoiler {
        padding: 5px;
        line-height: 1.6;
}

div.spoiler div.spoiler-title {
        color: #000000;
        font-size: 12px;
        font-weight: bold;
        padding: 4px 7px;
        border: 1px solid #bbbbbb;
        border-bottom-color: #999999;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
        box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
        background: #cfd1cf;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#cfd1cf));
        background-image: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
        background-image: -webkit-linear-gradient(top, #f5f5f5, #e5e5e5);
        background-image: -o-linear-gradient(top, #f5f5f5, #e5e5e5);
        background-image: -ms-linear-gradient(top, #f5f5f5, #e5e5e5);
        background-image: linear-gradient(top, #f5f5f5, #e5e5e5);
        filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f5f5f5', endColorstr='#cfd1cf');
        cursor: pointer;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
}

div.spoiler div.spoiler-title div.spoiler-toggle {
        display: inline-block;
        width: 11px;
        height: 11px;
        line-height: 14px;
        margin-left: 4px;
        margin-right: 6px;
        cursor: pointer;
        -webkit-user-modify: read-only;
}

div.spoiler div.spoiler-title div.hide-icon {
        background: url('../images/minus.png') no-repeat scroll left center transparent;
}

div.spoiler div.spoiler-title div.show-icon {
        background: url('../images/plus.png') no-repeat scroll left center transparent;
}

div.spoiler div.spoiler-content {
        font-size: 13px;
        border: 1px solid #bbbbbb;
        border-top: 0px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        background: none repeat scroll 0 0 #F5F5F5;
        padding: 4px 10px;
}

Код JS

CKEDITOR.plugins.add( 'spoiler' , {
        lang: 'en,ru',
        icons: 'spoiler',
        init: function( editor ) {
                if ( editor.blockless )
                        return;

                function registerCssFile( url ) {
                        var head = editor.document.getHead();
                        var link = editor.document.createElement( 'link' , {
                                attributes: {
                                        type: 'text/css',
                                        rel: 'stylesheet',
                                        href: url
                                }
                        } );
                        head.append( link );
                }

                function toggle( element ) {
                        element.setStyle( 'display' , ( ( element.getStyle('display') == 'none' ) ? '' : 'none' ) );
                }

                function toggleClass( element, className ) {
                        if ( element.hasClass( className ) ) {
                                element.removeClass( className );
                        }
                        else {
                                element.addClass( className );
                        }
                }

                function setSwitcher( element )
                {
                        toggleClass( element, 'hide-icon' );
                        toggleClass( element, 'show-icon' );
                        var content = element.getParent().getParent().getLast();
                        toggle( content );
                }

                function createSpoiler() {
                        var spoilerContainer = editor.document.createElement( 'div', { 'attributes' : { 'class': 'spoiler' } } );
                        var spoilerToggle = editor.document.createElement( 'div', { 'attributes' : { 'class': 'spoiler-toggle hide-icon' } } );
                        var spoilerTitle = editor.document.createElement( 'div', { 'attributes' : { 'class': 'spoiler-title' } } );
                        var spoilerContent = editor.document.createElement( 'div', { 'attributes' : { 'class': 'spoiler-content' } } );
                        spoilerToggle.on( 'click', function( event ) {
                                setSwitcher( event.sender );
                        });
                        spoilerTitle.append( spoilerToggle );
                        spoilerTitle.appendHtml( '<br>' );
                        spoilerContent.appendHtml( '<p><br></p>' );
                        spoilerContainer.append( spoilerTitle );
                        spoilerContainer.append( spoilerContent );
                        return spoilerContainer;
                }

                function getDivWithClass( className )
                {
                        var divs =  editor.document.getElementsByTag( 'div' ),
                                len = divs.count(),
                                elements = [],
                                element;
                        for ( var i = 0; i < len; ++i ) {
                                element = divs.getItem( i );
                                if ( element.hasClass( className ) ) {
                                        elements.push( element );
                                }
                        }
                        return elements;
                }

                editor.addCommand( 'spoiler', {
                        exec: function( editor ) {
                                var spoiler = createSpoiler();
                                editor.insertElement( spoiler );
                        },
                        allowedContent: 'div{*}(*);br'
                });

                editor.ui.addButton( 'Spoiler', {
                        label: editor.lang.spoiler.toolbar,
                        icon : this.path + 'icons/spoiler.png',
                        command: 'spoiler',
                        toolbar: 'insert'
                });

                var path = this.path;
                editor.on( 'mode', function() {
                        if ( this.mode != 'wysiwyg' ) {
                                return;
                        }
                        registerCssFile( path + 'css/spoiler.css' );
                        var elements = getDivWithClass( 'spoiler-toggle' ),
                                len = elements.length;
                        for ( var i = 0; i < len; ++i )
                        {
                                elements[i].on( 'click', function( event ) {
                                        setSwitcher( event.sender );
                                });
                        }
                });
        }
});

Заранее спасибо за помощь