CKEditor Ecosystem Documentation
Search
Contribute to this guideReport an issue
Home/CKEditor 4/Examples

Shared Toolbar and Bottom Bar Documentation

The optional Shared Space plugin makes it possible to share the same editor toolbar and bottom bar among several CKEditor 4 instances.

Classic Editors Sharing Toolbar and Bottom Bar

For each editor instance you can define the elements that will be shared. In the example below two classic editors are combined, sharing the same toolbar and bottom bar. This is possible thanks to the config.sharedSpaces configuration setting.

Inline Editor with Shared Toolbar and Bottom Bar

Inline editors can also be configured to share the toolbar and bottom bar (it is in fact possible to use a mix of classic and inline editors together as well). One of most interesting use cases for the Shared Space plugin is the possibility of providing an improved fixed user interface for the inline editor:

Saturn V carrying Apollo 11 Apollo 11

Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.

Armstrong spent about three and a half two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5 kg) of lunar material for return to Earth. A third member of the mission, Michael Collins, piloted the command spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.

There are a few important benefits of using the Shared Spaces plugin to provide inline editor with fixed UI instead of using the Div Editing Area plugin for the same purpose:

  • No additional nested <div> elements surrounding the editing area are needed — the original element that stores the content is used for editing. This means that styles applied to content after it is loaded into the editor stay exactly the same, providing real WYSIWYG experience with no surprises.
  • The Auto Grow feature is not really needed, as the size of container can be easily controlled with CSS.

Related Features

Get Sample Source Code

  • Classic editors sharing toolbar and bottom bar 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Classic editors sharing toolbar and bottom bar</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <div id="top">
    <!-- This div will handle all toolbars. -->
  </div>
  <div style="height: 460px; overflow: auto; border: 1px solid #afafaf; padding: 10px 10px; background: #fff;">

    <div style="width: 69%; float: left;">
      <textarea id="editor1" name="editor1">&lt;p&gt;&lt;strong&gt;Barcelona&lt;/strong&gt; (
&lt;small&gt;English&lt;/small&gt;
&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English"&gt;/&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;b&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;ɑr&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;s&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;ɨ&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;ˈ&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;l&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;oʊ&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;n&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English#Key"&gt;ə&lt;/a&gt;&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_English"&gt;/&lt;/a&gt;,
&lt;small&gt;Catalan:&amp;nbsp;&lt;/small&gt;
&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_Catalan"&gt;[bərsəˈɫonə]&lt;/a&gt;,
&lt;small&gt;Spanish:&amp;nbsp;&lt;/small&gt;
&lt;a href="http://en.wikipedia.org/wiki/Help:IPA_for_Spanish"&gt;[bar&amp;theta;eˈlona]&lt;/a&gt;) is the capital city of the
&lt;a href="http://en.wikipedia.org/wiki/Autonomous_communities_of_Spain"&gt;autonomous community&lt;/a&gt; of &lt;a href="http://en.wikipedia.org/wiki/Catalonia"&gt;Catalonia&lt;/a&gt; in
&lt;a href="http://en.wikipedia.org/wiki/Spain"&gt;Spain&lt;/a&gt; and the country&amp;#39;s 2nd largest city, with a population of 1.6 million within its administrative limits.
&lt;/p&gt;

&lt;p&gt;Its &lt;a href="http://en.wikipedia.org/wiki/Urban_area"&gt;urban area&lt;/a&gt; extends beyond the administrative city limits with a population of around 4.5 million people, being the
&lt;a href="http://en.wikipedia.org/wiki/Largest_urban_areas_of_the_European_Union"&gt;sixth-most populous urban area&lt;/a&gt; in the
&lt;a href="http://en.wikipedia.org/wiki/European_Union"&gt;European Union&lt;/a&gt; after &lt;a href="http://en.wikipedia.org/wiki/Paris"&gt;Paris&lt;/a&gt;,
&lt;a href="http://en.wikipedia.org/wiki/London"&gt;London&lt;/a&gt;, &lt;a href="http://en.wikipedia.org/wiki/Ruhr_area"&gt;the Ruhr&lt;/a&gt;, &lt;a href="http://en.wikipedia.org/wiki/Madrid"&gt;Madrid&lt;/a&gt;
and &lt;a href="http://en.wikipedia.org/wiki/Milan"&gt;Milan&lt;/a&gt;. About five million people live in the &lt;a href="http://en.wikipedia.org/wiki/Barcelona_metropolitan_area"&gt;Barcelona
metropolitan area&lt;/a&gt;. It is the largest metropolis on the &lt;a href="http://en.wikipedia.org/wiki/Mediterranean_Sea"&gt;Mediterranean Sea&lt;/a&gt;, located on the coast between
the mouths of the rivers &lt;a href="http://en.wikipedia.org/wiki/Llobregat"&gt;Llobregat&lt;/a&gt; and &lt;a href="http://en.wikipedia.org/wiki/Bes%C3%B2s_%28river%29"&gt;Bes&amp;ograve;s&lt;/a&gt;,
and bounded to the west by the &lt;a href="http://en.wikipedia.org/wiki/Serra_de_Collserola"&gt;Serra de Collserola&lt;/a&gt; mountain range, the tallest peak of which is 512 metres
(1,680&amp;nbsp;ft) high.&lt;/p&gt;

&lt;p&gt;Founded as a Roman city, in the Middle Ages Barcelona became the capital of the &lt;a href="http://en.wikipedia.org/wiki/Counts_of_Barcelona"&gt;County of Barcelona&lt;/a&gt;. After
merging with the &lt;a href="http://en.wikipedia.org/wiki/Kingdom_of_Aragon"&gt;Kingdom of Aragon&lt;/a&gt;, Barcelona continued to be an important city in the
&lt;a href="http://en.wikipedia.org/wiki/Crown_of_Aragon"&gt;Crown of Aragon&lt;/a&gt;. Besieged several times during its history, Barcelona has a rich cultural heritage and is today
an important cultural centre and a major tourist destination.&lt;/p&gt;
</textarea>
    </div>
    <div style="width: 29%; float: right;">
      <textarea id="editor2" name="editor2">&lt;p&gt;Country: &lt;a href="http://en.wikipedia.org/wiki/Spain"&gt;Spain&lt;/a&gt;&lt;br/&gt;
Area&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Municipalities_of_Spain"&gt;Municipality:&lt;/a&gt; 101.9&amp;nbsp;km2&lt;/li&gt;
&lt;li&gt;Urban: 803&amp;nbsp;km2&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Population (2011)&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Municipalities_of_Spain"&gt;Municipality&lt;/a&gt;:
1,620,943 (city limits)&lt;br/&gt;
3,218,071 (&lt;a href="http://en.wikipedia.org/wiki/Greater_Barcelona"&gt;Greater&lt;br/&gt; Barcelona&lt;/a&gt;)
&lt;/li&gt;
&lt;li&gt;Density: 15,991/km2&lt;/li&gt;
&lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Urban_area"&gt;Urban&lt;/a&gt;: 4,604,000&lt;/li&gt;
&lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Metropolitan_area"&gt;Metro&lt;/a&gt;: 5,375,774&lt;/li&gt;
&lt;/ul&gt;
</textarea>
    </div>
  </div>
  <div id="bottom">
    <!-- This div will handle all bottom bars. -->
  </div>
  <script>
    CKEDITOR.replace('editor1', {
      extraPlugins: 'sharedspace',
      removePlugins: 'maximize,resize',
      height: 410,
      sharedSpaces: {
        top: 'top',
        bottom: 'bottom'
      },
      removeButtons: 'PasteFromWord'
    });

    CKEDITOR.replace('editor2', {
      extraPlugins: 'sharedspace',
      removePlugins: 'maximize,resize',
      height: 410,
      sharedSpaces: {
        top: 'top',
        bottom: 'bottom'
      }
    });
  </script>
</body>

</html>
  • Inline editor with shared toolbar and bottom bar 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Inline editor with shared toolbar and bottom bar</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <style>
    #inline1 {
      /* Just to make the sample a bit nicer. */
      padding: 20px 10px;
      margin: -1px 0;
      border: 1px solid #ccc;
      border-right: 1px solid #ccc;
      /* Auto Grow for inline editor using pure CSS. */
      min-height: 250px;
      max-height: 800px;
      overflow-y: auto;
    }
  </style>
  <div id="top2">
    <!-- This div will handle all toolbars. -->
  </div>
  <div id="inline1" contenteditable="true">
    <h1><img alt="Saturn V carrying Apollo 11" style="float:right;margin:10px" src="assets/sample.jpg"> Apollo 11</h1>

    <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and
      <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours
      later on July 21 at 02:56 UTC.
    </p>

    <p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar
      material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the
      <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to
      Earth.
    </p>
  </div>
  <div id="bottom2">
    <!-- This div will handle all bottom bars. -->
  </div>
  <script>
    // Turn off automatic editor creation first.
    CKEDITOR.disableAutoInline = true;

    CKEDITOR.inline('inline1', {
      // To enable source code editing in a dialog window, inline editors require the "sourcedialog" plugin.
      extraPlugins: 'sharedspace,sourcedialog',
      removePlugins: 'floatingspace,maximize,resize',
      sharedSpaces: {
        top: 'top2',
        bottom: 'bottom2'
      },
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>