Customise behaviour of External Link dialog of the RichText editor

[nestor....@gmail.com]

Good day,

Current Rich text editor has a "External Link" button that creates new hypertext link.
Current dialog includes the Target tab that allows to choose one option: New Window (_blank).
The picture below is to illustrate what I mean.
That creates a link of the following format: <a href="url.com" target="_blank"/>

We have a new requirement to alter the default editor behaviour so the link is created in the following format:
<a href="url.com" target="_blank" rel="noopener noreferrer"/>.

How that could be achieved?

Many thanks,

Nestor

[Mathijs den Burger]

Hi Nestor,

The "external link" dialog is part of the "link" plugin in CKEditor. AFAIK your requirement requires a custom CKEditor plugin. You can either let your plugin modify the behavior of the link plugin (e.g. adjust the dialog) or fork the link plugin completely and adjust it. The former is nicer upgrade-wise, but I don't know if its possible. This StackOverflow thread is probably a good start: http://stackoverflow.com/questions/12903425/modify-ckeditor-link-dialog-to-add-custom-attribute-to-links.

BTW: I'm interested in your solution since this is probably good to have in Hippo CMS by default. If you go for forking, consider a pull request on https://github.com/onehippo/ckeditor so the fork becomes part of Hippo CMS by default. A pull request for a solution based on an additional plugin would be even nicer :).

Mathijs

--
Hippo Community Group: The place for all discussions and announcements about Hippo CMS (and HST, repository etc. etc.)
 
To post to this group, send email to hippo-community@googlegroups.com
RSS: https://groups.google.com/group/hippo-community/feed/rss_v2_0_msgs.xml?num=50
---
You received this message because you are subscribed to the Google Groups "Hippo Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to hippo-community+unsubscribe@googlegroups.com.
Visit this group at https://groups.google.com/group/hippo-community.
For more options, visit https://groups.google.com/d/optout.

[nestor....@gmail.com]

Hi Matijs,

Thank you for quick response.
I'm all up for sharing my solution with Hippo and I feel the forked CKEdittor is probably the most viable solution.
I'll give it a go and will ping you for more details or update you on the progress.

Best regards,
Nestor

[nestor....@gmail.com]

Hi Mathjis,

Thanks again for your help.

The fixed CKEditor pull request is here: https://github.com/onehippo/ckeditor/pull/2. Everything works in stand-alone editor.

In the meanwhile, I have a slight problem including this new plugin in my HIppo code.

I placed the plugins/link directory under cms/src/main/resources/ckeditor/plugins as described in [1].

Then, I modify the namespaces/hippostd/html.xml file to add the link to the end of the list of overridden plugins:

 <sv:property sv:name="ckeditor.config.overlayed.json" sv:type="String" esv:merge="override">
 <sv:value>{"extraPlugins": "blockquote,videoicon,linkicon,articleicon,audioicon,documenticon,link",&#13;
 "stylesSet":"mystyle:./mystyles.js",&#13;
 contentsCss: [&#13;
 'ckeditor/hippocontents.css',&#13;
 'ckeditor/optimized/css/eapstyles.css'&#13;
 ]}
 </sv:value></sv:property>

Now, when I edit a document in Hippo CMS, my plugin gets invoked, as indicated by js alerts that I purposefully left in the code to check that my code works. 

However, when I click the Save & Close in the CMS editor and inspect the contents of the saved page, my changes are ignored. 

The only way I could get my modified plugin work is by completely overriding the whole ckeditor in the cms project. Is that a valid way to do? 

Or am I missing something on the way to get Hippo use the overridden plugin?

Many thanks,

Nestor 

[1] https://www.onehippo.org/library/concepts/document-types/html-fields/ckeditor-plugins.html#add-a-custom-ckeditor-plugin

[Mathijs den Burger]

Hi Nestor, 

Thanks for the pull request! I'll have a look.

About the removed attribute: that sounds like you have to configure the server-side HTML cleaner to allow the 'rel' attribute. See https://www.onehippo.org/library/concepts/document-types/html-fields/html-cleaning.html for details.

hth,

Mathijs

--

[nestor....@gmail.com]

Hi, Mathijs

Thanks for the quick response.

I've tried to disable client-site cleaning as follows:

<sv:property sv:name="ckeditor.config.overlayed.json" sv:type="String" esv:merge="override"><sv:value>

{"extraPlugins": "blockquote,videoicon,linkicon,articleicon,audioicon,documenticon,link",&#13;
 allowedContent: true,

"stylesSet":"mystyle:./mystyles.js",&#13;
contentsCss: [&#13;
 'ckeditor/hippocontents.css',&#13;
 'ckeditor/optimized/css/eapstyles.css'&#13;
 ]}

</sv:value>
</sv:property>

Sadly, that did not work. Did I do that correctly? I've checked the server side cleaning and the attribute rel is in the whitelist for the element a. So that should work - or is there still something that is evading me?

Have I added my overridden plugin correctly in the extraPlugins?

Many thanks,

Nestor

[nestor....@gmail.com]

Mathijs,

A bit of addition, what else I tried:
1. Disabling server-side cleanup
2. Adding "allowedContent": "true" properly quoted
3. Adding "allowedContent": "true" in a separate <sv:value> node

Adding {extraPlugins: 'link'} to the do document type definition in CMS' Document Types edtor as in [1] Example: timestamp plugin.

Nothing works - it seems my only option is to override the whole ckeditor in my Hippo project (that option actually does work).

Or is there an alternative?

Many thanks,
Nestor

[Mathijs den Burger]

Hi Nestor,

I've just tried the following in our public demo on cms.demo.onehippo.org:

1. Edit the document Hippo Go Green > Events > 2014 > 11 > Party for the Planet

2. Add an link to the 'Description' field

3. Switch the 'Source' mode

4. Manually add the rel="noopener noreferrer" attribute to the link's markup

5. Switch back to WYSIWYG mode

6. Save & Close the document

The 'rel' attribute is now preserved. It's rendered in the preview mode of the document and in the site itself (e.g preview it via View > US Website).

So this all seems to work (except for the fact that I have to add the attribute manually). At least in 11.1. Which Hippo version are you using?

Mathijs

--

[nestor....@gmail.com]

Thank you Mathjis,

That's a good test/trick - will give it a go; just need to enable the source mode.

I use 10.2.3

Thank you,

Nestor

To post to this group, send email to hippo-c...@googlegroups.com

RSS: https://groups.google.com/group/hippo-community/feed/rss_v2_0_msgs.xml?num=50
---
You received this message because you are subscribed to the Google Groups "Hippo Community" group.

To unsubscribe from this group and stop receiving emails from it, send an email to hippo-communi...@googlegroups.com.