Skip to content

Commit

Permalink
Docs: Builder infoboxes. [short flow]
Browse files Browse the repository at this point in the history
  • Loading branch information
godai78 committed May 24, 2024
1 parent cf62c81 commit 4a9ab2f
Show file tree
Hide file tree
Showing 5 changed files with 21 additions and 0 deletions.
4 changes: 4 additions & 0 deletions docs/examples/builds/balloon-block-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,7 @@ The balloon block editor type lets you create your content directly in its targe
* 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}

<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>
4 changes: 4 additions & 0 deletions docs/examples/builds/balloon-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,7 @@ classes: main__content--no-toc
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}

<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>
4 changes: 4 additions & 0 deletions docs/examples/builds/classic-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,7 @@ classes: main__content--no-toc
The classic editor type shows a boxed editing area with a toolbar, placed in a specific position on the page.

{@snippet examples/classic-editor}

<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>
5 changes: 5 additions & 0 deletions docs/examples/builds/document-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,8 @@ The editor in this example is a feature–rich preset focused on rich text editi
See the {@link framework/document-editor tutorial} to learn how to create this kind of an editor (and similar) with a custom UI layout on top of {@link module:editor-decoupled/decouplededitor~DecoupledEditor}.

{@snippet examples/document-editor}

<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>

4 changes: 4 additions & 0 deletions docs/examples/builds/inline-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,7 @@ The inline editor type lets you create your content directly in its target locat
In this example the {@link features/images-styles image styles} configuration was changed to enable left- and right-aligned images.

{@snippet examples/inline-editor}

<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>

0 comments on commit 4a9ab2f

Please sign in to comment.