Explorar o código

Docs: paste plain text guide with demo; related features for paste guides; raw HTML placeholder. [skip ci]

godai78 %!s(int64=5) %!d(string=hai) anos
pai
achega
6fbbdf2800

+ 0 - 0
packages/ckeditor5-clipboard/docs/_snippets/features/build-paste-source.html


+ 43 - 0
packages/ckeditor5-clipboard/docs/_snippets/features/build-paste-source.js

@@ -0,0 +1,43 @@
+/**
+ * @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 PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
+import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
+import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
+import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
+import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
+import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
+import Font from '@ckeditor/ckeditor5-font/src/font';
+import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
+import Indent from '@ckeditor/ckeditor5-indent/src/indent';
+import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
+import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
+import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
+import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
+
+ClassicEditor.builtinPlugins.push(
+	PasteFromOffice,
+	Alignment,
+	Code,
+	Strikethrough,
+	Subscript,
+	Superscript,
+	Underline,
+	Font,
+	HorizontalLine,
+	Indent,
+	IndentBlock,
+	ImageResize,
+	TableProperties,
+	TableCellProperties
+);
+
+ClassicEditor.defaultConfig.table.contentToolbar.push( 'tableProperties', 'tableCellProperties' );
+
+window.ClassicEditor = ClassicEditor;

+ 15 - 0
packages/ckeditor5-clipboard/docs/_snippets/features/paste-plaintext.html

@@ -0,0 +1,15 @@
+<div id="snippet-paste-plaintext">
+<p>In typography, emphasis is the strengthening of words in a text with a font in a different style from the rest of the text, to highlight them. It is the equivalent of prosodic stress in speech.</p>
+
+<p><em>Italic type is a cursive font based on a stylised form of calligraphic handwriting. Owing to the influence from calligraphy, italics normally slant slightly to the right. One manual of English usage described italics as &quot;the print equivalent of underlining&quot;; in other words, underscore in a manuscript directs a typesetter to use italic.</em></p>
+
+<p><em>Italics are a way to emphasise key points in a printed text, to identify many types of creative works, to cite foreign words or phrases, or, when quoting a speaker, a way to show which words they stressed.</em></p>
+
+<p><strong>A bold font weight makes letters of a text thicker than the surrounding text. It adds certain blackness to the type. Bold strongly stands out from regular text, and is often used to highlight keywords important to the text&#39;s content.</strong></p>
+
+<p><strong>For example, printed dictionaries often use boldface for their keywords, and the names of entries can conventionally be marked in bold.</strong></p>
+
+<p><u>Professional Western typesetting usually does not employ lines under letters for emphasis within running text, because it is considered too distracting.</u></p>
+
+<p><u>Underlining is, however, often used with typewriters, in handwriting and with some non-alphabetic scripts. It is also used for secondary emphasis, i.e. marks added by the reader and not the author.</u></p>
+</div>

+ 84 - 0
packages/ckeditor5-clipboard/docs/_snippets/features/paste-plaintext.js

@@ -0,0 +1,84 @@
+/**
+ * @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 */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-paste-plaintext' ), {
+		toolbar: {
+			items: [
+				'heading',
+				'|',
+				'fontSize',
+				'fontFamily',
+				'fontColor',
+				'fontBackgroundColor',
+				'|',
+				'bold',
+				'italic',
+				'underline',
+				'strikethrough',
+				'|',
+				'alignment',
+				'|',
+				'numberedList',
+				'bulletedList',
+				'|',
+				'indent',
+				'outdent',
+				'|',
+				'link',
+				'imageUpload',
+				'insertTable',
+				'horizontalLine',
+				'|',
+				'undo',
+				'redo'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		image: {
+			styles: [
+				'full',
+				'alignLeft',
+				'alignRight'
+			],
+			toolbar: [
+				'imageStyle:alignLeft',
+				'imageStyle:full',
+				'imageStyle:alignRight',
+				'|',
+				'imageTextAlternative'
+			]
+		},
+		table: {
+			contentToolbar: [
+				'tableColumn',
+				'tableRow',
+				'mergeTableCells',
+				'tableProperties',
+				'tableCellProperties'
+			]
+		},
+		fontFamily: {
+			supportAllValues: true
+		},
+		fontSize: {
+			options: [ 10, 12, 14, 'default', 18, 20, 22 ],
+			supportAllValues: true
+		},
+		placeholder: 'Paste the content here to test the feature.',
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editor = editor;
+		// Prevent showing a warning notification when user is pasting a content from MS Word or Google Docs.
+		window.preventPasteFromOfficeNotification = true;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 13 - 8
packages/ckeditor5-clipboard/docs/features/paste-plaintext.md

@@ -4,6 +4,8 @@ category: features-pasting
 order: 30
 ---
 
+{@snippet features/build-paste-source}
+
 # Pasting plain text
 
 The Paste from Word feature is provided through the {@link module:clipboard/clipboard~Clipboard} plugin), which is responsible for the integration with the native clipboard and intercepts all native events like `copy`, `cut` or `drop` and handles them on its side. The goal is to not allow the browser to touch the content in the rich text editor which would lead to the browser messing it up.
@@ -14,25 +16,28 @@ Pasting plain text with a double line break will turn it into a paragraph. This
 
 ## Demo
 
-To test how Paste from Office works, download the [sample Word document](../../assets/CKEditor5.PFO.Sample.Recognition_of_Achievement.docx), open it in Microsoft Word, copy the content, and paste it into CKEditor 5 below.
+Paste plain text between the styled paragraphs below using the <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> to test the style inheritance. Paste without modifier to retain styleless text. You can copy this very paragraph for convenience.
+
+{@snippet features/paste-plaintext}
+
+## Related features
 
-{@snippet features/paste-from-office}
+CKEditor 5 supports a wider range of paste features, including:
+* {@link features/paste-from-word Paste from Word} &ndash; Allows you to paste content from Microsoft Word and maintain the original structure and formatting
+* {@link features/paste-from-google-docs Paste from Google Docs} &ndash; Allows you to paste content from Google Docs maintaining the original formatting and structure.
+* Raw HTML embedding &ndash; Lets you paste HTML source into the edited content and keep the output.
 
 ## Installation
 
 <info-box info>
-	This feature is enabled by default in all official builds. The installation instructions are for developers interested in building their own custom rich-text editor.
+	This feature is enabled by default in all official builds. <!-- The installation instructions are for developers interested in building their own custom rich-text editor. -->
 </info-box>
 
 ## Support for other applications
 
-At the current stage, the focus of the `@ckeditor/ckeditor5-paste-from-office` package is on supporting content that comes from Microsoft Word and {@link features/paste-from-google-docs Google Docs}. However, it does not mean that pasting from other similar applications (such as Microsoft Excel) is not supported.
-
-By default, CKEditor 5 will support pasting rich-text content from these applications, however, some styles and formatting may be lost, depending on the source application. Also, other minor bugs may appear.
-
 You can find more information regarding compatibility with other applications in [this ticket](https://github.com/ckeditor/ckeditor5/issues/1184#issuecomment-409828069).
 
-If you think that support for any of the applications needs improvements, please add 👍 and comments in the following issues:
+If you think that support for any of the applications needs improvements, please add 👍  and comments in the following issues:
 
 * [Support pasting from Excel](https://github.com/ckeditor/ckeditor5/issues/2513).
 * [Support pasting from Libre Office](https://github.com/ckeditor/ckeditor5/issues/2520).

+ 7 - 0
packages/ckeditor5-paste-from-office/docs/features/paste-from-google-docs.md

@@ -36,6 +36,13 @@ With CKEditor 5 you do not need to worry about pasting messy content from Google
 
 This means that if you did not enable, for instance, {@link features/font font family and font size} features, this sort of formatting will be automatically stripped off when you paste content from Google Docs and other sources (e.g. other websites).
 
+## Related features
+
+CKEditor 5 supports a wider range of paste features, including:
+* {@link features/paste-plaintext Paste plain text} &ndash; Detects when a plain text is pasted and act accordingly.
+* {@link features/paste-from-word Paste from Word} &ndash; Allows you to paste content from Microsoft Word and maintain the original structure and formatting
+* Raw HTML embedding &ndash; Lets you paste HTML source into the edited content and keep the output.
+
 ## Installation
 
 <info-box info>

+ 7 - 0
packages/ckeditor5-paste-from-office/docs/features/paste-from-word.md

@@ -36,6 +36,13 @@ With CKEditor 5 you do not need to worry about pasting messy content from Micros
 
 This means that if you did not enable, for instance, {@link features/font font family and font size} features, this sort of formatting will be automatically stripped off when you paste content from Microsoft Word and other sources (e.g. other websites).
 
+## Related features
+
+CKEditor 5 supports a wider range of paste features, including:
+* {@link features/paste-plaintext Paste plain text} &ndash; Detects when a plain text is pasted and act accordingly.
+* {@link features/paste-from-word Paste from Word} &ndash; Allows you to paste content from Microsoft Word and maintain the original structure and formatting
+* Raw HTML embedding &ndash; Lets you paste HTML source into the edited content and keep the output.
+
 ## Installation
 
 <info-box info>