Browse Source

Added manual test with full set of icons.

Damian Konopka 8 years ago
parent
commit
1a4ca8e5cf

+ 3 - 1
packages/ckeditor5-theme-lark/package.json

@@ -10,8 +10,10 @@
     "@ckeditor/ckeditor5-ui": "^1.0.0-alpha.2"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.2",
+	"@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-core": "^1.0.0-alpha.2",
+	"@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.2",
+	"@ckeditor/ckeditor5-engine": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.2",
     "eslint": "^4.8.0",
     "eslint-config-ckeditor5": "^1.0.7",

+ 13 - 0
packages/ckeditor5-theme-lark/tests/manual/iconset.html

@@ -0,0 +1,13 @@
+<div id="editor">
+	<p><a href="http://ckeditor.com">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
+	<p>dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
+	<blockquote>
+		<p>Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
+	</blockquote>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat.</p>
+	<p>Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
+	<figure class="image">
+		<img src="logo.png" alt="CKEditor logo" />
+	</figure>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
+</div>

+ 86 - 0
packages/ckeditor5-theme-lark/tests/manual/iconset.js

@@ -0,0 +1,86 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document, console, window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+
+import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
+import strikethroughIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/strikethrough.svg';
+import underlineIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/underline.svg';
+import unlinkIcon from '@ckeditor/ckeditor5-link/theme/icons/unlink.svg';
+
+class FakeIcons extends Plugin {
+    init() {
+        const editor = this.editor;
+
+        editor.ui.componentFactory.add( 'insertImage', locale => {
+            const view = new ButtonView( locale );
+
+            view.set( {
+                label: 'Insert image',
+                icon: imageIcon,
+                tooltip: true
+            } );
+
+            return view;
+		} );
+
+		editor.ui.componentFactory.add( 'strikethrough', locale => {
+            const view = new ButtonView( locale );
+
+            view.set( {
+                label: 'Strikethrough',
+                icon: strikethroughIcon,
+                tooltip: true
+            } );
+
+            return view;
+		} );
+
+		editor.ui.componentFactory.add( 'underline', locale => {
+            const view = new ButtonView( locale );
+
+            view.set( {
+                label: 'Underline',
+                icon: underlineIcon,
+                tooltip: true
+            } );
+
+            return view;
+		} );
+
+		editor.ui.componentFactory.add( 'unlink', locale => {
+            const view = new ButtonView( locale );
+
+            view.set( {
+                label: 'Unlink',
+                icon: unlinkIcon,
+                tooltip: true
+            } );
+
+            return view;
+		} );
+    }
+}
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [
+			ArticlePluginSet, FakeIcons
+		],
+		toolbar: [ 'headings', 'bold', 'italic', 'strikethrough', 'underline', 'link', 'unlink', 'bulletedList', 'numberedList', 'blockquote', 'undo', 'redo', 'imagestylefull', 'imagestyleside', 'imagetextalternative', 'insertImage' ]
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 19 - 0
packages/ckeditor5-theme-lark/tests/manual/iconset.md

@@ -0,0 +1,19 @@
+## Full icons preset
+
+Check out icons in toolbar:
+
+* bold
+* italic
+* strikethrough
+* underline
+* link
+* unlink
+* bulleted list
+* numbered list
+* blockquote
+* undo
+* redo
+* image full style
+* image side style
+* alternative text
+* image

BIN
packages/ckeditor5-theme-lark/tests/manual/logo.png