Răsfoiți Sursa

Added ImageEngine feature and simple manual test.

Szymon Kupś 9 ani în urmă
părinte
comite
5cdbfa7660

+ 47 - 0
packages/ckeditor5-image/src/imageengine.js

@@ -0,0 +1,47 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import Feature from '/ckeditor5/core/feature.js';
+import buildModelConverter from '/ckeditor5/engine/conversion/buildmodelconverter.js';
+import buildViewConverter from '/ckeditor5/engine/conversion/buildviewconverter.js';
+import ViewContainerElement from '/ckeditor5/engine/view/containerelement.js';
+import ModelElement from '/ckeditor5/engine/model/element.js';
+
+export default class ImageEngine extends Feature {
+	init() {
+		const editor = this.editor;
+		const modelDocument = editor.document;
+		const dataPipeline = editor.data;
+		const editingPipeline = editor.editing;
+
+		// Configure schema.
+		modelDocument.schema.registerItem( 'image', '$block' );
+		modelDocument.schema.allow( { name: 'image', attributes: [ 'src', 'alt' ] } );
+
+		// Build converter from model to view for data and editing pipelines.
+		buildModelConverter().for( dataPipeline.modelToView, editingPipeline.modelToView )
+			.fromElement( 'image' )
+			.toElement( ( data ) => {
+				return widgetize( new ViewContainerElement( 'img', {
+					src: data.item.getAttribute( 'src' ),
+					alt: data.item.getAttribute( 'alt' ),
+				} ) );
+			} );
+
+		// Build converter from view to model for data pipeline.
+		buildViewConverter().for( dataPipeline.viewToModel )
+			.fromElement( 'img' ).consuming( { name: true, attributes: [ 'src', 'alt' ] } )
+			.toElement( ( viewElement ) => new ModelElement( 'image', {
+				src: viewElement.getAttribute( 'src' ),
+				alt: viewElement.getAttribute( 'alt' )
+			} ) );
+	}
+}
+
+function widgetize( element ) {
+	element.isWidget = true;
+
+	return element;
+}

+ 8 - 0
packages/ckeditor5-image/tests/manual/image.html

@@ -0,0 +1,8 @@
+<head>
+	<link rel="stylesheet" href="%APPS_DIR%ckeditor/build/modules/amd/theme/ckeditor.css">
+</head>
+<div id="editor">
+	<p>This is an editor instance.</p>
+	<img src="http://a.cksource.com/e/1/img/logo-ckeditor-h100.png" />
+	<p>Another line.</p>
+</div>

+ 22 - 0
packages/ckeditor5-image/tests/manual/image.js

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document, console */
+
+import ClassicEditor from '/ckeditor5/editor-classic/classic.js';
+import EnterFeature from '/ckeditor5/enter/enter.js';
+import TypingFeature from '/ckeditor5/typing/typing.js';
+import ParagraphFeature from '/ckeditor5/paragraph/paragraph.js';
+import UndoFeature from '/ckeditor5/undo/undo.js';
+import HeadingFeature from '/ckeditor5/heading/heading.js';
+import ImageFeature from '/ckeditor5/image/imageengine.js';
+
+ClassicEditor.create( document.querySelector( '#editor' ), {
+	features: [ EnterFeature, TypingFeature, ParagraphFeature, UndoFeature, HeadingFeature, ImageFeature ],
+	toolbar: [ 'headings' ]
+} )
+.catch( err => {
+	console.error( err.stack );
+} );

+ 4 - 0
packages/ckeditor5-image/tests/manual/image.md

@@ -0,0 +1,4 @@
+@bender-ui: collapsed
+@bender-tags: view
+
+## Image feature