Răsfoiți Sursa

Docs: Added the feature guide.

Piotrek Koszuliński 8 ani în urmă
părinte
comite
bfe98cacb2

+ 5 - 0
packages/ckeditor5-markdown-gfm/docs/_snippets/features/markdown.html

@@ -0,0 +1,5 @@
+<div id="snippet-markdown">This is [CKEditor 5](https://ckeditor5.github.io).</div>
+
+<p>Output:</p>
+
+<pre><code id="snippet-markdown-output"></code></pre>

+ 42 - 0
packages/ckeditor5-markdown-gfm/docs/_snippets/features/markdown.js

@@ -0,0 +1,42 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document, setTimeout */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
+import ArticlePreset from '@ckeditor/ckeditor5-presets/src/article';
+
+import GFMDataProcessor from '@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor';
+
+function Markdown( editor ) {
+	editor.data.processor = new GFMDataProcessor();
+}
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-markdown' ), {
+		plugins: [ ArticlePreset, Markdown ],
+		toolbar: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+		image: {
+			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		const outputElement = document.querySelector( '#snippet-markdown-output' );
+
+		editor.document.on( 'changesDone', () => {
+			outputElement.innerText = editor.getData();
+		} );
+
+		// Set the initial data with delay so hightlight.js doesn't catch them.
+		setTimeout( () => {
+			outputElement.innerText = editor.getData();
+		}, 500 );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 56 - 0
packages/ckeditor5-markdown-gfm/docs/features/markdown.md

@@ -0,0 +1,56 @@
+---
+title: Markdown output
+category: features
+---
+
+The {@link module:markdown-gfm/gfmdataprocessor~GFMDataProcessor} class implements a {@link module:engine/dataprocessor/dataprocessor~DataProcessor data processor} which changes CKEditor's output from HTML to Markdown. This means that you can {@link module:core/editor/editor~StandardEditor#setData set} or {@link module:core/editor/editor~StandardEditor#getData get} data from the editor in the Markdown format:
+
+```js
+editor.getData(); // -> 'This is [CKEditor 5](https://ckeditor5.github.io).'
+
+editor.setData( 'This is **bold**.' );
+```
+
+<info-box info>
+	"GFM" stands for "GitHub Flavored Markdown" – a Markdown dialect used by [GitHub](https://github.com). Markdown, not having any formal specification, has many dialects often incompatible with each other. When converting the output produced by this data processor make sure to use a compatible Markdown to HTML converter (e.g. the [marked](https://www.npmjs.com/package/marked) library).
+</info-box>
+
+## Installation
+
+To enable this data processor in your editor install the [`@ckeditor/ckeditor5-markdown-gfm`](https://www.npmjs.com/package/@ckeditor/ckeditor5-markdown-gfm) package:
+
+```
+npm install --save @ckeditor/ckeditor5-markdown-gfm
+```
+
+Then, you can enable this data processor by creating a simple plugin which will load it:
+
+```js
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
+import ArticlePreset from '@ckeditor/ckeditor5-presets/src/article';
+
+import GFMDataProcessor from '@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor';
+
+// Simple plugin which loads the data processor.
+function Markdown( editor ) {
+	editor.data.processor = new GFMDataProcessor();
+}
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-markdown' ), {
+		plugins: [ ArticlePreset, Markdown ],
+		// ...
+	} )
+	.then( ... )
+	.catch( ... );
+
+```
+
+## Demo
+
+{@snippet features/markdown}
+
+## Contribute
+
+The source code of this feature is available on GitHub in https://github.com/ckeditor/ckeditor5-markdown-gfm.