Спойлер Drupal 7
31 октября 2017 в 4:27
Сайт на Drupal 7 достался мне "по наследству". Там показ некоторого табличного контента был реализован через спойлер. Мне надо было добавить туда информацию, но в модуле CKEditor не оказалось этого самого спойлера. Ну я и решила добавить его. После этого, нормально отображающиеся спойлеры покинули меня. Выглядят как пустой текст, но если на них нажать, то они разворачиваются. Что делать?
- Блог
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Комментарии
1) Восстановить сайт из резервной копии
2) Дать нам больше подробностей, а лучше код. Код спойлера ДО, что конкретно вы делали в CKeditor
Я скопировала из локальной версии сайта сайта папочку "Spoiler" из директории \сайт\www\sites\all\modules\ckeditor\plugins в аналогичную папочку на хостинге. После этого в настройках ckeditor включила этот плагин, кнопочка появилась, а вот спойлеры пропали. На локальной версии сайта всё работает.
Когда открываешь инспектор он его показывает как
<div class="spoiler-title">
, но в правилах, в отличие от локальной версии сайта он показывает что берет CSS код из style.css, вместо spoiler.cssИ этот файл spoiler.css лежит ещё в папке темы.
Ещё такой вопрос. Может ли это быть связано с заменой версии php?
Восстановиться и потренироваться на тестовом сполере, например через https://www.drupal.org/project/node_clone
Код CSS
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
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 );
});
}
});
}
});
Заранее спасибо за помощь