Explorar el Código

Docs: Added the feature guide.

Aleksander Nowodzinski hace 5 años
padre
commit
dce3e51f46

+ 0 - 0
packages/ckeditor5-select-all/docs/_snippets/features/build-select-all-source.html


+ 16 - 0
packages/ckeditor5-select-all/docs/_snippets/features/build-select-all-source.js

@@ -0,0 +1,16 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
+
+ClassicEditor.builtinPlugins.push( Bold, Italic, Underline );
+
+window.ClassicEditor = ClassicEditor;

+ 13 - 0
packages/ckeditor5-select-all/docs/_snippets/features/select-all.html

@@ -0,0 +1,13 @@
+<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>
+
+	<figure class="image image-style-side"><img src="%BASE_PATH%/assets/img/volcano.jpg" alt="A lone wanderer looking at Mount Bromo volcano in Indonesia.">
+		<figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
+	</figure>
+
+	<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>

+ 33 - 0
packages/ckeditor5-select-all/docs/_snippets/features/select-all.js

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		toolbar: {
+			items: [
+				'heading',
+				'|',
+				'bold',
+				'italic',
+				'underline',
+				'link',
+				'insertTable',
+				'|',
+				'undo',
+				'redo',
+				'|',
+				'selectAll'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 62 - 0
packages/ckeditor5-select-all/docs/features/select-all.md

@@ -0,0 +1,62 @@
+---
+title: Select all
+category: features
+---
+
+{@snippet features/build-select-all-source}
+
+The {@link module:select-all/selectall~SelectAll} feature allows selecting the entire content of the editor using the <kbd>Ctrl/⌘</kbd>+<kbd>A</kbd> keystroke or a toolbar button.
+
+## Demo
+
+Press <kbd>Ctrl/⌘</kbd>+<kbd>A</kbd> or use the toolbar button to select the entire content of the editor. Note that when editing an image caption, the selection will only expand to the boundaries of the caption.
+
+{@snippet features/select-all}
+
+## Installation
+
+<info-box info>
+	This feature is enabled by default in all builds (loaded by the {@link module:essentials/essentials~Essentials} plugin). The installation instructions are for developers interested in building their own, custom rich text editor.
+</info-box>
+
+To add this feature to your editor, install the [`@ckeditor/ckeditor5-select-all`](https://www.npmjs.com/package/@ckeditor/ckeditor5-select-all) package:
+
+```bash
+npm install --save @ckeditor/ckeditor5-select-all
+```
+
+Then add the `SelectAll` plugin to your plugin list:
+
+```js
+import SelectAll from '@ckeditor/ckeditor5-select-all/src/selectall';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		// Load the plugin.
+		plugins: [ SelectAll, ... ],
+
+		// Display the "Select all" button in the toolbar.
+		toolbar: [ 'selectAll', ... ],
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+## Common API
+
+The {@link module:select-all/selectall~SelectAll} plugin registers the `'selectAll'` UI button component and the `'selectAll'` command implemented by {@link module:select-all/selectallcommand~SelectAllCommand}.
+
+The command can be executed using the {@link module:core/editor/editor~Editor#execute `editor.execute()`} method:
+
+```js
+// Select the entire content of the editor.
+editor.execute( 'selectAll' );
+```
+
+<info-box>
+	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
+</info-box>
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-select-all.