Sfoglia il codice sorgente

Docs: Third-party UI guide corrected. [skip ci]

Anna Tomanek 8 anni fa
parent
commit
e1f7b7f66c
1 ha cambiato i file con 32 aggiunte e 32 eliminazioni
  1. 32 32
      packages/ckeditor5-ui/docs/framework/guides/external-ui.md

+ 32 - 32
packages/ckeditor5-ui/docs/framework/guides/external-ui.md

@@ -5,15 +5,15 @@ order: 20
 
 # Third–party UI
 
-CKEditor 5 is a modular editing framework and allows various flexible configurations. That includes the usage of a third–party user interface on top of the basic editor classes.
+CKEditor 5 is a modular editing framework that allows for various flexible configurations. That includes the usage of a third–party user interface on top of the basic editor classes.
 
-In this guide, a [classic–like](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic) editor will be bound to a completely separate UI created in [Bootstrap](http://getbootstrap.com/) providing the basic structure and toolbar items necessary to start editing.
+In this guide, a [classic–like](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic) editor will be bound to a completely separate UI created in [Bootstrap](http://getbootstrap.com/), providing the basic structure and toolbar items necessary to start editing.
 
 {@snippet examples/bootstrap-ui}
 
 ## Readying the editor side
 
-The ready–to–use builds of CKEditor like {@link examples/builds/classic-editor Classic} or {@link examples/builds/inline-editor Inline} come with a dedicated, default user interface and theme. However, to create an editor instance bound to a Bootstrap UI, only a limited subset of features is required. Let's import them first:
+The ready–to–use builds of CKEditor like {@link examples/builds/classic-editor Classic} or {@link examples/builds/inline-editor Inline} come with a dedicated default user interface and theme. However, to create an editor instance bound to a Bootstrap UI, only a limited subset of features is required. You need to import them first:
 
 
 ```js
@@ -30,7 +30,7 @@ import Typing from '@ckeditor/ckeditor5-typing/src/typing';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import UndoEngine from '@ckeditor/ckeditor5-undo/src/undoengine';
 
-// Basic features to associated with the edited content.
+// Basic features to be associated with the edited content.
 import BoldEngine from '@ckeditor/ckeditor5-basic-styles/src/boldengine';
 import ItalicEngine from '@ckeditor/ckeditor5-basic-styles/src/italicengine';
 import UnderlineEngine from '@ckeditor/ckeditor5-basic-styles/src/underlineengine';
@@ -42,13 +42,13 @@ import HeadingEngine from '@ckeditor/ckeditor5-heading/src/headingengine';
 
 	Respectively, `ItalicEngine`, `UnderlineEngine`, `HeadingEngine` and `UndoEngine` are also imported.
 
-	This split between the engine and UI part of features is not perfect yet. At the current stage, the UI part introduces some vital functionality, such as keystroke definitions (e.g. <kbd>Ctrl</kbd>+<kbd>B</kbd> to "bold"). This means that by dropping the UI part of fetures you lose also keystrokes. We [plan to improve](https://github.com/ckeditor/ckeditor5/issues/488) this situation.
+	This split between the engine and the UI part of features is not perfect yet. At the current stage, the UI part introduces some vital functionality, such as keystroke definitions (e.g. <kbd>Ctrl</kbd>+<kbd>B</kbd> to "bold"). This means that by dropping the UI part of features you also lose keystrokes. We [plan to improve](https://github.com/ckeditor/ckeditor5/issues/488) this situation.
 </info-box>
 
-Having imported the very basic editor components, we can define the custom `BootstrapEditor` class that extends the {@link module:core/editor/standardeditor~StandardEditor `StandardEditor`}:
+Having imported the very basic editor components, you can define the custom `BootstrapEditor` class that extends the {@link module:core/editor/standardeditor~StandardEditor `StandardEditor`}:
 
 ```js
-// Extending the StandardEditor, which brings lots of essential API.
+// Extending the StandardEditor that brings lots of essential API.
 export default class BootstrapEditor extends StandardEditor {
 	constructor( element, config ) {
 		super( element, config );
@@ -89,7 +89,7 @@ export default class BootstrapEditor extends StandardEditor {
 					.then( () => editor._elementReplacer.replace( element, editable.element ) )
 					// Handle the UI of the editor.
 					.then( () => {
-						// Create an editing root in the editing layer. It will correspond with the
+						// Create an editing root in the editing layer. It will correspond to the
 						// document root created in the constructor().
 						const editingRoot = editor.editing.createRoot( 'div' );
 
@@ -98,7 +98,7 @@ export default class BootstrapEditor extends StandardEditor {
 						editable.bind( 'isFocused' ).to( editor.editing.view );
 						editable.name = editingRoot.rootName;
 
-						// Setup the external Bootstrap UI so it works with the editor. Check out the code samples bellow to learn more.
+						// Setup the external Bootstrap UI so it works with the editor. Check out the code samples below to learn more.
 						setupButtons( editor );
 						setupHeadingDropdown( editor );
 
@@ -122,20 +122,20 @@ export default class BootstrapEditor extends StandardEditor {
 
 ## Creating the Bootstrap UI
 
-Although the editor is ready to use, it's just a bare editable area, which isn't much use to the users. Let's give it the actual interface with the toolbar and buttons.
+Although the editor is ready to use, it is just a bare editable area &mdash; which is not much use to the users. You need to give it an actual interface with the toolbar and buttons.
 
 <info-box hint>
-	Please refer to the Bootstrap [quick start guide](https://getbootstrap.com/docs/4.0/getting-started/introduction/) to learn how to include Bootstrap in your web page.
+	Refer to the Bootstrap [quick start guide](https://getbootstrap.com/docs/4.0/getting-started/introduction/) to learn how to include Bootstrap in your web page.
 </info-box>
 
-Having the Bootstrap framework loaded in the web page, we can define the actual UI of the editor in HTML:
+With the Bootstrap framework loaded in the web page, you can define the actual UI of the editor in HTML:
 
 ```html
 <!-- The outermost cotainer of the editor. -->
 <div class="ck-editor">
 	<!-- The toolbar of the editor. -->
 	<div class="btn-toolbar" role="toolbar" aria-label="Editor toolbar">
-		<!-- The headings dropdown. -->
+		<!-- The headings drop-down. -->
 		<div class="btn-group mr-2" role="group" aria-label="Headings">
 			<div class="dropdown" id="heading">
 			  <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>Headings</span></button>
@@ -157,7 +157,7 @@ Having the Bootstrap framework loaded in the web page, we can define the actual
 		</div>
 	</div>
 
-	<!-- The container containing data of the editor. -->
+	<!-- The container with the data of the editor. -->
 	<div id="editor">
 		<p>Hello world!</p>
 	</div>
@@ -167,7 +167,7 @@ Having the Bootstrap framework loaded in the web page, we can define the actual
 Although Bootstrap provides most of the CSS, it does not come with styles dedicated for [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) text editors and some tweaking is needed:
 
 ```css
-/* Let's give the editor some space and limits using a border. */
+/* Give the editor some space and limits using a border. */
 .ck-editor {
 	margin: 1em 0;
 	border: 1px solid rgba( 0, 0, 0, .1 );
@@ -193,8 +193,8 @@ Although Bootstrap provides most of the CSS, it does not come with styles dedica
 	color: #777;
 }
 
-/* Make sure the headings dropdown button does not change its size
-as different headings are selected */
+/* Make sure the headings drop-down button does not change its size
+as different headings are selected. */
 .ck-editor .dropdown-toggle span {
 	display: inline-block;
 	width: 100px;
@@ -204,7 +204,7 @@ as different headings are selected */
 	vertical-align: bottom;
 }
 
-/* Make the headings dropdown items visually distinctive. */
+/* Make the headings drop-down items visually distinctive. */
 .ck-editor .heading-item_heading1 { font-size: 1.5em; }
 .ck-editor .heading-item_heading2 { font-size: 1.3em; }
 .ck-editor .heading-item_heading3 { font-size: 1.1em; }
@@ -226,13 +226,13 @@ as different headings are selected */
 
 ## Binding the UI with the editor
 
-At this stage, we're about to bind the editor created at the very beginning of this guide with the Bootstrap UI defined in HTML. Almost every feature in the editor defines some command, e.g. {@link module:heading/headingcommand~HeadingCommand} or {@link module:undo/undocommand~UndoCommand}. Commands can be executed
+At this stage, you are about to bind the editor created at the very beginning of this guide with the Bootstrap UI defined in HTML. Almost every feature in the editor defines some command, e.g. {@link module:heading/headingcommand~HeadingCommand} or {@link module:undo/undocommand~UndoCommand}. Commands can be executed:
 
 ```js
 editor.exectute( 'undo' );
 ```
 
-but they also come with default observable attributes like `value` and `isEnabled`. These are the entry points when it comes to creating a custom user interface because their values represent the actual state of the editor and can be followed in simple event listeners:
+But they also come with default observable attributes like `value` and `isEnabled`. These are the entry points when it comes to creating a custom user interface because their values represent the actual state of the editor and can be followed in simple event listeners:
 
 ```js
 const command = editor.commands.get( 'undo' );
@@ -250,26 +250,26 @@ command.on( 'change:isEnabled', ( evt, name, isEnabled ) => {
 	To learn more about editor commands, check out the {@link module:core/command~Command} API. You can also `console.log` the {@link module:core/editor/editor~Editor#commands `editor.commands`} collection of a live editor to learn which commands it offers.
 </info-box>
 
-Now let's take a closer look on these two mysterious lines in the `BootstrapEditor#create()` :
+Now take a closer look at these two mysterious lines in the `BootstrapEditor#create()` method:
 
 ```js
 setupButtons( editor );
 setupHeadingDropdown( editor );
 ```
 
-`setupButtons()` is a function that binds the Bootstrap toolbar buttons with the editor features. It activates the related editor commands upon clicking and makes the buttons listen to the state of the commands to update their CSS classes:
+`setupButtons()` is a function that binds Bootstrap toolbar buttons with the editor features. It activates the related editor commands upon clicking and makes the buttons listen to the state of the commands to update their CSS classes:
 
 ```js
 // This function activates Bold, Italic, Underline, Undo and Redo buttons in the toolbar.
 function setupButtons( editor ) {
 	[ 'bold', 'italic', 'underline', 'undo', 'redo' ].forEach( commandName => {
-		// Retrieve the editor command corresponding with the id of the button in DOM.
+		// Retrieve the editor command corresponding with the ID of the button in DOM.
 		const command = editor.commands.get( commandName );
 
 		// Retrieve the jQuery object corresponding with the button in DOM.
 		const button = $( `#${ commandName }` );
 
-		// Clicking on the buttons should execute the editor command...
+		// Clicking the buttons should execute the editor command...
 		button.click( () => editor.execute( commandName ) );
 
 		// ...but it should not steal the focus so the editing is uninterrupted.
@@ -281,7 +281,7 @@ function setupButtons( editor ) {
 		onIsEnabledChange();
 
 		// Bold, Italic and Underline commands have a value that changes
-		// when the selection starts in an element the command creates.
+		// when the selection starts in an element that the command creates.
 		// The button should indicate that the user is editing a text which
 		// is already bold.
 		if ( !new Set( [ 'undo', 'redo' ] ).has( commandName ) ) {
@@ -300,15 +300,15 @@ function setupButtons( editor ) {
 }
 ```
 
-The dropdown in the toolbar is a more complex case because first it must be populated with heading options for the users to select from. Then, clicking each option must execute a related heading command in the editor. Finally, the dropdown button and the dropdown menu items must reflect the state of the editor, e.g. when the selection lands in a heading, a proper menu item should become active and the button should show the name of the heading level.
+The drop-down in the toolbar is a more complex case because first it must be populated with heading options for the users to select from. Then, clicking each option must execute a related heading command in the editor. Finally, the drop-down button and the drop-down menu items must reflect the state of the editor, for example, when the selection lands in a heading, a proper menu item should become active and the button should show the name of the heading level.
 
 ```js
-// This function activates the headings dropdown in the toolbar.
+// This function activates the headings drop-down in the toolbar.
 function setupHeadingDropdown( editor ) {
 	const menu = $( '.ck-editor .dropdown-menu' );
 	const button = $( '.ck-editor .dropdown-toggle' );
 
-	// Create a dropdown menu entry for each heading configuration option.
+	// Create a drop-down menu entry for each heading configuration option.
 	editor.config.get( 'heading.options' ).map( option => {
 		// Retrieve the editor command corresponding with the configuration option.
 		const command = editor.commands.get( option.modelElement );
@@ -319,7 +319,7 @@ function setupHeadingDropdown( editor ) {
 				`${ option.title }` +
 			'</a>' );
 
-		// Upon click, the dropdown menua item should execute the command and focus
+		// Upon clicking, the drop-down menu item should execute the command and focus
 		// the editing view to keep the editing process uninterrupted.
 		menuItem.click( () => {
 			editor.execute( option.modelElement );
@@ -328,7 +328,7 @@ function setupHeadingDropdown( editor ) {
 
 		menu.append( menuItem );
 
-		// Make sure the dropdown and its items reflect the state of the
+		// Make sure the drop-down and its items reflect the state of the
 		// currently active command.
 		command.on( 'change:value', onValueChange );
 		onValueChange();
@@ -355,7 +355,7 @@ function setupHeadingDropdown( editor ) {
 
 ## Running the editor
 
-When the editor class and the user interface are ready, it's time to run the editor. Just make sure all the plugins are loaded and the right DOM element is passed to `BootstrapEditor#create`:
+When the editor class and the user interface are ready, it is time to run the editor. Just make sure all the plugins are loaded and the right DOM element is passed to `BootstrapEditor#create`:
 
 ```js
 BootstrapEditor
@@ -373,4 +373,4 @@ BootstrapEditor
 	} );
 ```
 
-Once everything is working as expected, you may want to create a custom build of your editor to ship it across the applications. To learn more check out the {@link builds/guides/development/custom-builds custom builds} guide.
+Once everything is working as expected, you may want to create a custom build of your editor to ship it across the applications. To learn more check out the {@link builds/guides/development/custom-builds Creating custom builds} guide.