|
|
@@ -10,7 +10,7 @@ category: builds-guides
|
|
|
order: 10
|
|
|
---
|
|
|
|
|
|
-CKEditor 5 Builds are a set of ready to use rich text editors. Every "build" provides a single type of editor with a set of features and a default configuration. They provide easy to use solutions that can be installed with no effort and that satisfy the most common editing use cases.
|
|
|
+CKEditor 5 Builds are a set of ready to use rich text editors. Every "build" provides a single type of editor with a set of features and a default configuration. They provide convenient solutions that can be installed with no effort and that satisfy the most common editing use cases.
|
|
|
|
|
|
## Available builds
|
|
|
|
|
|
@@ -24,13 +24,13 @@ The following CKEditor 5 Builds are currently available:
|
|
|
|
|
|
Classic editor is what most users traditionally learnt to associate with a rich text editor — a toolbar with an editing area placed in a specific position on the page, usually as a part of a form that you use to submit some content to the server.
|
|
|
|
|
|
-The editor during initialisation hides given element on a page and renders "instead" of it, that's why it's usually used to replace `<textarea>` elements.
|
|
|
+During its initialisation the editor hides the used editable element on the page and renders "instead" of it. This is why it is usually used to replace `<textarea>` elements.
|
|
|
|
|
|
In CKEditor 5 the concept of the "boxed" editor was reinvented:
|
|
|
|
|
|
- * The toolbar is now always visible when user scrolls the page down.
|
|
|
- * The editor content is now placed inline in the page (without surrounding `<iframe>` element) — it is now much easier to style it.
|
|
|
- * The editor now grows automatically with the content by default.
|
|
|
+ * The toolbar is now always visible when the user scrolls the page down.
|
|
|
+ * The editor content is now placed inline in the page (without the surrounding `<iframe>` element) — it is now much easier to style it.
|
|
|
+ * By default the editor now grows automatically with the content.
|
|
|
|
|
|
{@img assets/img/editor-classic.png 772 Screenshot of a classic editor.}
|
|
|
|
|
|
@@ -38,9 +38,9 @@ To try it out online, check the {@link examples/builds/classic-editor classic ed
|
|
|
|
|
|
### Inline editor
|
|
|
|
|
|
-Inline editor comes with a floating toolbar, which becomes visible when the editor is focused (e.g. by clicking on it). Unlike classic editor, inline editor does not render "instead" of a given element, it simply makes it editable. As a consequence the styles of the edited content will be exactly the same before and after the editor is created.
|
|
|
+Inline editor comes with a floating toolbar that becomes visible when the editor is focused (e.g. by clicking it). Unlike classic editor, inline editor does not render *instead* of the given element, it simply makes it editable. As a consequence the styles of the edited content will be exactly the same before and after the editor is created.
|
|
|
|
|
|
-A common scenario for using inline editor is offering users the possibility to edit content in its real location in a web page, instead of doing it in a separate administration section.
|
|
|
+A common scenario for using inline editor is offering users the possibility to edit content in its real location on a web page instead of doing it in a separate administration section.
|
|
|
|
|
|
{@img assets/img/editor-inline.png 774 Screenshot of an inline editor.}
|
|
|
|
|
|
@@ -48,15 +48,15 @@ To try it out online, check the {@link examples/builds/inline-editor inline edit
|
|
|
|
|
|
### Balloon toolbar editor
|
|
|
|
|
|
-Balloon toolbar editor is very similar to the inline editor. The difference between them is that the toolbar appears in a balloon next to the selection (when the selection is not empty):
|
|
|
+Balloon toolbar editor is very similar to inline editor. The difference between them is that the toolbar appears in a balloon next to the selection (when the selection is not empty):
|
|
|
|
|
|
{@img assets/img/editor-balloon-toolbar.png 779 Screenshot of a baloon toolbar editor.}
|
|
|
|
|
|
To try it out online, check the {@link examples/builds/balloon-toolbar-editor balloon toolbar editor example}. Jump to {@link builds/guides/quick-start#Balloon-toolbar-editor quick start} to start using it.
|
|
|
|
|
|
-## Builds customization
|
|
|
+## Build customization
|
|
|
|
|
|
-Every build comes with a default set of features and a default configuration of them. Although the builds try to fit many cases, they may still need to be adjusted in some integrations. The following modifications are possible:
|
|
|
+Every build comes with a default set of features and their default configuration. Although the builds try to fit many use cases, they may still need to be adjusted in some integrations. The following modifications are possible:
|
|
|
|
|
|
* You can override the default **configuration of features** (e.g. define different image styles or heading levels).
|
|
|
* You can change the default **toolbar configuration** (e.g. remove undo/redo buttons).
|
|
|
@@ -64,7 +64,7 @@ Every build comes with a default set of features and a default configuration of
|
|
|
|
|
|
Read more in the {@link builds/guides/integration/configuration Configuration guide}.
|
|
|
|
|
|
-If a build doesn't provide all the necessary features or you want create a highly optimized build of editor which will contain only the necessary features, then you need to customize the build or create a brand new one. Check {@link builds/guides/development/custom-builds Custom builds} for details on how to change the default builds to match your preferences.
|
|
|
+If a build does not provide all the necessary features or you want to create a highly optimized build of the editor which will contain only the features that you require, you need to customize the build or create a brand new one. Check {@link builds/guides/development/custom-builds Custom builds} for details on how to change the default builds to match your preferences.
|
|
|
|
|
|
## Additional information
|
|
|
|
|
|
@@ -77,7 +77,7 @@ Each build was designed to satisfy as many use cases as possible. They differ in
|
|
|
* Provide setups as generic as possible, based on research and community feedback.
|
|
|
|
|
|
<info-box>
|
|
|
- Features like fonts, colors and alignment will be introduced in the future, when the new types of builds will be introduced with the purpose of satisfying document editing scenarios.
|
|
|
+ Features like fonts, colors and alignment will be introduced in the future, when new types of builds will be introduced with the purpose of satisfying document editing scenarios.
|
|
|
</info-box>
|
|
|
|
|
|
### Use cases
|
|
|
@@ -88,15 +88,15 @@ The following are **some** common use cases:
|
|
|
|
|
|
* In content management systems:
|
|
|
* Forms for writing articles or website content.
|
|
|
- * Inline writing in a front-end-like editing page.
|
|
|
- * In comments.
|
|
|
+ * Inline writing in a frontend-like editing page.
|
|
|
+ * Comments.
|
|
|
* In marketing and sales automation applications:
|
|
|
- * Composing e-mail campaigns.
|
|
|
+ * Composing email campaigns.
|
|
|
* Creating templates.
|
|
|
* In forum applications:
|
|
|
- * Creation of topics and their replies.
|
|
|
+ * Creating topics and their replies.
|
|
|
* In team collaboration applications:
|
|
|
- * Creation of shared documents.
|
|
|
+ * Creating shared documents.
|
|
|
* Other uses:
|
|
|
* User profile editing pages.
|
|
|
* Book writing applications.
|
|
|
@@ -107,7 +107,7 @@ The following are **some** common use cases:
|
|
|
|
|
|
The {@link framework/index CKEditor 5 Framework} should be used, instead of builds, in the following cases:
|
|
|
|
|
|
-* When you want to create your own text editor and have full control over every aspect of it, from UI to features.
|
|
|
+* When you want to create your own text editor and have full control over its every aspect, from UI to features.
|
|
|
* When the solution proposed by the builds does not fit your specific use case.
|
|
|
|
|
|
In the following cases [CKEditor 4](https://ckeditor.com/ckeditor-4/) should be used instead:
|