Jump to content

Community

Sonya*

Configure CKEditor to allow attributes

Recommended Posts

We can add official plugins for CKEditor from the repository. And we can create our own plugins. The issue is that HTMLPurifier does not allow to use some HTML attributes whether we add a custom button or not. It would be helpful to have additional configure option for CKEditor:

  • Allow additional attributes like name, class, id and so on. This can be an additional setting field in ACP like Allowed CSS Classes, where Administrator enter HTML attributes he wants to allow. This way we could use plugins that adds HTML anchor or any additional functionality.

I have used it in other CMS and it was very handy.

Example for anchor:

<a name="test" id="test"></a>

This is not allowed right now. If you could define name and id as allowed attributes, then we could use anchors out of the box without allowing to edit HTML.

Thank you!

Edited by Sonya*

Share this post


Link to post
Share on other sites
  1. This could be achieved with super-simple hook.
    ...
    parent::_htmlPurifierModifyHtmlDefinition($def);
    $def->addAttribute( 'a', 'name', 'Text' );
    ...
  2. Keep in mind what name attribute is deprecated and not a part of HTML5, so it would be better to use something like data- attribute and then in JS on client side make an id attributes from it's values after checking that these IDs will not conflict with existing IDs.

    image.png.f631e083b12be65d30a02e39512716a4.png

I did it some time ago for my communities, here is a live example.

Edited by Mr 13

Share this post


Link to post
Share on other sites

@Mr 13, I know. This was just a suggestion to make it generally available for all admins without hooks. The official link plugin adds both attributes id and name. But both of them are wiped out after saving. I do not really see any security issue with those two attributes. I use link plugin above to format mail and phone links. However anchor is a pain without customization. At the same time anchor is very wide used to add structure to the long pages. E. g. structured articles that Googles like so much at the moment 😏

Share this post


Link to post
Share on other sites
10 minutes ago, Sonya* said:

I do not really see any security issue with those two attributes.

  1. name — no problems except it was excluded from HTML5 🙂
  2. id — what if user will specify ID which already exists on the page? It could brake some JS-based functionality in cases when JS refers to this id.
Edited by Mr 13

Share this post


Link to post
Share on other sites
5 minutes ago, Mr 13 said:

id — what if user will specify ID which already exists on the page? It could brake some JS-based functionality in cases when JS refers to this id.

You're right. In my case I do not allow using the plugin for the normal users, only for the editors of the page. Users are also not able to edit html source. So normally it would not be an issue if set up properly.

At the end of the day I am just looking for a simple possibility to allow my writers to add article structure without using HTML. Writing a hook is a solution for developers only. I am somewhere between admin and developer 😁

Share this post


Link to post
Share on other sites
37 minutes ago, Sonya* said:

Users are also not able to edit html source.

Actually all users always are able to edit HTML (via browser's dev tools, for example), so if id attribute will be allowed in HTMLPurifier, then they could add IDs even while they don't have permission to use HTML mode in CKE. Also IDs will appear in their messages unintentionally when they copying and pasting something with IDs. For example in case when they quoting the messages from your editors, there could appear more than one ID with the same value on the page (it does not carries any significant risks but its something what we should keep in mind allowing IDs in HTMLPurifier).
 

 

Example: spoilers are not available in editor on IPS website, but as they allowed in HTMLPurifier, we able to add them using HTML even when we do not have "HTML Source" mode in the CKE.

Edited by Mr 13

Share this post


Link to post
Share on other sites
6 hours ago, Sonya* said:

We can add official plugins for CKEditor from the repository. And we can create our own plugins. The issue is that HTMLPurifier does not allow to use some HTML attributes whether we add a custom button or not. It would be helpful to have additional configure option for CKEditor:

  • Allow additional attributes like name, class, id and so on. This can be an additional setting field in ACP like Allowed CSS Classes, where Administrator enter HTML attributes he wants to allow. This way we could use plugins that adds HTML anchor or any additional functionality.

I have used it in other CMS and it was very handy.

Example for anchor:


<a name="test" id="test"></a>

This is not allowed right now. If you could define name and id as allowed attributes, then we could use anchors out of the box without allowing to edit HTML.

Thank you!

https://ckeditor.com/docs/ckeditor4/latest/guide/dev_acf.html

Specifically this bit:

https://ckeditor.com/docs/ckeditor4/latest/guide/dev_acf.html#automatic-mode-and-allow-additional-tagsproperties

 

Share this post


Link to post
Share on other sites
3 hours ago, Mr 13 said:

Also IDs will appear in their messages unintentionally when they copying and pasting something with IDs

And what about JS controllers? Actually we can allow JS controllers, is it not the same? The user can unintentionally paste JS controllers breaking functionality... 🤨

Share this post


Link to post
Share on other sites

We already inspect js controllers and strip out any that aren't explicitly allowed.

"id" can't be allowed, as it can lead to issues as already noted. It can break javascript on the page, cause other oddities, or even potentially introduce security issues (what if a user pasted an HTML markup that looked like the login form with the id of the login form element on the page, but which sent the credentials to a remote third party? A user could click to login, which would load the nefarious (but normal looking) login form HTML, and submit their credentials to a remote endpoint. In theory at least...I do believe we strip forms out already, but you get the idea.

I don't really have any qualms about "name" but as noted, it's kind of deprecated so it seems a bit meh to allow.

The reality is, this type of thing is so seldom needed that it is probably best to just leave to a custom plugin. If we start seeing a lot of clients installing custom CKEditor plugins that need this functionality we can revisit.

Share this post


Link to post
Share on other sites
14 hours ago, bfarber said:

The reality is, this type of thing is so seldom needed that it is probably best to just leave to a custom plugin.

Just one question: how do you have created the submenu on this page 

Have you edited HTML or have you used any plugin? 😏

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy