Skip to content

Commit

Permalink
Build/upgrade version 41.4.2 (#9)
Browse files Browse the repository at this point in the history
* Docs: minor fixes. [short flow]

* Shorten the clipboard guide.

* Docs: formatting. [skip ci]

* Docs: timestamp bump. [skip ci]

* Docs: Unify the usage of quotation marks in the React guide.

* Docs: Update the Vue guide to new installation methods.

* Docs: Fix indentations in the React guide

* UI animations do not respect user's preferences on reduced motion (ckeditor#16099)

Feature: Editor UI should respect the user's preferences for reduced motion (WCAG 2.1, Success Criterion 2.3.3).

Feature (utils): Implemented the `env#isMotionReduced` flag to discover reduced motion preferences.

* Improved placeholders and font color grids in high contrast mode (ckeditor#16284)

Feature (utils): Implemented the `env#isMediaForcedColors` property for forced colors detection (e.g. high contrast mode on Windows). See ckeditor#14907.

Feature (ui): Implemented `ck-media-forced-colors` and `ck-media-default-colors` mixins for detecting forced colors (e.g. high contrast mode on Windows). See ckeditor#14907.

Fix (theme-lark): The caret should be visible in a placeholder while in forced colors mode (e.g. high contrast mode on Windows). Improved the look of the placeholders in the forced colors mode. Closes ckeditor#14907.

Fix (theme-lark): The color grid component should render as a grid of labels in the forced colors mode (e.g. high contrast mode on Windows). Closes ckeditor#14907.

* Docs: import link fix. [short flow]

* Use `dev-utils` with updated esbuild-loader

* Fix issues caused by targeting ES2022 (and dropping some polyfills)

* Image jumps when resizing in container that has padding (ckeditor#16304)

Fix (image, widget): An image should not jump upon resizing in a container with padding. Closes ckeditor#14698

---------

Co-authored-by: Aleksander Nowodzinski <a.nowodzinski@cksource.com>

* Name, role, value accessibility fixes (ckeditor#16295)

Fix (restricted-editing): Improved the accessibility of the restricted editing dropdown by setting the correct ARIA role on the toolbar menu.

Fix (minimap): Addressed the issue of the minimap `<iframe>` being unnecessarily exposed to assistive technologies.   

---------

Co-authored-by: Aleksander Nowodzinski <a.nowodzinski@cksource.com>

* Add menu bar integration to multi root editor. (ckeditor#16280)

Feature (editor-multi-root): Added menu bar support for multi-root editor.

* Other: Updated translations. [skip ci]

* Other: Updated translations. [skip ci]

* Internal (build-*): Builds.

* Add widget ESC shortuct accessibility dialog entry (ckeditor#16310)

Other (widget): Added information to the Accessibility help dialog about a keyboard shortcut that moves focus from a nested editable back to the widget.

---------

Co-authored-by: Aleksander Nowodzinski <a.nowodzinski@cksource.com>

* Docs: Update the Next.js guide to new installation methods.

* Docs: Update builder links in integrations.

* No longer delay showing tooltip while focusing an element (ckeditor#16296)

Fix (ui): `TooltipManager` tooltips should immediately show up when triggered by user focus for better responsiveness and accessibility.

---------

Co-authored-by: Aleksander Nowodzinski <a.nowodzinski@cksource.com>

* Mark mixin calls as pure

* Add `/* #__PURE__ */` before mixin calls in global scope

* Other: Updated translations. [skip ci]

* Internal (build-*): Builds.

* Docs: update Builder links. [short flow]

* Docs: update Builder links. [short flow]

* Use regular `dev-utils`

* Bump `ckeditor5-dev-*` packages to `^40.0.0`

* Use `declare` for `View.viewUid` property

* Updated the Accessibility guide with VPAT for the latest editor version and new keystrokes added to the list (ckeditor#16324)

Docs: Updated the Accessibility guide with VPAT for the latest editor version and new keystrokes added to the list.

* Docs: testing helpers fix. [short flow]

* Remove menu bar on editor destroy. (ckeditor#16329)

Tests (editor-multi-root): Removing the menu bar element on editor destroy.

* Docs: minor update. [skip ci]

* Docs: minor update. [skip ci]

* Add `declare` to few dynamically populated fields

* Docs: lists install update. [short flow]

* Docs: UI language link. [short flow]

* Docs: API links. [short flow]

* Docs: API links. [short flow]

* Docs: restoring new imports. [short flow]

* Update docs/tutorials/widgets/data-from-external-source.md

Co-authored-by: Piotr Szczęśniak <szczesniakp@o2.pl>

* Update docs/tutorials/widgets/implementing-a-block-widget.md

Co-authored-by: Piotr Szczęśniak <szczesniakp@o2.pl>

* Update docs/tutorials/widgets/implementing-a-block-widget.md

Co-authored-by: Piotr Szczęśniak <szczesniakp@o2.pl>

* Update docs/tutorials/widgets/implementing-an-inline-widget.md

Co-authored-by: Piotr Szczęśniak <szczesniakp@o2.pl>

* Docs: Updated the 2.5.7 section of the VPAT document.

* Internal: Move the internal `generatePositions` function to a static method on `BalloonPanelView` class.

* Docs: lotsa various fixes. [short flow]

* Docs: Fix link to `BalloonPanelView.generatePositions`

* Docs: lotsa various fixes. [short flow]

* Docs: lotsa various fixes. [short flow]

* Docs: Updated the 4.1.3 section of the VPAT document.

* Docs: expanding snippets. [short flow]

* Docs: crosslinking. [short flow]

* Increased specificity of image-style-align CSS classes.

* Internal: Vale evaluation. [skip ci]

* Docs: post-tests fixes. [short flow]

* Docs: Changelog. [skip ci]

* Docs: language fixes. [short flow]

* Docs: Corrected the changelog. [skip ci]

* Docs: Added an intro section. [skip ci]

* Docs: explaining Essentials. [short flow]

* Docs: minor rearrangements. [short flow]

* Increased specificity of almost all image-style-align CSS classes.

* Docs: updating and examples update. [short flow]

* Docs: await update. [short flow]

* Docs: setup rearrangements. [short flow]

* Docs: minor fix. [skip ci]

* Docs: Fix typos in the React guide.

* Docs: Update the Angular guide to new installation methods.

* Docs: review fixes and more changes. [short flow]

* Docs: removing the removing features section. [short flow]

* Docs: minor technical fix. [short flow]

* Docs: removing infoboxes. [short flow]

* Docs: removing redundant guides. [short flow]

* Docs: restoring the removal section. [short flow]

* Docs: restoring an internal link. [short flow]

* Changelog review.

* Docs: Prepare a structure for the Vue 2 guide.

* Docs: Unify subhedings in integrations.

* Docs: unsupported packages infobox.

* Docs: typos. [short flow]

* Docs: quick start update. [short flow]

* Docs: quick start update. [short flow]

* Docs: quick start update. [short flow]

* Docs: updating UI language guide. [short flow]

* Update ui on close image ckbox dialog.

* Docs: updste. [short flow]

* Docs: updste. [short flow]

* Docs: updste. [short flow]

* Internal: Improve tree-shaking by adding `#__PURE__` comments before function calls in global scope

* Update docs/getting-started/setup/ui-language.md

Co-authored-by: Filip Sobol <filipsobol@users.noreply.github.com>

* Docs: update. [short flow]

* Docs: updating Builder link. [short flow]

* Docs: updating API install commands. [short flow]

* Docs: updating API install commands. [short flow]

* Release: v41.4.0.

* Docs: Add the component installation step to the Vue 3 guide.

* Docs: Fix import in the Vue snippet.

* Docs: Fix formatting in the Vue guide.

* Docs: Add context to the Vue guide.

* Docs: Update snippets in the Vue 3 guide.

* Docs: Change the Angular guide structure.

* Docs: Unify collaboration sections across integrations.

* Docs: Fix typo.

* Docs: Add the localization section to the Vue 2 guide.

* Docs: Unify the localization section in Vue integrations.

* The TooltipManager should verify if the tooltip is not already unpinned while trying to update its position.

* Removed unnecessary non-null assertions.

* Updated the GH link to point to the public repo.

* Added info about the changes related to the silent release of NIM.

See: ckeditor#16360 (comment)

* Merge pull request ckeditor#16363 from ckeditor/cc/6219-update-race

Fix (ui): Prevented editor error in a situation where tooltip was unpinned after it was already removed. This happened when "Unlink" button was pressed while the tooltip was shown.

* Internal (build-*): Builds.

* Docs: Changelog. [skip ci]

* Docs: Changelog. [skip ci]

* Internal: An empty commit to trigger the release.

* Docs: Changelog.

* Release: v41.4.1.

* Docs: new methods READMEs.

* Merge master.

* Internal: Fixed wording in the `ImageResize` plugin description in `ckeditor5-metadata.json`. [skip ci]

* Docs: updating main README. [short flow]

* Docs: adding decoupled editor toolbar config. [short flow]

* Add clearTimeout and test.

* Docs: a typo. [skip ci]

* Update docs/getting-started/setup/toolbar.md

Co-authored-by: Piotr Szczęśniak <szczesniakp@o2.pl>

* Docs: snippet update. [short flow]

* Docs: Update the Laravel integration guide to new installation methods.

* Added image style align left/right between image and image-inline.

* Fix (utils): Prevented error thrown when `ckeditor5-utils/src/env.ts` is used in an environment without `window` global object.

* Fixed lint issue.

* Rename `globalVar` to `global`.

* Docs (utils): Added a clarification remark to some properties in `env` object.

* Docs (utils): Grammar and typo fix.

* Internal (build-*): Builds.

* Docs: Changelog. [skip ci]

* Docs: Changelog (v41.4.2).

* Release: v41.4.2.

* Docs: removing builds. [short flow]

* Docs: Unify the setup sections.

* Docs: updates. [short flow]

* Docs: Prepare a structure for the .NET integration.

* Docs: Fix typo.

* Docs: Update the .NET integration guide to new installation methods.

* Docs: Fix contraction.

* Other: Add `#__PURE__` comments before objects and arrays in global scope.

* Internal: Vale evaluation. [skip ci]

* Docs: updating VPAT. [short flow]

* Instant pin tooltip on focus only if not hovered

* Docs: updating Drupal guide. [short flow]

* Docs: restoring a deleted file. [short flow]

* Add `onAfterDestroy` callback to react docs snippet, minor wording changes

* Docs: Minor fixes in the Quick Start

* Docs: Minor fixes in the Angular integration

* Docs: Minor fixes in the Next.js integration.

* Docs: Minor fixes in the Vue 2 integration.

* Docs: Minor fixes in the Vue integration.

* Docs: Modify the structure of the Next integration.

* Docs: Add new method to the React integration.

* Docs: minor fixes. [short flow]

* Core review fixes.

* Docs: puntuation. [short flow]

* Tweak plugins.

* Change spinner animation keyframe name to be more unique.

* Fix theme and CSS.

* Fix watchdog setup.

* Docs: general fixes. [skip ci]

* Docs: general fixes. [skip ci]

* Docs: relinking and cleanup. [short flow]

* Code review fixes.

* Docs: Unify the Builder naming.

* Code review fixes.

* Remove type.

* Docs: Remove excessive articles.

* Docs: Remove the excessive section from the Angular guide.

* Docs: Preliminary work in the Block widget guide.

* Docs: updating error codes. [short flow]

* Docs: updating error codes. [short flow]

* Docs: Update the Block widget tutorial to new installation methods.

* Docs: Fix typos in the Block widget guide.

* Docs: minor fixes. [short flow]

* Docs: pre-release fixes.

* Docs: integrations update. [short flow]

* Docs: adding CTA. [short flow]

* Docs: Preliminary work in the Inline widget tutorial.

* Docs: minor update. [short flow]

* Docs: minor update. [short flow]

* Docs: minor update. [short flow]

* Docs: Update the Inline widget tutorial to new installation methods.

* Docs: a review. [short flow]

* Docs: Builder infoboxes. [short flow]

---------

Co-authored-by: godai78 <b.biedrzycki@cksource.com>
Co-authored-by: Witek Socha <witek.soch@gmail.com>
Co-authored-by: Bartek Biedrzycki <68123541+godai78@users.noreply.github.com>
Co-authored-by: Mateusz Gorzeliński <mateusz.gorzelinski@gmail.com>
Co-authored-by: Mateusz Bagiński <cziken58@gmail.com>
Co-authored-by: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Co-authored-by: Filip Sobol <filipsobol@users.noreply.github.com>
Co-authored-by: Michał Remiszewski <118178939+mremiszewski@users.noreply.github.com>
Co-authored-by: Kamil Piechaczek <pomek@users.noreply.github.com>
Co-authored-by: Piotr Szczęśniak <szczesniakp@o2.pl>
Co-authored-by: CKEditorBot <ckeditor-bot@cksource.com>
Co-authored-by: Illia Sheremetov <i.sheremetov@cksource.com>
Co-authored-by: Kuba Niegowski <j.niegowski@cksource.com>
Co-authored-by: Szymon Cofalik <s.cofalik@cksource.com>
Co-authored-by: Piotrek Koszuliński <pkoszulinski@gmail.com>
Co-authored-by: Witek Socha <w.socha@cksource.com>
Co-authored-by: Paweł Smyrek <p.smyrek@cksource.com>
Co-authored-by: Kuba Niegowski <1232187+niegowski@users.noreply.github.com>
Co-authored-by: Daniela Soto <dsoto@eagerworks.com>
  • Loading branch information
20 people committed May 30, 2024
1 parent 65aaa39 commit cce5f6f
Show file tree
Hide file tree
Showing 1,447 changed files with 25,675 additions and 14,037 deletions.
8 changes: 8 additions & 0 deletions .circleci/template.yml
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,14 @@ jobs:
when: always
name: Execute Stylelint
command: yarn run stylelint
- run:
when: always
name: Check if all CSS files from the "ckeditor5-theme-lark" are imported in "index.css" file
command: yarn run check-theme-lark-imports
- run:
when: always
name: Check if all packages are exported in the "ckeditor5" package
command: yarn run check-exports

cke5_coverage:
machine: true
Expand Down
1,071 changes: 567 additions & 504 deletions CHANGELOG.md

Large diffs are not rendered by default.

File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@
<p style="margin-left:0px;"><a href="https://ckeditor.com/cke4/addon/floatingspace">floatingspace</a></p>
</td>
<td>
<p style="margin-left:0px;"><a href="https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#inline-editor">Inline editor</a></p>
<p style="margin-left:0px;"><a href="https://ckeditor.com/docs/ckeditor5/latest/getting-started/legacy/installation-methods/predefined-builds.html#inline-editor">Inline editor</a></p>
</td>
</tr>
<tr>
Expand Down Expand Up @@ -640,7 +640,7 @@
<p style="margin-left:0px;"><a href="https://ckeditor.com/cke4/addon/save">save</a></p>
</td>
<td>
<p style="margin-left:0px;"><a href="https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/getting-and-setting-data.html">Saving data</a></p>
<p style="margin-left:0px;"><a href="https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/getting-and-setting-data.html">Saving data</a></p>
</td>
</tr>
<tr>
Expand Down
42 changes: 42 additions & 0 deletions docs/_snippets/installation/setup/blocktoolbar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/**
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

/* globals console, window, document, ClassicEditor
*/

import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
import { TOKEN_URL } from '@ckeditor/ckeditor5-ckbox/tests/_utils/ckbox-config.js';

ClassicEditor
.create( document.querySelector( '#snippet-block-toolbar' ), {
ui: {
viewportOffset: {
top: window.getViewportTopOffsetConfig()
}
},
ckbox: {
tokenUrl: TOKEN_URL,
allowExternalImagesEditing: [ /^data:/, 'origin', /ckbox/ ],
forceDemoLabel: true
},
blockToolbar: [
'undo', 'redo',
'|',
'paragraph', 'heading1', 'heading2', 'heading3',
'|',
'insertImage', 'blockQuote',
'|',
'bulletedList', 'numberedList',
'|',
'outdent', 'indent'
],
cloudServices: CS_CONFIG
} )
.then( editor => {
window.editorBasic = editor;
} )
.catch( err => {
console.error( err );
} );
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ import { FontBackgroundColor, FontSize, FontColor, FontFamily } from '@ckeditor/
import { PictureEditing, ImageInsert, ImageResize, AutoImage } from '@ckeditor/ckeditor5-image';
import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
import { Indent, IndentBlock } from '@ckeditor/ckeditor5-indent';
import ClassicEditor from '../build-classic.js';
import { BlockToolbar } from '@ckeditor/ckeditor5-ui';
import { HeadingButtonsUI } from '@ckeditor/ckeditor5-heading';
import { ParagraphButtonUI } from '@ckeditor/ckeditor5-paragraph';
import { LinkImage } from '@ckeditor/ckeditor5-link';
import ClassicEditor from '../../build-classic.js';

ClassicEditor.builtinPlugins.push( Alignment );
ClassicEditor.builtinPlugins.push( Strikethrough );
Expand All @@ -38,5 +42,9 @@ ClassicEditor.builtinPlugins.push( Code );
ClassicEditor.builtinPlugins.push( TodoList );
ClassicEditor.builtinPlugins.push( CKBox );
ClassicEditor.builtinPlugins.push( CKBoxImageEdit );
ClassicEditor.builtinPlugins.push( BlockToolbar );
ClassicEditor.builtinPlugins.push( HeadingButtonsUI );
ClassicEditor.builtinPlugins.push( ParagraphButtonUI );
ClassicEditor.builtinPlugins.push( LinkImage );

window.ClassicEditor = ClassicEditor;
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
4 changes: 2 additions & 2 deletions docs/_snippets/updating/plugins-mapping/plugins-mapping.html
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@
<p style="margin-left:0px;"><a href="https://ckeditor.com/cke4/addon/floatingspace">floatingspace</a></p>
</td>
<td>
<p style="margin-left:0px;"><a href="https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#inline-editor">Inline editor</a></p>
<p style="margin-left:0px;"><a href="https://ckeditor.com/docs/ckeditor5/latest/getting-started/legacy/installation-methods/predefined-builds.html#inline-editor">Inline editor</a></p>
</td>
</tr>
<tr>
Expand Down Expand Up @@ -726,7 +726,7 @@
<p style="margin-left:0px;"><a href="https://ckeditor.com/cke4/addon/save">save</a></p>
</td>
<td>
<p style="margin-left:0px;">See <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/getting-and-setting-data.html">Saving data</a></p>
<p style="margin-left:0px;">See <a href="https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/getting-and-setting-data.html">Saving data</a></p>
</td>
</tr>
<tr>
Expand Down
4 changes: 2 additions & 2 deletions docs/api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ meta-title: CKEditor 5 API | CKEditor 5 documentation
## Documentation

* {@link framework/index CKEditor&nbsp;5 Framework} &ndash; Learn how to develop with CKEditor&nbsp;5 Framework, customize it and create plugins.
* {@link installation/index Installing CKEditor&nbsp;5} &ndash; Learn how to install, integrate and configure CKEditor&nbsp;5 builds. More complex aspects, like creating custom builds, are explained here, too.
* {@link getting-started/index Installing CKEditor&nbsp;5} &ndash; Learn how to install, integrate and configure CKEditor&nbsp;5 builds. More complex aspects, like creating custom builds, are explained here, too.
* {@link features/index Features} &ndash; Learn about some of the features included in CKEditor&nbsp;5 builds.

## Contribute

CKEditor is an Open Source project and your contribution is most welcome. Feel free to {@link support/reporting-issues report bugs} or improve the code on [GitHub](https://github.com/ckeditor/ckeditor5). Since CKEditor is localized, you can also help [to translate it](https://www.transifex.com/ckeditor/ckeditor5/). You do not need to be a programmer to contribute to the project!
CKEditor is an Open Source project and your contribution is most welcome. Feel free to {@link support/index#reporting-issues report bugs} or improve the code on [GitHub](https://github.com/ckeditor/ckeditor5). Since CKEditor is localized, you can also help [to translate it](https://www.transifex.com/ckeditor/ckeditor5/). You do not need to be a programmer to contribute to the project!
Binary file modified docs/assets/img/abbreviation-part1-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/assets/img/favicons/16x16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/assets/img/favicons/200x200.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/assets/img/favicons/32x32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/assets/img/favicons/96x96.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/pdf/VPAT_CKEditor_5_v41.4.2.pdf
Binary file not shown.
61 changes: 6 additions & 55 deletions docs/examples/builds/balloon-block-editor.md
Original file line number Diff line number Diff line change
@@ -1,69 +1,20 @@
---
category: examples-builds
meta-title: Balloon block editor build example | CKEditor 5 Documentation
meta-title: Balloon block editor example | CKEditor 5 Documentation
order: 40
toc: false
classes: main__content--no-toc
---

# Balloon block editor

{@link installation/getting-started/predefined-builds#balloon-block-editor Balloon block editor} lets you create your content directly in its target location with the help of two toolbars:
The balloon block editor type lets you create your content directly in its target location with the help of two toolbars:

* A balloon toolbar that appears next to the selected editable document element (offering inline content formatting tools).
* A {@link features/blocktoolbar block toolbar} accessible using the toolbar handle button {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator} attached to the editable content area and following the selection in the document (bringing additional block formatting tools). The {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator} button is also a handle that can be used to drag and drop blocks around the content.
* A {@link getting-started/setup/toolbar#block-toolbar block toolbar} accessible using the toolbar handle button {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator} attached to the editable content area and following the selection in the document (bringing additional block formatting tools). The {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator} button is also a handle that can be used to drag and drop blocks around the content.

{@snippet examples/balloon-block-editor}

## Editor example configuration

Check out the {@link installation/getting-started/predefined-builds#installation-example-4 Quick start} guide to learn more about implementing this kind of editor. You will find the implementation steps there. You can see this example editor’s code below.

<details>
<summary>View editor configuration script</summary>

```js

import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';

BalloonEditor
.create( document.querySelector( '#snippet-balloon-block-editor' ), {
cloudServices: {
// All predefined builds include the Easy Image feature.
// Provide correct configuration values to use it.
tokenUrl: 'https://example.com/cs-token-endpoint',
uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
// Read more about Easy Image - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/easy-image.html.
// For other image upload methods see the guide - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html.
}
} )
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err );
} );

```

</details>

<details>
<summary>View editor content listing</summary>

```html
<div id="snippet-balloon-block-editor">
Editor content is inserted here.
</div>

<style>
/* Restrict the width of the editor to isolate it from the content of the guide. */
#snippet-balloon-block-editor {
margin-left: 5%;
margin-right: 5%;
}
</style>

```

</details>
<info-box hint>
If you are interested in effortlessly building similar editor presets, check out our [interactive Builder](https://ckeditor.com/ckeditor-5/builder?redirect=docs). It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select the editor type, the features you need, the preferred framework (React, Angular, Vue or Vanilla JS) and the preferred distribution method. In the end, you get ready-to-use code tailored to your needs!
</info-box>
68 changes: 5 additions & 63 deletions docs/examples/builds/balloon-editor.md
Original file line number Diff line number Diff line change
@@ -1,75 +1,17 @@
---
category: examples-builds
meta-title: Balloon editor build example | CKEditor 5 Documentation
meta-title: Balloon editor example | CKEditor 5 Documentation
order: 30
toc: false
classes: main__content--no-toc
---

# Balloon editor

{@link installation/getting-started/predefined-builds#balloon-editor Balloon editor} lets you create your content directly in its target location with the help of a balloon toolbar that appears next to the selected editable document element.
The balloon editor type lets you create your content directly in its target location with the help of a balloon toolbar that appears next to the selected editable document element.

{@snippet examples/balloon-editor}

## Editor example configuration

Check out the {@link installation/getting-started/predefined-builds#installation-example-3 Quick start} guide to learn more about implementing this kind of editor. You will find implementation steps there. You can see this example editor’s code below.

<details>
<summary>View editor configuration script</summary>

```js

import BalloonEditor from '@ckeditor/ckeditor5-build-balloon';

BalloonEditor
.create( document.querySelector( '#snippet-balloon-editor' ), {
toolbar: {
items: [
'undo', 'redo',
'|', 'heading',
'|', 'bold', 'italic',
'|', 'link', 'insertImage', 'insertTable', 'mediaEmbed',
'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
]
},
cloudServices: {
// All predefined builds include the Easy Image feature.
// Provide correct configuration values to use it.
tokenUrl: 'https://example.com/cs-token-endpoint',
uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
// Read more about Easy Image - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/easy-image.html.
// For other image upload methods see the guide - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html.
}
} )
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err );
} );

```

</details>

<details>
<summary>View editor content listing</summary>

```html
<div id="snippet-balloon-editor">
Editor content is inserted here.
</div>

<style>
/* Restrict the width of the editor to isolate it from the content of the guide. */
#snippet-balloon-editor {
margin-left: 5%;
margin-right: 5%;
}
</style>

```

</details>
<info-box hint>
If you are interested in effortlessly building similar editor presets, check out our [interactive Builder](https://ckeditor.com/ckeditor-5/builder?redirect=docs). It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select the editor type, the features you need, the preferred framework (React, Angular, Vue or Vanilla JS) and the preferred distribution method. In the end, you get ready-to-use code tailored to your needs!
</info-box>
60 changes: 5 additions & 55 deletions docs/examples/builds/classic-editor.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
category: examples-builds
meta-title: Classic editor build example | CKEditor 5 Documentation
meta-title: Classic editor example | CKEditor 5 Documentation
order: 10
toc: false
classes: main__content--no-toc
Expand All @@ -10,60 +10,10 @@ classes: main__content--no-toc

{@snippet build-classic-source}

{@link installation/getting-started/predefined-builds#classic-editor Classic editor} shows a boxed editing area with a toolbar, placed in a specific position on the page.
The classic editor type shows a boxed editing area with a toolbar, placed in a specific position on the page.

{@snippet examples/classic-editor}

## Editor example configuration

Check out the {@link installation/getting-started/predefined-builds#installation-example Quick start} guide to learn more about implementing this kind of editor. You will find implementation steps there. You can see this example editor’s code below.

<details>
<summary>View editor configuration script</summary>

```js

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

ClassicEditor
.create( document.querySelector( '#snippet-classic-editor' ), {
toolbar: {
items: [
'undo', 'redo',
'|', 'heading',
'|', 'bold', 'italic',
'|', 'link', 'insertImage', 'insertTable', 'mediaEmbed', 'blockQuote'
'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
]
},
cloudServices: {
// All predefined builds include the Easy Image feature.
// Provide correct configuration values to use it.
tokenUrl: 'https://example.com/cs-token-endpoint',
uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
// Read more about Easy Image - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/easy-image.html.
// For other image upload methods see the guide - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html.
}
} )
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err );
} );

```

</details>

<details>
<summary>View editor content listing</summary>

```html
<div id="snippet-classic-editor">
Editor content is inserted here.
</div>

```

</details>
<info-box hint>
If you are interested in effortlessly building similar editor presets, check out our [interactive Builder](https://ckeditor.com/ckeditor-5/builder?redirect=docs). It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select the editor type, the features you need, the preferred framework (React, Angular, Vue or Vanilla JS) and the preferred distribution method. In the end, you get ready-to-use code tailored to your needs!
</info-box>
Loading

0 comments on commit cce5f6f

Please sign in to comment.