diff --git a/packages/ckeditor5-markdown-gfm/tests/manual/markdown.html b/packages/ckeditor5-markdown-gfm/tests/manual/markdown.html new file mode 100644 index 00000000000..e9e38a7dde2 --- /dev/null +++ b/packages/ckeditor5-markdown-gfm/tests/manual/markdown.html @@ -0,0 +1,31 @@ + + +
This is [CKEditor 5](https://ckeditor.com). +![Sample image](./sample.jpg) + +```javascript +function fancyAlert(arg) { + if(arg) { + $.facebox({div:'#foo'}) + } +} +``` + +First Header | Second Header +------------ | ------------- +Content from cell 1 | Content from cell 2 +Content in the first column | Content in the second column +
+ +

Output:

+ +
diff --git a/packages/ckeditor5-markdown-gfm/tests/manual/markdown.js b/packages/ckeditor5-markdown-gfm/tests/manual/markdown.js new file mode 100644 index 00000000000..474ba4d19a8 --- /dev/null +++ b/packages/ckeditor5-markdown-gfm/tests/manual/markdown.js @@ -0,0 +1,71 @@ +/** + * @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 console, window, document, setTimeout */ + +import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; + +import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset'; +import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown'; +import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'; +import TodoList from '@ckeditor/ckeditor5-list/src/todolist'; +import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties'; +import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties'; +import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'; +import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; + +ClassicEditor + .create( document.querySelector( '#editor' ), { + plugins: [ Markdown, ArticlePluginSet, Code, CodeBlock, Strikethrough, TodoList, TableProperties, TableCellProperties ], + toolbar: [ + 'heading', + '|', + 'bold', + 'italic', + 'strikethrough', + 'underline', + 'link', + '|', + 'code', + 'codeBlock', + '|', + 'todoList', + 'bulletedList', + 'numberedList', + '|', + 'outdent', + 'indent', + '|', + 'blockQuote', + 'insertTable', + '|', + 'undo', + 'redo' + ], + image: { + toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ] + }, + table: { + contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ], + tableToolbar: [ 'bold', 'italic' ] + } + } ) + .then( editor => { + window.editor = editor; + + const outputElement = document.querySelector( '#markdown-output' ); + + editor.model.document.on( 'change', () => { + 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 ); + } ); diff --git a/packages/ckeditor5-markdown-gfm/tests/manual/markdown.md b/packages/ckeditor5-markdown-gfm/tests/manual/markdown.md new file mode 100644 index 00000000000..8a87c9f5369 --- /dev/null +++ b/packages/ckeditor5-markdown-gfm/tests/manual/markdown.md @@ -0,0 +1,9 @@ +#### GitHub Flavored Markdown Editor + +- Play around with [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/). +- See the markdown generated in the "output" box. +- You can use `editor.setData( markdownString )` to set markdown content: + +```js +editor.setData( 'This\n\n*is*\n\n**MARKDOWN!**' ); +``` diff --git a/packages/ckeditor5-markdown-gfm/tests/manual/sample.jpg b/packages/ckeditor5-markdown-gfm/tests/manual/sample.jpg new file mode 100644 index 00000000000..b77d07e7bff Binary files /dev/null and b/packages/ckeditor5-markdown-gfm/tests/manual/sample.jpg differ