2022-12-19 22:22:19 +02:00
<!DOCTYPE html>
<!--
Copyright (c) 2003 - 2020, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor - oss - license
-->
<!-- [if IE 8]><html class="ie8"><![endif] -->
<!-- [if gt IE 8]><html><![endif] -->
<!-- [if !IE]><! --> < html lang = "en" > <!-- <![endif] -->
< head >
< meta charset = "utf-8" >
< title > Toolbar Configurator< / title >
< script src = "../../ckeditor.js" > < / script >
< script >
if ( CKEDITOR . env . ie && CKEDITOR . env . version < 9 )
CKEDITOR . tools . enableHtml5Elements ( document ) ;
< / script >
< link rel = "stylesheet" href = "lib/codemirror/codemirror.css" >
< link rel = "stylesheet" href = "lib/codemirror/show-hint.css" >
< link rel = "stylesheet" href = "lib/codemirror/neo.css" >
< link rel = "stylesheet" href = "css/fontello.css" >
< link rel = "stylesheet" href = "../css/samples.css" >
< meta name = "description" content = "Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities." >
< / head >
< body id = "toolbar" >
< nav class = "navigation-a" >
< div class = "grid-container" >
< ul class = "navigation-a-left grid-width-70" >
< li > < a href = "https://ckeditor.com/ckeditor-4/" > Project Homepage< / a > < / li >
< li > < a href = "https://github.com/ckeditor/ckeditor4/issues" > I found a bug< / a > < / li >
< li > < a href = "https://github.com/ckeditor/ckeditor4" class = "icon-pos-right icon-navigation-a-github" > Fork CKEditor on GitHub< / a > < / li >
< / ul >
< ul class = "navigation-a-right grid-width-30" >
< li > < a href = "https://ckeditor.com/blog/" > CKEditor Blog< / a > < / li >
< / ul >
< / div >
< / nav >
< header class = "header-a" >
< div class = "grid-container" >
< h1 class = "header-a-logo grid-width-30" >
< a href = "../index.html" > < img src = "../img/logo.svg" onerror = "this.src='../img/logo.png'; this.onerror=null;" alt = "CKEditor Logo" > < / a >
< / h1 >
< nav class = "navigation-b grid-width-70" >
< ul >
< li > < a href = "../index.html" class = "button-a" > Start< / a > < / li >
< li > < a href = "index.html" class = "button-a button-a-background" > Toolbar configurator< / a > < / li >
< / ul >
< / nav >
< / div >
< / header >
< main >
< div class = "adjoined-top" >
< div class = "grid-container" >
< div class = "content grid-width-100" >
< div class = "grid-container-nested" >
< h1 class = "grid-width-60" >
Toolbar Configurator
< a href = "#help-content" type = "button" title = "Configurator help" id = "help" class = "button-a button-a-background button-a-no-text icon-pos-left icon-question-mark" > Help< / a >
< / h1 >
< div class = "grid-width-40 grid-switch-magic" >
< div class = "switch" >
< span class = "balloon-a balloon-a-se" > Select configurator type< / span >
< input type = "radio" name = "radio" data-num = "1" id = "radio-basic" / >
< input type = "radio" name = "radio" data-num = "2" id = "radio-advanced" / >
< label data-for = "1" for = "radio-basic" > Basic< / label >
< span class = "switch-inner" >
< span class = "handler" > < / span >
< / span >
< label data-for = "2" for = "radio-advanced" > Advanced< / label >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "adjoined-bottom" >
< div class = "grid-container" >
< div class = "grid-width-100" >
< div class = "editors-container" >
< div id = "editor-basic" > < / div >
< div id = "editor-advanced" > < / div >
< / div >
< / div >
< / div >
< / div >
< div class = "grid-container configurator" >
< div class = "content grid-width-100" >
< div class = "configurator" >
< div >
< div id = "toolbarModifierWrapper" > < / div >
< / div >
< / div >
< / div >
< / div >
< div id = "help-content" >
< div class = "grid-container" >
< div class = "grid-width-100" >
< h2 > What Am I Doing Here?< / h2 >
< div class = "grid-container grid-container-nested" >
< div class = "basic" >
< div class = "grid-width-50" >
< p > Arrange < a href = "https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-toolbarGroups" > toolbar groups< / a > , toggle < a href = "https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-removeButtons" > button visibility< / a > according to your needs and get your toolbar configuration.< / p >
< p > You can replace the content of the < a href = "../../config.js" > < code > config.js< / code > < / a > file with the generated configuration. If you already set some configuration options you will need to merge both configurations.< / p >
< / div >
< div class = "grid-width-50" >
< p > Read more about different ways of < a href = "https://ckeditor.com/docs/ckeditor4/latest/guide/dev_configuration.html" > setting configuration< / a > and do not forget about < strong > clearing browser cache< / strong > .< / p >
< p > Arranging toolbar groups is the recommended way of configuring the toolbar, but if you need more freedom you can use the < a href = "#advanced" > advanced configurator< / a > .< / p >
< / div >
< / div >
< div class = "advanced" style = "display: none;" >
< div class = "grid-width-50" >
< p > With this code editor you can edit your < a href = "https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-toolbar" > toolbar configuration< / a > live.< / p >
< p > You can replace the content of the < a href = "../../config.js" > < code > config.js< / code > < / a > file with the generated configuration. If you already set some configuration options you will need to merge both configurations.< / p >
< / div >
< div class = "grid-width-50" >
< p > Read more about different ways of < a href = "https://ckeditor.com/docs/ckeditor4/latest/guide/dev_configuration.html" > setting configuration< / a > and do not forget about < strong > clearing browser cache< / strong > .< / p >
< / div >
< / div >
< / div >
< p class = "grid-container grid-container-nested" >
< button type = "button" class = "help-content-close grid-width-100 button-a button-a-background" > Got it. Let's play!< / button >
< / p >
< / div >
< / div >
< / div >
< / main >
< footer class = "footer-a grid-container" >
< p class = "grid-width-100" >
CKEditor – The text editor for the Internet – < a class = "samples" href = "https://ckeditor.com/" > https://ckeditor.com< / a >
< / p >
< p class = "grid-width-100" id = "copy" >
Copyright © 2003-2020, < a class = "samples" href = "https://cksource.com/" > CKSource< / a > – Frederico Knabben. All rights reserved.
< / p >
< / footer >
< script src = "lib/codemirror/codemirror.js" > < / script >
< script src = "lib/codemirror/javascript.js" > < / script >
< script src = "lib/codemirror/show-hint.js" > < / script >
< script src = "js/fulltoolbareditor.js" > < / script >
< script src = "js/abstracttoolbarmodifier.js" > < / script >
< script src = "js/toolbarmodifier.js" > < / script >
< script src = "js/toolbartextmodifier.js" > < / script >
< script src = "../js/sf.js" > < / script >
< script >
( function ( ) {
'use strict' ;
2023-04-08 18:14:19 +03:00
var mode = ( window . location . hash . substr ( 1 ) == 'advanced' ) ? 'advanced' : 'basic' ,
2022-12-19 22:22:19 +02:00
configuratorSection = CKEDITOR . document . findOne ( 'main > .grid-container.configurator' ) ,
basicInstruction = CKEDITOR . document . findOne ( '#help-content .basic' ) ,
advancedInstruction = CKEDITOR . document . findOne ( '#help-content .advanced' ) ,
// Configurator mode switcher.
modeSwitchBasic = CKEDITOR . document . getById ( 'radio-basic' ) ,
modeSwitchAdvanced = CKEDITOR . document . getById ( 'radio-advanced' ) ;
// Initial setup
function updateSwitcher ( ) {
2023-04-08 18:14:19 +03:00
if ( mode == 'advanced' ) {
2022-12-19 22:22:19 +02:00
modeSwitchAdvanced . $ . checked = true ;
} else {
modeSwitchBasic . $ . checked = true ;
}
}
updateSwitcher ( ) ;
CKEDITOR . document . getWindow ( ) . on ( 'hashchange' , function ( e ) {
var hash = window . location . hash . substr ( 1 ) ;
2023-04-08 18:14:19 +03:00
if ( ! ( hash == 'advanced' || hash == 'basic' ) ) {
2022-12-19 22:22:19 +02:00
return ;
}
mode = hash ;
onToolbarsDone ( mode ) ;
} ) ;
CKEDITOR . document . getWindow ( ) . on ( 'resize' , function ( ) {
2023-04-08 18:14:19 +03:00
updateToolbar ( ( mode == 'basic' ? toolbarModifier : toolbarTextModifier ) [ 'editorInstance' ] ) ;
2022-12-19 22:22:19 +02:00
} ) ;
function onRefresh ( modifier ) {
modifier = modifier || this ;
2023-04-08 18:14:19 +03:00
if ( mode == 'basic' && modifier instanceof ToolbarConfigurator . ToolbarTextModifier ) {
2022-12-19 22:22:19 +02:00
return ;
}
// CodeMirror container becomes visible, so we need to refresh and to avoid rendering problems.
2023-04-08 18:14:19 +03:00
if ( mode == 'advanced' && modifier instanceof ToolbarConfigurator . ToolbarTextModifier ) {
2022-12-19 22:22:19 +02:00
modifier . codeContainer . refresh ( ) ;
}
updateToolbar ( modifier . editorInstance ) ;
}
function updateToolbar ( editor ) {
var editorContainer = editor . container ;
// Not always editor is loaded.
if ( ! editorContainer ) {
return ;
}
var displayStyle = editorContainer . getStyle ( 'display' ) ;
editorContainer . setStyle ( 'display' , 'block' ) ;
var newHeight = editorContainer . getSize ( 'height' ) ;
var newMarginTop = parseInt ( editorContainer . getComputedStyle ( 'margin-top' ) , 10 ) ;
newMarginTop = ( isNaN ( newMarginTop ) ? 0 : Number ( newMarginTop ) ) ;
var newMarginBottom = parseInt ( editorContainer . getComputedStyle ( 'margin-bottom' ) , 10 ) ;
newMarginBottom = ( isNaN ( newMarginBottom ) ? 0 : Number ( newMarginBottom ) ) ;
var result = newHeight + newMarginTop + newMarginBottom ;
editorContainer . setStyle ( 'display' , displayStyle ) ;
editor . container . getAscendant ( 'div' ) . setStyle ( 'height' , result + 'px' ) ;
}
var toolbarModifier = new ToolbarConfigurator . ToolbarModifier ( 'editor-basic' ) ;
var done = 0 ;
toolbarModifier . init ( onToolbarInit ) ;
toolbarModifier . onRefresh = onRefresh ;
CKEDITOR . document . getById ( 'toolbarModifierWrapper' ) . append ( toolbarModifier . mainContainer ) ;
var toolbarTextModifier = new ToolbarConfigurator . ToolbarTextModifier ( 'editor-advanced' ) ;
toolbarTextModifier . init ( onToolbarInit ) ;
toolbarTextModifier . onRefresh = onRefresh ;
function onToolbarInit ( ) {
2023-04-08 18:14:19 +03:00
if ( ++ done == 2 ) {
2022-12-19 22:22:19 +02:00
onToolbarsDone ( ) ;
positionSticky . watch ( CKEDITOR . document . findOne ( '.toolbar' ) , function ( ) {
2023-04-08 18:14:19 +03:00
return mode == 'advanced' ;
2022-12-19 22:22:19 +02:00
} ) ;
}
}
function onToolbarsDone ( ) {
2023-04-08 18:14:19 +03:00
if ( mode == 'basic' ) {
2022-12-19 22:22:19 +02:00
toggleModeBasic ( false ) ;
} else {
toggleModeAdvanced ( false ) ;
}
updateSwitcher ( ) ;
setTimeout ( function ( ) {
CKEDITOR . document . findOne ( '.editors-container' ) . addClass ( 'active' ) ;
CKEDITOR . document . findOne ( '#toolbarModifierWrapper' ) . addClass ( 'active' ) ;
} , 200 ) ;
}
CKEDITOR . document . getById ( 'toolbarModifierWrapper' ) . append ( toolbarTextModifier . mainContainer ) ;
function toogleModeSwitch ( onElement , offElement , onModifier , offModifier ) {
onElement . addClass ( 'fancy-button-active' ) ;
offElement . removeClass ( 'fancy-button-active' ) ;
onModifier . showUI ( ) ;
offModifier . hideUI ( ) ;
}
function toggleModeBasic ( callOnRefresh ) {
2023-04-08 18:14:19 +03:00
callOnRefresh = ( callOnRefresh != false ) ;
2022-12-19 22:22:19 +02:00
mode = 'basic' ;
window . location . hash = '#basic' ;
toogleModeSwitch ( modeSwitchBasic , modeSwitchAdvanced , toolbarModifier , toolbarTextModifier ) ;
configuratorSection . removeClass ( 'freed-width' ) ;
basicInstruction . show ( ) ;
advancedInstruction . hide ( ) ;
callOnRefresh && onRefresh ( toolbarModifier ) ;
}
function toggleModeAdvanced ( callOnRefresh ) {
2023-04-08 18:14:19 +03:00
callOnRefresh = ( callOnRefresh != false ) ;
2022-12-19 22:22:19 +02:00
mode = 'advanced' ;
window . location . hash = '#advanced' ;
toogleModeSwitch ( modeSwitchAdvanced , modeSwitchBasic , toolbarTextModifier , toolbarModifier ) ;
configuratorSection . addClass ( 'freed-width' ) ;
advancedInstruction . show ( ) ;
basicInstruction . hide ( ) ;
callOnRefresh && onRefresh ( toolbarTextModifier ) ;
}
modeSwitchBasic . on ( 'click' , toggleModeBasic ) ;
modeSwitchAdvanced . on ( 'click' , toggleModeAdvanced ) ;
//
// Position:sticky for the toolbar.
//
// Will make elements behave like they were styled with position:sticky.
var positionSticky = {
// Store object: {
// element: CKEDITOR.dom.element, // Element which will float.
// placeholder: CKEDITOR.dom.element, // Placeholder which is place to prevent page bounce.
// isFixed: boolean // Whether element float now.
// }
watched : [ ] ,
active : [ ] ,
staticContainer : null ,
init : function ( ) {
var element = CKEDITOR . dom . element . createFromHtml (
'<div class="staticContainer">' +
'<div class="grid-container" >' +
'<div class="grid-width-100">' +
'<div class="inner"></div>' +
'</div>' +
'</div>' +
'</div>' ) ;
this . staticContainer = element . findOne ( '.inner' ) ;
CKEDITOR . document . getBody ( ) . append ( element ) ;
} ,
watch : function ( element , preventFunc ) {
this . watched . push ( {
element : element ,
placeholder : new CKEDITOR . dom . element ( 'div' ) ,
isFixed : false ,
preventFunc : preventFunc
} ) ;
} ,
checkAll : function ( ) {
for ( var i = 0 ; i < this . watched . length ; i ++ ) {
this . check ( this . watched [ i ] ) ;
}
} ,
check : function ( element ) {
var isFixed = element . isFixed ;
var shouldBeFixed = this . shouldBeFixed ( element ) ;
// Nothing to be done.
2023-04-08 18:14:19 +03:00
if ( isFixed == shouldBeFixed ) {
2022-12-19 22:22:19 +02:00
return ;
}
var placeholder = element . placeholder ;
if ( isFixed ) {
// Unfixing.
element . element . insertBefore ( placeholder ) ;
placeholder . remove ( ) ;
element . element . removeStyle ( 'margin' ) ;
this . active . splice ( CKEDITOR . tools . indexOf ( this . active , element ) , 1 ) ;
} else {
// Fixing.
placeholder . setStyle ( 'width' , element . element . getSize ( 'width' ) + 'px' ) ;
placeholder . setStyle ( 'height' , element . element . getSize ( 'height' ) + 'px' ) ;
placeholder . setStyle ( 'margin-bottom' , element . element . getComputedStyle ( 'margin-bottom' ) ) ;
placeholder . setStyle ( 'display' , element . element . getComputedStyle ( 'display' ) ) ;
placeholder . insertAfter ( element . element ) ;
this . staticContainer . append ( element . element ) ;
this . active . push ( element ) ;
}
element . isFixed = ! element . isFixed ;
} ,
shouldBeFixed : function ( element ) {
if ( element . preventFunc && element . preventFunc ( ) ) {
return false ;
}
// If element is already fixed we are checking it's placeholder.
var related = ( element . isFixed ? element . placeholder : element . element ) ,
clientRect = related . $ . getBoundingClientRect ( ) ,
staticHeight = this . staticContainer . getSize ( 'height' ) ,
elemHeight = element . element . getSize ( 'height' ) ;
if ( element . isFixed ) {
return ( clientRect . top + elemHeight < staticHeight ) ;
} else {
return ( clientRect . top < staticHeight ) ;
}
}
} ;
positionSticky . init ( ) ;
CKEDITOR . document . getWindow ( ) . on ( 'scroll' ,
CKEDITOR . tools . eventsBuffer ( 100 , positionSticky . checkAll , positionSticky ) . input
) ;
// Make the toolbar sticky.
positionSticky . watch ( CKEDITOR . document . findOne ( '.editors-container' ) ) ;
// Help button and help-content.
( function ( ) {
var helpButton = CKEDITOR . document . getById ( 'help' ) ,
helpContent = CKEDITOR . document . getById ( 'help-content' ) ;
// Don't show help button on IE8 because it's unsupported by Pico Modal.
if ( CKEDITOR . env . ie && CKEDITOR . env . version == 8 ) {
helpButton . hide ( ) ;
} else {
// Display help modal when the button is clicked.
helpButton . on ( 'click' , function ( evt ) {
SF . modal ( {
// Clone modal content from DOM.
content : helpContent . getHtml ( ) ,
afterCreate : function ( modal ) {
// Enable modal content button to close the modal.
new CKEDITOR . dom . element ( modal . modalElem ( ) ) . findOne ( '.help-content-close' ) . once ( 'click' , modal . close ) ;
}
} ) . show ( ) ;
} ) ;
}
} ) ( ) ;
} ) ( ) ;
< / script >
< / body >
< / html >
