-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #13532 from ckeditor/ck/11493
Feature (multi-root-editor): Introduced multi-root editor type that allows defining multiple editable areas handled by one editor instance. Closes #11493. Feature (build-multi-root): Introduced new editor build featuring multi-root editor. Other (core): `EditorConfig#initialData` and `EditorConfig#placeholder` can now be set to `Record<string, string>` where keys are root names and values are settings for related roots.
- Loading branch information
Showing
143 changed files
with
3,941 additions
and
832 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,93 @@ | ||
| <div id="snippet-inline-editor"> | ||
| <div id="toolbar"></div> | ||
| <style> | ||
| body, html { | ||
| overflow-x: clip; | ||
| } | ||
|
|
||
| <header id="header"> | ||
| <h2>Gone traveling</h2> | ||
| <h3>Monthly travel news and inspiration</h3> | ||
| </header> | ||
| .editor { | ||
| border: #ccced1 1px solid; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| <div id="content"> | ||
| <h3>Destination of the Month</h3> | ||
| .boxes { | ||
| margin-top: 10px; | ||
| display: flex; | ||
| } | ||
|
|
||
| <h4>Valletta</h4> | ||
| .box { | ||
| margin-top: 0px; | ||
| width: 50%; | ||
| } | ||
|
|
||
| <figure class="image image-style-side"> | ||
| <img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg" srcset="%BASE_PATH%/assets/img/malta.jpg, %BASE_PATH%/assets/img/malta_2x.jpg 2x"> | ||
| <figcaption>It's siesta time in Valletta.</figcaption> | ||
| </figure> | ||
| /* | ||
| Make the editable "fill" the whole box. | ||
| The box will grow if the other box grows too. | ||
| This makes the whole box "clickable". | ||
| */ | ||
| .box .ck-editor__editable { | ||
| height: 100%; | ||
| } | ||
|
|
||
| <p>The capital city of <a href="https://en.wikipedia.org/wiki/Malta" target="_blank" rel="external">Malta</a> is the top destination this summer. It’s home to a cutting-edge contemporary architecture, baroque masterpieces, delicious local cuisine and at least 8 months of sun. It’s also a top destination for filmmakers, so you can take a tour through locations familiar to you from Game of Thrones, Gladiator, Troy and many more.</p> | ||
| </div> | ||
| .box-left { | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| /* | ||
| When toolbar receives this class, it becomes sticky. | ||
| If the toolbar would be scrolled outside of the visible area, | ||
| instead it is kept at the top edge of the window. | ||
| */ | ||
| #toolbar.sticky { | ||
| position: sticky; | ||
| top: 100px; | ||
| z-index: 10; | ||
| } | ||
| </style> | ||
|
|
||
| <div class="demo-row"> | ||
| <div class="demo-row__half"> | ||
| <div id="footer-left"> | ||
| <h3>The three greatest things you learn from traveling</h3> | ||
| <p><a href="#">Find out more</a></p> | ||
| <div id="toolbar"></div> | ||
| <!-- | ||
| Wrapping the structure inside a pair of | ||
| contenteditable="true" + contenteditable="false" elements | ||
| is required to provide proper caret handling when | ||
| using arrow keys at the start and end of an editable area. | ||
| You can skip them if you don't want to move the | ||
| caret between editable areas using arrow keys. | ||
| !--> | ||
| <div contenteditable="true"> | ||
| <div contenteditable="false"> | ||
| <div class="editor"> | ||
| <div id="header"> | ||
| <h2>Gone traveling</h2> | ||
| <h3>Monthly travel news and inspiration</h3> | ||
| </div> | ||
| </div> | ||
| <div class="editor"> | ||
| <div id="content"> | ||
| <h3>Destination of the Month</h3> | ||
|
|
||
| <figure class="image image-style-side"> | ||
| <img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg" srcset="%BASE_PATH%/assets/img/malta.jpg, %BASE_PATH%/assets/img/malta_2x.jpg 2x"> | ||
| <figcaption>It's siesta time in Valletta.</figcaption> | ||
| </figure> | ||
|
|
||
| <h4>Valletta</h4> | ||
|
|
||
| <div class="demo-row__half"> | ||
| <div id="footer-right"> | ||
| <h3>Walking the capitals of Europe: Warsaw</h3> | ||
| <p><a href="#">Find out more</a></p> | ||
| <p>The capital city of <a href="https://en.wikipedia.org/wiki/Malta" target="_blank" rel="external">Malta</a> is the top destination this summer. It’s home to cutting-edge contemporary architecture, baroque masterpieces, delicious local cuisine, and at least 8 months of sun. It’s also a top destination for filmmakers, so you can take a tour through locations familiar to you from Game of Thrones, Gladiator, Troy, and many more.</p> | ||
| </div> | ||
| </div> | ||
| <div class="boxes"> | ||
| <div class="box box-left editor"> | ||
| <div id="left-side"> | ||
| <h3>The three greatest things you learn from traveling</h3> | ||
| <p><a href="#">Find out more</a></p> | ||
| </div> | ||
| </div> | ||
| <div class="box box-right editor"> | ||
| <div id="right-side"> | ||
| <h3>Walking the capitals of Europe: Warsaw</h3> | ||
| <p><a href="#">Find out more</a></p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <style> | ||
| /* Give the toolbar some space so it does not look like it belongs to the header root only. */ | ||
| #snippet-inline-editor #toolbar { | ||
| margin-bottom: 1em; | ||
| } | ||
| </style> |
Oops, something went wrong.