ソースを参照

Docs: Added a new example to the Extending Content guide.

Aleksander Nowodzinski 6 年 前
コミット
2ea388bcd1

+ 2 - 2
packages/ckeditor5-engine/docs/_snippets/framework/extending-content-add-link-class.html

@@ -1,5 +1,5 @@
 <style>
-	.my-link-class {
+	.my-green-link {
 		color: #209a25;
 		border: 1px solid #209a25;
 		border-radius: 2px;
@@ -9,6 +9,6 @@
 </style>
 
 <div id="snippet-link-classes">
-	<p>All links in this <a href="https://ckeditor.com">editor</a> have a custom <code>.my-link-class</code>
+	<p>All links in this <a href="https://ckeditor.com">editor</a> have a custom <code>.my-green-link</code>
 	CSS <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> attribute.</p>
 </div>

+ 1 - 1
packages/ckeditor5-engine/docs/_snippets/framework/extending-content-add-link-class.js

@@ -13,7 +13,7 @@ function AddClassToAllLinks( editor ) {
 			const viewWriter = conversionApi.writer;
 			const viewSelection = viewWriter.document.selection;
 			const viewElement = viewWriter.createAttributeElement( 'a', {
-				class: 'my-link-class'
+				class: 'my-green-link'
 			}, {
 				priority: 5
 			} );

+ 11 - 0
packages/ckeditor5-engine/docs/_snippets/framework/extending-content-add-unsafe-link-class.html

@@ -0,0 +1,11 @@
+<style>
+	.unsafe-link {
+		padding: 0 2px;
+		outline: 1px dashed #ff0000;
+	}
+</style>
+
+<div id="snippet-link-unsafe-classes">
+	<p>All links in this <a href="https://ckeditor.com">editor</a> that do not use the <a href="http://developer.mozilla.org/en-US/docs/Glossary/https">HTTPS</a> protocol
+	have a custom <code>.unsafe-link</code> CSS <a href="http://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> that marks them red.</p>
+</div>

+ 43 - 0
packages/ckeditor5-engine/docs/_snippets/framework/extending-content-add-unsafe-link-class.js

@@ -0,0 +1,43 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+function AddClassToUnsafeLinks( editor ) {
+	editor.conversion.for( 'downcast' ).add( dispatcher => {
+		dispatcher.on( 'attribute:linkHref', ( evt, data, conversionApi ) => {
+			const viewWriter = conversionApi.writer;
+			const viewSelection = viewWriter.document.selection;
+			const viewElement = viewWriter.createAttributeElement( 'a', { class: 'unsafe-link' }, { priority: 5 } );
+
+			if ( data.attributeNewValue.match( /http:\/\// ) ) {
+				if ( data.item.is( 'selection' ) ) {
+					viewWriter.wrap( viewSelection.getFirstRange(), viewElement );
+				} else {
+					viewWriter.wrap( conversionApi.mapper.toViewRange( data.range ), viewElement );
+				}
+			} else {
+				viewWriter.unwrap( conversionApi.mapper.toViewRange( data.range ), viewElement );
+			}
+		}, { priority: 'low' } );
+	} );
+}
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-link-unsafe-classes' ), {
+		cloudServices: CS_CONFIG,
+		extraPlugins: [ AddClassToUnsafeLinks ],
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 86 - 7
packages/ckeditor5-engine/docs/framework/guides/deep-dive/extending-content.md

@@ -28,19 +28,25 @@ In this section, we will focus on customization to the "downcast" pipeline of th
 
 	```js
 	// Adds a conversion dispatcher for the editing downcast pipeline only.
-	editor.conversion.for( 'editingDowncast' ).add( dispatcher => { ... } );
+	editor.conversion.for( 'editingDowncast' ).add( dispatcher => {
+		// ...
+	} );
 
 	// Adds a conversion dispatcher for the data downcast pipeline only.
-	editor.conversion.for( 'dataDowncast' ).add( dispatcher => { ... } );
+	editor.conversion.for( 'dataDowncast' ).add( dispatcher => {
+		// ...
+	} );
 
 	// Adds a conversion dispatcher for both data and editing downcast pipelines.
-	editor.conversion.for( 'downcast' ).add( dispatcher => { ... } );
+	editor.conversion.for( 'downcast' ).add( dispatcher => {
+		// ...
+	} );
 	```
 </info-box>
 
 #### Adding a CSS class to all inline elements (e.g. links)
 
-In this example all links (`<a href="...">...</a>`) get the `.my-link-class` CSS class. That includes all links in the editor output (`editor.getData()`) and all links in the edited content (existing and future ones).
+In this example all links (`<a href="...">...</a>`) get the `.my-green-link` CSS class. That includes all links in the editor output (`editor.getData()`) and all links in the edited content (existing and future ones).
 
 ##### Demo
 
@@ -64,7 +70,7 @@ function AddClassToAllLinks( editor ) {
 			// Adding a new CSS class is done by wrapping all link ranges and selection
 			// in a new attribute element with a class.
 			const viewElement = viewWriter.createAttributeElement( 'a', {
-					class: 'my-link-class'
+					class: 'my-green-link'
 				}, {
 					priority: 5
 				} );
@@ -94,10 +100,10 @@ ClassicEditor
 	} );
 ```
 
-Add some CSS styles for `.my-link-class` to see the customization it in action:
+Add some CSS styles for `.my-green-link` to see the customization in action:
 
 ```css
-.my-link-class {
+.my-green-link {
 	color: #209a25;
 	border: 1px solid #209a25;
 	border-radius: 2px;
@@ -114,6 +120,8 @@ In this example all links (`<a href="...">...</a>`) which do not have "ckeditor.
 
 {@snippet framework/extending-content-add-external-link-target}
 
+**Note:** Edit the URL of the links including "ckeditor.com" and other domains to see them marked as "internal" or "external".
+
 ##### Code snippet
 
 Adding the `target` attribute to all "external" links is made by a custom converter plugged into the downcast pipeline, following the default converters brought by the {@link features/link Link} feature:
@@ -174,4 +182,75 @@ a[target="_blank"]::after {
 }
 ```
 
+#### Adding a CSS class to certain inline elements (e.g. links)
+
+In this example all links (`<a href="...">...</a>`) which do not have "https://" in their `href="..."` attribute get the `.unsafe-link` CSS class. That includes all links in the editor output (`editor.getData()`) and all links in the edited content (existing and future ones).
+
+##### Demo
+
+{@snippet framework/extending-content-add-unsafe-link-class}
+
+**Note:** Edit the URL of the links using "http://" or "https://" to see see them marked as "safe" or "unsafe".
+
+##### Code snippet
+
+Adding the `.unsafe-link` CSS class to all "unsafe" links is made by a custom converter plugged into the downcast pipeline, following the default converters brought by the {@link features/link Link} feature:
+
+```js
+// This plugin brings a customization to the downcast pipeline of the editor.
+function AddClassToUnsafeLinks( editor ) {
+	// Both data and editing pipelines are affected by this conversion.
+	editor.conversion.for( 'downcast' ).add( dispatcher => {
+		// Links are represented in the model as a "linkHref" attribute.
+		// Use the "low" listener priority to apply the changes after the Link feature.
+		dispatcher.on( 'attribute:linkHref', ( evt, data, conversionApi ) => {
+			const viewWriter = conversionApi.writer;
+			const viewSelection = viewWriter.document.selection;
+
+			// Adding a new CSS class is done by wrapping all link ranges and selection
+			// in a new attribute element with the "target" attribute.
+			const viewElement = viewWriter.createAttributeElement( 'a', {
+					class: 'unsafe-link'
+				}, {
+					priority: 5
+				} );
+
+			if ( data.attributeNewValue.match( /http:\/\// ) ) {
+				if ( data.item.is( 'selection' ) ) {
+					viewWriter.wrap( viewSelection.getFirstRange(), viewElement );
+				} else {
+					viewWriter.wrap( conversionApi.mapper.toViewRange( data.range ), viewElement );
+				}
+			} else {
+				viewWriter.unwrap( conversionApi.mapper.toViewRange( data.range ), viewElement );
+			}
+		}, { priority: 'low' } );
+	} );
+}
+```
+
+Activate the plugin in the editor:
+
+```js
+ClassicEditor
+	.create( ..., {
+		extraPlugins: [ AddClassToUnsafeLinks ],
+	} )
+	.then( editor => {
+		// ...
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+```
+
+Add some CSS styles for "unsafe" to make them visible:
+
+```css
+.unsafe-link {
+	color: #ff0000;
+	outline: 1px dashed #ff0000;
+}
+```
+
 ### Enabling custom attributes in the editor input ("upcast")