3 Copyright (c) 2003-2017, 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-
2017,
<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
);