|
@@ -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).
|
|
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
|
|
##### Demo
|
|
|
|
|
|
|
|
{@snippet framework/extending-content-add-link-class}
|
|
{@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).
|
|
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
|
|
##### Demo
|
|
|
|
|
|
|
|
{@snippet framework/extending-content-add-external-link-target}
|
|
{@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).
|
|
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
|
|
##### Demo
|
|
|
|
|
|
|
|
{@snippet framework/extending-content-add-unsafe-link-class}
|
|
{@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.
|
|
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
|
|
##### Demo
|
|
|
|
|
|
|
|
{@snippet framework/extending-content-allow-link-target}
|
|
{@snippet framework/extending-content-allow-link-target}
|