3 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
4 For licensing, see LICENSE.md or http://ckeditor.com/license
6 <!--[if IE 8]><html class="ie8"><![endif]-->
7 <!--[if gt IE 8]><html><![endif]-->
8 <!--[if !IE]><!--><html><!--<![endif]-->
10 <meta charset=
"utf-8">
11 <title>Toolbar Configurator
</title>
12 <script src=
"../../ckeditor.js"></script>
14 if ( CKEDITOR.env.ie && CKEDITOR.env.version <
9 )
15 CKEDITOR.tools.enableHtml5Elements( document );
17 <link rel=
"stylesheet" href=
"lib/codemirror/codemirror.css">
18 <link rel=
"stylesheet" href=
"lib/codemirror/show-hint.css">
19 <link rel=
"stylesheet" href=
"lib/codemirror/neo.css">
20 <link rel=
"stylesheet" href=
"css/fontello.css">
21 <link rel=
"stylesheet" href=
"../css/samples.css">
25 <nav class=
"navigation-a">
26 <div class=
"grid-container">
27 <ul class=
"navigation-a-left grid-width-70">
28 <li><a href=
"http://ckeditor.com">Project Homepage
</a></li>
29 <li><a href=
"http://dev.ckeditor.com/">I found a bug
</a></li>
30 <li><a href=
"http://github.com/ckeditor/ckeditor-dev" class=
"icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub
</a></li>
32 <ul class=
"navigation-a-right grid-width-30">
33 <li><a href=
"http://ckeditor.com/blog-list">CKEditor Blog
</a></li>
38 <header class=
"header-a">
39 <div class=
"grid-container">
40 <h1 class=
"header-a-logo grid-width-30">
41 <a href=
"../index.html"><img src=
"../img/logo.png" alt=
"CKEditor Logo"></a>
43 <nav class=
"navigation-b grid-width-70">
45 <li><a href=
"../index.html" class=
"button-a">Start
</a></li>
46 <li><a href=
"index.html" class=
"button-a button-a-background">Toolbar configurator
</a></li>
53 <div class=
"adjoined-top">
54 <div class=
"grid-container">
55 <div class=
"content grid-width-100">
56 <div class=
"grid-container-nested">
57 <h1 class=
"grid-width-60">
59 <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>
62 <div class=
"grid-width-40 grid-switch-magic">
64 <span class=
"balloon-a balloon-a-se">Select configurator type
</span>
65 <input type=
"radio" name=
"radio" data-num=
"1" id=
"radio-basic" />
66 <input type=
"radio" name=
"radio" data-num=
"2" id=
"radio-advanced" />
67 <label data-for=
"1" for=
"radio-basic">Basic
</label>
68 <span class=
"switch-inner">
69 <span class=
"handler"></span>
71 <label data-for=
"2" for=
"radio-advanced">Advanced
</label>
78 <div class=
"adjoined-bottom">
79 <div class=
"grid-container">
80 <div class=
"grid-width-100">
81 <div class=
"editors-container">
82 <div id=
"editor-basic"></div>
83 <div id=
"editor-advanced"></div>
89 <div class=
"grid-container configurator">
90 <div class=
"content grid-width-100">
91 <div class=
"configurator">
93 <div id=
"toolbarModifierWrapper"></div>
99 <div id=
"help-content">
100 <div class=
"grid-container">
101 <div class=
"grid-width-100">
102 <h2>What Am I Doing Here?
</h2>
104 <div class=
"grid-container grid-container-nested">
106 <div class=
"grid-width-50">
107 <p>Arrange
<a href=
"http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbarGroups">toolbar groups
</a>, toggle
<a href=
"http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-removeButtons">button visibility
</a> according to your needs and get your toolbar configuration.
</p>
108 <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>
110 <div class=
"grid-width-50">
111 <p>Read more about different ways of
<a href=
"http://docs.ckeditor.com/#!/guide/dev_configuration">setting configuration
</a> and do not forget about
<strong>clearing browser cache
</strong>.
</p>
112 <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>
115 <div class=
"advanced" style=
"display: none;">
116 <div class=
"grid-width-50">
117 <p>With this code editor you can edit your
<a href=
"http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbar">toolbar configuration
</a> live.
</p>
118 <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>
120 <div class=
"grid-width-50">
121 <p>Read more about different ways of
<a href=
"http://docs.ckeditor.com/#!/guide/dev_configuration">setting configuration
</a> and do not forget about
<strong>clearing browser cache
</strong>.
</p>
126 <p class=
"grid-container grid-container-nested">
127 <button type=
"button" class=
"help-content-close grid-width-100 button-a button-a-background">Got it. Let's play!
</button>
134 <footer class=
"footer-a grid-container">
135 <p class=
"grid-width-100">
136 CKEditor
– The text editor for the Internet
– <a class=
"samples" href=
"http://ckeditor.com/">http://ckeditor.com
</a>
138 <p class=
"grid-width-100" id=
"copy">
139 Copyright
© 2003-
2016,
<a class=
"samples" href=
"http://cksource.com/">CKSource
</a> – Frederico Knabben. All rights reserved.
143 <script src=
"lib/codemirror/codemirror.js"></script>
144 <script src=
"lib/codemirror/javascript.js"></script>
145 <script src=
"lib/codemirror/show-hint.js"></script>
147 <script src=
"js/fulltoolbareditor.js"></script>
148 <script src=
"js/abstracttoolbarmodifier.js"></script>
149 <script src=
"js/toolbarmodifier.js"></script>
150 <script src=
"js/toolbartextmodifier.js"></script>
151 <script src=
"../js/sf.js"></script>
157 var mode = ( window.location.hash.substr(
1 ) === 'advanced' ) ? 'advanced' : 'basic',
158 configuratorSection = CKEDITOR.document.findOne( 'main
> .grid-container.configurator' ),
159 basicInstruction = CKEDITOR.document.findOne( '#help-content .basic' ),
160 advancedInstruction = CKEDITOR.document.findOne( '#help-content .advanced' ),
162 // Configurator mode switcher.
163 modeSwitchBasic = CKEDITOR.document.getById( 'radio-basic' ),
164 modeSwitchAdvanced = CKEDITOR.document.getById( 'radio-advanced' );
167 function updateSwitcher() {
168 if ( mode === 'advanced' ) {
169 modeSwitchAdvanced.$.checked = true;
171 modeSwitchBasic.$.checked = true;
177 CKEDITOR.document.getWindow().on( 'hashchange', function( e ) {
178 var hash = window.location.hash.substr(
1 );
179 if ( !( hash === 'advanced' || hash === 'basic' ) ) {
183 onToolbarsDone( mode );
186 CKEDITOR.document.getWindow().on( 'resize', function() {
187 updateToolbar( ( mode === 'basic' ? toolbarModifier : toolbarTextModifier )[ 'editorInstance' ] );
190 function onRefresh( modifier ) {
191 modifier = modifier || this;
193 if ( mode === 'basic' && modifier instanceof ToolbarConfigurator.ToolbarTextModifier ) {
197 // CodeMirror container becomes visible, so we need to refresh and to avoid rendering problems.
198 if ( mode === 'advanced' && modifier instanceof ToolbarConfigurator.ToolbarTextModifier ) {
199 modifier.codeContainer.refresh();
202 updateToolbar( modifier.editorInstance );
205 function updateToolbar( editor ) {
206 var editorContainer = editor.container;
208 // Not always editor is loaded.
209 if ( !editorContainer ) {
213 var displayStyle = editorContainer.getStyle( 'display' );
215 editorContainer.setStyle( 'display', 'block' );
217 var newHeight = editorContainer.getSize( 'height' );
219 var newMarginTop = parseInt( editorContainer.getComputedStyle( 'margin-top' ),
10 );
220 newMarginTop = ( isNaN( newMarginTop ) ?
0 : Number( newMarginTop ) );
222 var newMarginBottom = parseInt( editorContainer.getComputedStyle( 'margin-bottom' ),
10 );
223 newMarginBottom = ( isNaN( newMarginBottom ) ?
0 : Number( newMarginBottom ) );
225 var result = newHeight + newMarginTop + newMarginBottom;
227 editorContainer.setStyle( 'display', displayStyle );
229 editor.container.getAscendant( 'div' ).setStyle( 'height', result + 'px' );
232 var toolbarModifier = new ToolbarConfigurator.ToolbarModifier( 'editor-basic' );
235 toolbarModifier.init( onToolbarInit );
236 toolbarModifier.onRefresh = onRefresh;
238 CKEDITOR.document.getById( 'toolbarModifierWrapper' ).append( toolbarModifier.mainContainer );
240 var toolbarTextModifier = new ToolbarConfigurator.ToolbarTextModifier( 'editor-advanced' );
241 toolbarTextModifier.init( onToolbarInit );
242 toolbarTextModifier.onRefresh = onRefresh;
244 function onToolbarInit() {
245 if ( ++done ===
2 ) {
248 positionSticky.watch( CKEDITOR.document.findOne( '.toolbar' ), function() {
249 return mode === 'advanced';
254 function onToolbarsDone() {
255 if ( mode === 'basic' ) {
256 toggleModeBasic( false );
258 toggleModeAdvanced( false );
263 setTimeout( function() {
264 CKEDITOR.document.findOne( '.editors-container' ).addClass( 'active' );
265 CKEDITOR.document.findOne( '#toolbarModifierWrapper' ).addClass( 'active' );
269 CKEDITOR.document.getById( 'toolbarModifierWrapper' ).append( toolbarTextModifier.mainContainer );
271 function toogleModeSwitch( onElement, offElement, onModifier, offModifier ) {
272 onElement.addClass( 'fancy-button-active' );
273 offElement.removeClass( 'fancy-button-active' );
276 offModifier.hideUI();
279 function toggleModeBasic( callOnRefresh ) {
280 callOnRefresh = ( callOnRefresh !== false );
282 window.location.hash = '#basic';
283 toogleModeSwitch( modeSwitchBasic, modeSwitchAdvanced, toolbarModifier, toolbarTextModifier );
285 configuratorSection.removeClass( 'freed-width' );
286 basicInstruction.show();
287 advancedInstruction.hide();
289 callOnRefresh && onRefresh( toolbarModifier );
292 function toggleModeAdvanced( callOnRefresh ) {
293 callOnRefresh = ( callOnRefresh !== false );
295 window.location.hash = '#advanced';
296 toogleModeSwitch( modeSwitchAdvanced, modeSwitchBasic, toolbarTextModifier, toolbarModifier );
298 configuratorSection.addClass( 'freed-width' );
299 advancedInstruction.show();
300 basicInstruction.hide();
302 callOnRefresh && onRefresh( toolbarTextModifier );
305 modeSwitchBasic.on( 'click', toggleModeBasic );
306 modeSwitchAdvanced.on( 'click', toggleModeAdvanced );
309 // Position:sticky for the toolbar.
312 // Will make elements behave like they were styled with position:sticky.
313 var positionSticky = {
315 // element: CKEDITOR.dom.element, // Element which will float.
316 // placeholder: CKEDITOR.dom.element, // Placeholder which is place to prevent page bounce.
317 // isFixed: boolean // Whether element float now.
323 staticContainer: null,
326 var element = CKEDITOR.dom.element.createFromHtml(
327 '
<div class=
"staticContainer">' +
328 '
<div class=
"grid-container" >' +
329 '
<div class=
"grid-width-100">' +
330 '
<div class=
"inner"></div>' +
335 this.staticContainer = element.findOne( '.inner' );
337 CKEDITOR.document.getBody().append( element );
340 watch: function( element, preventFunc ) {
343 placeholder: new CKEDITOR.dom.element( 'div' ),
345 preventFunc: preventFunc
349 checkAll: function() {
350 for ( var i =
0; i < this.watched.length; i++ ) {
351 this.check( this.watched[ i ] );
355 check: function( element ) {
356 var isFixed = element.isFixed;
357 var shouldBeFixed = this.shouldBeFixed( element );
359 // Nothing to be done.
360 if ( isFixed === shouldBeFixed ) {
364 var placeholder = element.placeholder;
369 element.element.insertBefore( placeholder );
370 placeholder.remove();
372 element.element.removeStyle( 'margin' );
374 this.active.splice( CKEDITOR.tools.indexOf( this.active, element ),
1 );
378 placeholder.setStyle( 'width', element.element.getSize( 'width' ) + 'px' );
379 placeholder.setStyle( 'height', element.element.getSize( 'height' ) + 'px' );
380 placeholder.setStyle( 'margin-bottom', element.element.getComputedStyle( 'margin-bottom' ) );
381 placeholder.setStyle( 'display', element.element.getComputedStyle( 'display' ) );
382 placeholder.insertAfter( element.element );
384 this.staticContainer.append( element.element );
386 this.active.push( element );
389 element.isFixed = !element.isFixed;
392 shouldBeFixed: function( element ) {
393 if ( element.preventFunc && element.preventFunc() ) {
397 // If element is already fixed we are checking it's placeholder.
398 var related = ( element.isFixed ? element.placeholder : element.element ),
399 clientRect = related.$.getBoundingClientRect(),
400 staticHeight = this.staticContainer.getSize('height' ),
401 elemHeight = element.element.getSize( 'height' );
403 if ( element.isFixed ) {
404 return ( clientRect.top + elemHeight < staticHeight );
406 return ( clientRect.top < staticHeight );
411 positionSticky.init();
413 CKEDITOR.document.getWindow().on( 'scroll',
414 new CKEDITOR.tools.eventsBuffer(
100, positionSticky.checkAll, positionSticky ).input
417 // Make the toolbar sticky.
418 positionSticky.watch( CKEDITOR.document.findOne( '.editors-container' ) );
420 // Help button and help-content.
422 var helpButton = CKEDITOR.document.getById( 'help' ),
423 helpContent = CKEDITOR.document.getById( 'help-content' );
425 // Don't show help button on IE8 because it's unsupported by Pico Modal.
426 if ( CKEDITOR.env.ie && CKEDITOR.env.version ==
8 ) {
429 // Display help modal when the button is clicked.
430 helpButton.on( 'click', function( evt ) {
432 // Clone modal content from DOM.
433 content: helpContent.getHtml(),
435 afterCreate: function( modal ) {
436 // Enable modal content button to close the modal.
437 new CKEDITOR.dom.element( modal.modalElem() ).findOne( '.help-content-close' ).once( 'click', modal.close );