8
0
Maciej Gołaszewski 6 лет назад
Родитель
Сommit
c41e3d0714

+ 0 - 0
packages/ckeditor5-restricted-editing/docs/_snippets/features/build-restricted-editing-source.html


+ 22 - 0
packages/ckeditor5-restricted-editing/docs/_snippets/features/build-restricted-editing-source.js

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright (c) 2003-2019, 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 RestrictedEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/restrictededitingmode';
+import StandardEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/standardeditingmode';
+
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import Table from '@ckeditor/ckeditor5-table/src/table';
+
+ClassicEditor.builtinPlugins.push(
+	RestrictedEditingMode, StandardEditingMode, ArticlePluginSet, Table );
+
+window.ClassicEditor = ClassicEditor;
+// window.RestrictedEditingMode = RestrictedEditingMode;
+// window.StandardEditingMode = StandardEditingMode;
+// window.ArticlePluginSet = ArticlePluginSet;
+// window.Ta = Ta;

+ 31 - 0
packages/ckeditor5-restricted-editing/docs/_snippets/features/restricted-editing.html

@@ -0,0 +1,31 @@
+<p>
+	<b>Mode</b>:
+	<input type="radio" id="mode-standard" name="editor-restriction-mode" value="standard" checked><label for="mode-standard">Standard</label>
+	<input type="radio" id="mode-restricted" name="editor-restriction-mode" value="restricted"><label for="mode-restricted">Restricted</label>
+</p>
+
+<div id="restricted-editing-editor">
+	<h2>Heading 1</h2>
+	<p>Paragraph <span class="ck-restricted-editing-exception">it is editable</span></p>
+	<p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
+	<ul>
+		<li>UL List item 1</li>
+		<li>UL List item 2</li>
+	</ul>
+	<ol>
+		<li><span class="ck-restricted-editing-exception">OL List item 1</span></li>
+		<li>OL List item 2</li>
+	</ol>
+	<figure class="image image-style-side">
+		<img alt="bar" src="%BASE_PATH%/assets/img/fields.jpg">
+		<figcaption>Caption</figcaption>
+	</figure>
+	<blockquote>
+		<p>Quote</p>
+		<ul>
+			<li>Quoted UL List item 1</li>
+			<li>Quoted UL List item <span class="ck-restricted-editing-exception">2</span></li>
+		</ul>
+		<p>Quote</p>
+	</blockquote>
+</div>

+ 62 - 0
packages/ckeditor5-restricted-editing/docs/_snippets/features/restricted-editing.js

@@ -0,0 +1,62 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, window, document */
+
+const restrictedModeButton = document.getElementById( 'mode-restricted' );
+const standardModeButton = document.getElementById( 'mode-standard' );
+
+restrictedModeButton.addEventListener( 'change', handleModeChange );
+standardModeButton.addEventListener( 'change', handleModeChange );
+
+startMode( document.querySelector( 'input[name="editor-restriction-mode"]:checked' ).value );
+
+async function handleModeChange( evt ) {
+	await startMode( evt.target.value );
+}
+
+async function startMode( selectedMode ) {
+	if ( selectedMode === 'standard' ) {
+		await startStandardEditingMode();
+	} else {
+		await startRestrictedEditingMode();
+	}
+}
+
+async function startStandardEditingMode() {
+	await reloadEditor( {
+		removePlugins: [ 'RestrictedEditingMode' ],
+		toolbar: [
+			'heading', '|', 'bold', 'italic', 'link', '|',
+			'bulletedList', 'numberedList', 'blockQuote', 'insertTable', '|',
+			'restrictedEditingException', '|', 'undo', 'redo'
+		],
+		image: {
+			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+		},
+		table: {
+			contentToolbar: [
+				'tableColumn',
+				'tableRow',
+				'mergeTableCells'
+			]
+		}
+	} );
+}
+
+async function startRestrictedEditingMode() {
+	await reloadEditor( {
+		removePlugins: [ 'StandardEditingMode' ],
+		toolbar: [ 'bold', 'italic', 'link', '|', 'restrictedEditing', '|', 'undo', 'redo' ]
+	} );
+}
+
+async function reloadEditor( config ) {
+	if ( window.editor ) {
+		await window.editor.destroy();
+	}
+
+	window.editor = await ClassicEditor.create( document.querySelector( '#restricted-editing-editor' ), config );
+}

+ 34 - 0
packages/ckeditor5-restricted-editing/docs/api/restricted-editing.md

@@ -0,0 +1,34 @@
+---
+category: api-reference
+---
+
+# CKEditor 5 restricted editing feature
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-restricted-editing.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-restricted-editing)
+
+This package implements the restricted editing feature for CKEditor 5.
+
+## Demo
+
+Check out the {@link features/restricted-editing#demo demo in the restricted editing feature} guide.
+
+## Documentation
+
+See the {@link features/restricted-editing restricted editing feature} guide and the {@link module:restricted-editing/restrictededitingmode~RestrictedEditingMode} and {@link module:restricted-editing/standardeditingmode~StandardEditingMode} plugins documentation.
+
+## Installation
+
+```bash
+npm install --save @ckeditor/ckeditor5-restricted-editing
+```
+
+## Contribute
+
+The source code of this package is available on GitHub in https://github.com/ckeditor/ckeditor5-restricted-editing.
+
+## External links
+
+* [`@ckeditor/ckeditor5-restricted-editing` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-restricted-editing)
+* [`ckeditor/ckeditor5-restricted-editing` on GitHub](https://github.com/ckeditor/ckeditor5-restricted-editing)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5/issues)
+* [Changelog](https://github.com/ckeditor/ckeditor5-restricted-editing/blob/master/CHANGELOG.md)

+ 70 - 0
packages/ckeditor5-restricted-editing/docs/features/restricted-editing.md

@@ -0,0 +1,70 @@
+---
+title: Restricted editing
+menu-title: Restricted editing
+category: features
+---
+
+{@snippet features/build-restricted-editing-source}
+
+The ...
+
+## Demo
+
+The demo below works in two modes: "Standard Editing Mode" and "Restricted Editing Mode". Using the radio buttons below you can switch between modes.
+
+{@snippet features/restricted-editing}
+
+## Installation
+
+To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-restricted-editing`](https://www.npmjs.com/package/@ckeditor/ckeditor5-restricted-editing) package:
+
+```bash
+npm install --save @ckeditor/ckeditor5-restricted-editing
+```
+
+### Running the Standard Editing Mode
+
+And add it to your plugin list and the toolbar configuration:
+
+```js
+import StandardEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/standardeditingmode';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ StandardEditingMode, ... ],
+		toolbar: [ 'restrictedEditingException', ... ]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+### Running the Restricted Editing Mode
+
+And add it to your plugin list and the toolbar configuration:
+
+```js
+import RestrictedEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/restrictededitingmode';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ RestrictedEditingMode, ... ],
+		toolbar: [ 'restrictedEditing', ... ]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+
+<info-box info>
+	Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
+</info-box>
+
+## Common API
+
+<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-restricted-editing.

+ 5 - 5
packages/ckeditor5-restricted-editing/tests/manual/restrictedediting.js

@@ -20,15 +20,15 @@ standardModeButton.addEventListener( 'change', handleModeChange );
 
 startMode( document.querySelector( 'input[name="mode"]:checked' ).value );
 
-function handleModeChange( evt ) {
-	startMode( evt.target.value );
+async function handleModeChange( evt ) {
+	await startMode( evt.target.value );
 }
 
-function startMode( selectedMode ) {
+async function startMode( selectedMode ) {
 	if ( selectedMode === 'standard' ) {
-		startStandardEditingMode();
+		await startStandardEditingMode();
 	} else {
-		startRestrictedEditingMode();
+		await startRestrictedEditingMode();
 	}
 }