This repository has been archived by the owner on Jun 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b1c10cf
commit 58bc3d8
Showing
3 changed files
with
81 additions
and
0 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 |
---|---|---|
@@ -0,0 +1,31 @@ | ||
<div class="wrapper"> | ||
<div id="editor"> | ||
<h2>The three greatest things you learn from traveling</h2> | ||
<p> | ||
Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons | ||
I’ve learned over the years of traveling. | ||
</p> | ||
|
||
<h3>Appreciation of diversity</h3> | ||
<p> | ||
Getting used to an entirely different culture can be challenging. While it’s also nice to learn about | ||
cultures online or from books, nothing comes close to experiencing cultural diversity in person. | ||
You learn to appreciate each and every single one of the differences while you become more culturally fluid. | ||
</p> | ||
</div> | ||
</div> | ||
|
||
<style> | ||
#editor { | ||
margin: 0 auto; | ||
max-width: 800px; | ||
} | ||
|
||
.wrapper { | ||
padding: 50px 20px; | ||
} | ||
|
||
.ck-block-toolbar-button { | ||
transform: translateX( -10px ); | ||
} | ||
</style> |
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 |
---|---|---|
@@ -0,0 +1,45 @@ | ||
/** | ||
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md. | ||
*/ | ||
|
||
/* globals window, document, console:false */ | ||
|
||
import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor'; | ||
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; | ||
import List from '@ckeditor/ckeditor5-list/src/list'; | ||
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; | ||
import Heading from '@ckeditor/ckeditor5-heading/src/heading'; | ||
import HeadingButtonsUI from '@ckeditor/ckeditor5-heading/src/headingbuttonsui'; | ||
import ParagraphButtonUI from '@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui'; | ||
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; | ||
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; | ||
import Link from '@ckeditor/ckeditor5-link/src/link'; | ||
|
||
import BlockToolbar from '../../../../src/toolbar/block/blocktoolbar'; | ||
import BalloonToolbar from '../../../../src/toolbar/balloon/balloontoolbar'; | ||
|
||
BalloonEditor | ||
.create( document.querySelector( '#editor' ), { | ||
plugins: [ | ||
Essentials, | ||
List, | ||
Paragraph, | ||
Heading, | ||
HeadingButtonsUI, | ||
ParagraphButtonUI, | ||
Bold, | ||
Italic, | ||
Link, | ||
BlockToolbar, | ||
BalloonToolbar | ||
], | ||
blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3', 'bulletedList', 'numberedList' ], | ||
balloonToolbar: [ 'bold', 'italic', 'link' ] | ||
} ) | ||
.then( editor => { | ||
window.editor = editor; | ||
} ) | ||
.catch( err => { | ||
console.error( err.stack ); | ||
} ); |
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 |
---|---|---|
@@ -0,0 +1,5 @@ | ||
## BlockToolbar and BalloonToolbar collision [#418](https://github.com/ckeditor/ckeditor5-ui/issues/418) | ||
|
||
- select some text, balloon toolbar should show up | ||
- click block toolbar button, balloon toolbar should hide | ||
- pres `Esc` to move focus back to editable, balloon toolbar should show up |