8
0
Просмотр исходного кода

Merge pull request #1801 from ckeditor/i/5569

Docs: Fix custom figure attributes snippet. Closes ckeditor/ckeditor5#5569.
Piotrek Koszuliński 6 лет назад
Родитель
Сommit
5832ac6509

+ 27 - 10
packages/ckeditor5-engine/docs/_snippets/framework/extending-content-custom-figure-attributes.js

@@ -10,16 +10,33 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 /**
  * Plugin that converts custom attributes for elements that are wrapped in <figure> in the view.
  */
-function CustomFigureAttributes( editor ) {
-	// Define on which elements the CSS classes should be preserved:
-	setupCustomClassConversion( 'img', 'image', editor );
-	setupCustomClassConversion( 'table', 'table', editor );
-
-	editor.conversion.for( 'upcast' ).add( upcastCustomClasses( 'figure' ), { priority: 'low' } );
-
-	// Define custom attributes that should be preserved.
-	setupCustomAttributeConversion( 'img', 'image', 'id', editor );
-	setupCustomAttributeConversion( 'table', 'table', 'id', editor );
+class CustomFigureAttributes {
+	/**
+	 * Plugin's constructor - receives editor instance on creation.
+	 */
+	constructor( editor ) {
+		// Save reference to the editor.
+		this.editor = editor;
+	}
+
+	/**
+	 * Setups conversion and extends table & image features schema.
+	 *
+	 * Schema extending must be done in the “afterInit()” call because plugins define their schema in “init()“.
+	 */
+	afterInit() {
+		const editor = this.editor;
+
+		// Define on which elements the CSS classes should be preserved:
+		setupCustomClassConversion( 'img', 'image', editor );
+		setupCustomClassConversion( 'table', 'table', editor );
+
+		editor.conversion.for( 'upcast' ).add( upcastCustomClasses( 'figure' ), { priority: 'low' } );
+
+		// Define custom attributes that should be preserved.
+		setupCustomAttributeConversion( 'img', 'image', 'id', editor );
+		setupCustomAttributeConversion( 'table', 'table', 'id', editor );
+	}
 }
 
 /**

+ 29 - 12
packages/ckeditor5-engine/docs/framework/guides/deep-dive/conversion-preserving-custom-content.md

@@ -158,7 +158,7 @@ function ConvertDivAttributes( editor ) {
 		}
 	} );
 
-	// Model-to-view converter for the <div> element (attrbiutes are converted separately).
+	// Model-to-view converter for the <div> element (attributes are converted separately).
 	editor.conversion.for( 'downcast' ).elementToElement( {
 		model: 'div',
 		view: 'div'
@@ -290,16 +290,33 @@ The sample below is extensible. To add your own attributes to preserve, just add
 /**
  * Plugin that converts custom attributes for elements that are wrapped in <figure> in the view.
  */
-function CustomFigureAttributes( editor ) {
-	// Define on which elements the CSS classes should be preserved:
-	setupCustomClassConversion( 'img', 'image', editor );
-	setupCustomClassConversion( 'table', 'table', editor );
-
-	editor.conversion.for( 'upcast' ).add( upcastCustomClasses( 'figure' ), { priority: 'low' } );
-
-	// Define custom attributes that should be preserved.
-	setupCustomAttributeConversion( 'img', 'image', 'id', editor );
-	setupCustomAttributeConversion( 'table', 'table', 'id', editor );
+class CustomFigureAttributes {
+	/**
+	 * Plugin's constructor - receives editor instance on creation.
+	 */
+	constructor( editor ) {
+		// Save reference to the editor.
+		this.editor = editor;
+	}
+
+	/**
+	 * Setups conversion and extends table & image features schema.
+	 *
+	 * Schema extending must be done in the “afterInit()” call because plugins define their schema in “init()“.
+	 */
+	afterInit() {
+		const editor = this.editor;
+
+		// Define on which elements the CSS classes should be preserved:
+		setupCustomClassConversion( 'img', 'image', editor );
+		setupCustomClassConversion( 'table', 'table', editor );
+
+		editor.conversion.for( 'upcast' ).add( upcastCustomClasses( 'figure' ), { priority: 'low' } );
+
+		// Define custom attributes that should be preserved.
+		setupCustomAttributeConversion( 'img', 'image', 'id', editor );
+		setupCustomAttributeConversion( 'table', 'table', 'id', editor );
+	}
 }
 
 /**
@@ -451,4 +468,4 @@ ClassicEditor
 
 ## What's next?
 
-If you would like to read more about how to extend the output of existing CKEditor 5 features, refer to the {@link framework/guides/deep-dive/conversion-extending-output Extending the editor output} guide.
+If you would like to read more about how to extend the output of existing CKEditor 5 features, refer to the {@link framework/guides/deep-dive/conversion-extending-output Extending the editor output} guide.