8
0
Pārlūkot izejas kodu

Add references to the link decorators in extending content guide.

Maciej Gołaszewski 6 gadi atpakaļ
vecāks
revīzija
44e2fbb5dc

+ 85 - 0
packages/ckeditor5-engine/docs/framework/guides/deep-dive/extending-content.md

@@ -149,6 +149,27 @@ If you want to learn how to load some extra content (element, attributes, classe
 
 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).
 
+<info-box>
+	Note that the same behavior can be obtained with {@link features/link#custom-link-attributes-decorators link decorators}:
+	
+	```js
+	ClassicEditor
+		.create( ..., {
+			// ...
+			link: {
+				decorators: {
+					addGreenLink: {
+						mode: 'automatic',
+						attributes: {
+							class: 'my-green-link'
+						}
+					}
+				}
+			}
+		} )
+	```
+</info-box>
+
 ##### Demo
 
 {@snippet framework/extending-content-add-link-class}
@@ -217,6 +238,27 @@ Add some CSS styles for `.my-green-link` to see the customization in action:
 
 In this example all links (`<a href="...">...</a>`) which do not have "ckeditor.com" in their `href="..."` get the `target="_blank"` attribute. That includes all links in the editor output (`editor.getData()`) and all links in the edited content (existing and future ones).
 
+<info-box>
+	Note that the same behavior can be obtained with {@link features/link#custom-link-attributes-decorators link decorators}:
+	
+	```js
+	ClassicEditor
+		.create( ..., {
+			// ...
+			link: {
+				decorators: {
+					addGreenLink: {
+						mode: 'automatic',
+						attributes: {
+							class: 'my-green-link'
+						}
+					}
+				}
+			}
+		} )
+	```
+</info-box>
+
 ##### Demo
 
 {@snippet framework/extending-content-add-external-link-target}
@@ -287,6 +329,28 @@ a[target="_blank"]::after {
 
 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).
 
+<info-box>
+	Note that the same behavior can be obtained with {@link features/link#custom-link-attributes-decorators link decorators}:
+	
+	```js
+	ClassicEditor
+		.create( ..., {
+			// ...
+			link: {
+				decorators: {
+					markUnsafeLink: {
+						mode: 'automatic',
+						callback: url => /^(http:)?\/\//.test( url ),
+						attributes: {
+							class: 'unsafe-link'
+						}
+					}
+				}
+			}
+		} )
+	```
+</info-box>
+
 ##### Demo
 
 {@snippet framework/extending-content-add-unsafe-link-class}
@@ -425,6 +489,27 @@ In this example links (`<a href="...">...</a>`) loaded in editor content will pr
 
 Unlike the [downcast–only solution](#adding-an-html-attribute-to-certain-inline-elements), this approach does not change the content loaded into the editor. Links without the `target` attribute will not get one and links with the attribute will preserve its value.
 
+<info-box>
+	Note that the same behavior can be obtained with {@link features/link#custom-link-attributes-decorators link decorators}:
+	
+	```js
+	ClassicEditor
+		.create( ..., {
+			// ...
+			link: {
+				decorators: {
+					addGreenLink: {
+						mode: 'automatic',
+						attributes: {
+							class: 'my-green-link'
+						}
+					}
+				}
+			}
+		} )
+	```
+</info-box>
+
 ##### Demo
 
 {@snippet framework/extending-content-allow-link-target}