Spaces:
Running
Running
(function($) { | |
CKEDITOR.plugins.add( 'spoiler' , { | |
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( 'Spoiler' ); | |
spoilerContent.appendHtml( '<p>'+gethtml4()+'<br></p>' ); | |
spoilerContainer.append( spoilerTitle ); | |
spoilerContainer.append( spoilerContent ); | |
return spoilerContainer; | |
} | |
function gethtml4() | |
{ | |
range = editor.getSelection().getRanges()[ 0 ], | |
el = editor.document.createElement( 'div' ); | |
el.append( range.cloneContents() ); | |
return el.getHtml(); | |
} | |
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: 'Spoiler', | |
command: 'spoiler', | |
toolbar: 'insert,99', | |
group: '44', | |
icon: this.path + 'icons/spoiler.png' | |
}); | |
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 ); | |
}); | |
} | |
}); | |
} | |
}); | |
})(jQuery) | |