How to remove the htmlcleaner.id for CKEditor

[Gangel Dávid]

Hi,

I would like to know how can I disable server side filtering for CKEditor given the bug:

https://issues.onehippo.com/browse/CMS-9502

Where is this property stored in the Console?

Thank you.

[Junaidh Sheriff]

/hippo:configuration/hippo:frontend/cms/cms-services/filteringHtmlCleanerService

Documented @ http://www.onehippo.org/library/concepts/document-types/html-fields/html-cleaning.html 

Thank you.

--
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-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.
Visit this group at http://groups.google.com/group/hippo-community.
For more options, visit https://groups.google.com/d/optout.

[Gangel Dávid]

Hi,

But then if I remove here it will be a global setting change right?

Isn't a way to change it just for one specific document type?

[Gangel Dávid]

Anyway. I did give a try to remove the property at global level.

The value is going to be still placed back...

At the moment I don't see any way how can I disable server side filtering.

2015. augusztus 26., szerda 10:46:19 UTC+2 időpontban Junaid K Sheriff a következőt írta:

[Gangel Dávid]

As a workaround I did try to add a class as an attribute for the <i> tag under the whitelist options.

Then when I try this in source mode:

<i class="fa fa-users"></i>sometext

CKEditor transfers to:

<p>sometext</p>

Does someone have any idea how can I include such an html snippet into the rich text editor?

Thank you.

[Mathijs den Burger]

Hi David,

CMS-9502 is annoying indeed; saving an empty 'htmlcleaner.id' property in the document type editor seems to be broken. Fortunately you can still create such a property via the console. It's described at [1] (sort of). For example, to set an empty 'htmlcleaner.id' property in the 'answer' field of the 'faq' document type in our hippogogreen demo, you would create the node

  /hippo:namespaces/hippogogreen/faq/editor:templates/_default_/answer/cluster.options (type 'frontend:pluginconfig')

and then create an empty String property called 'htmlcleaner.id' in that node. That would disable server-side HTML cleaning for that particular field. To disable it globally, empty the property

  /hippo:namespaces/hippostd/html/editor:templates/_default_/htmlcleaner.id

However, CKEditor also applies client-side HTML cleaning (as you experienced). That can be tweaked via the 'extraAllowedContent' property of CKEditor [2]. The syntax of that property is described at [3]. For your case, you could set the following ckeditor.config.overlayed.json [1] property:

  {

    extraAllowedContent: 'i[class]'

  }

As described at [1], you can either configure this globally (e.g. at /hippo:namespaces/hippostd/html/editor:templates/_default_/ckeditor.config.overlayed.json) or per document type field in its cluster.options node.

There will be one more snag: the CMS will not render FontAwesome icons since the font is not included. So to make it really nice you would have to create a custom CKEditor plugin that enables users to select a FontAwesome icon, e.g. from a gallery of available icons (then they also don't have to go into scary Source mode to add an icon). That plugin can then also take care of including the FontAwesome icon in the CMS. For more information on how to create custom CKEditor plugin, see [4]. 

hope this helps,

Mathijs

[1] http://www.onehippo.org/library/concepts/document-types/html-fields/html-fields-configuration-properties.html#global-and-field-specific-configuration

[2] http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraAllowedContent

[3] http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter

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

[Gangel Dávid]

Hi Mathijs,

Thank you for your detailed description and suggestions.

Unfortunately with your described method(disable on the exact node) the server side cleaner still remains active however the field inside the Doc type editor gets empty.

Logs are saying as well:

[INFO] [talledLocalContainer] 11:52:48 INFO  CKEditor plugin 'home.cluster.cms-static.plugin.servicesLoader.cluster.cms-services.plugin.defaultEditorFactory.cluster.cms-preview.plugin.viewerPlugin.cluster._default_.plugin.preview.cluster._default_.plugin.display_feature-preview.cluster..plugin.home.cluster.cms-static.plugin.servicesLoader.cluster.cms-services.plugin.defaultEditorFactory.cluster.cms-preview.plugin.viewerPlugin.cluster._default_.plugin.preview.cluster._default_.plugin.display_feature.cluster._default_.plugin.root' does not have a server-side HTML cleaner configured, using default

[INFO] [talledLocalContainer] 11:52:48 INFO  CKEditor plugin 'home.cluster.cms-static.plugin.servicesLoader.cluster.cms-services.plugin.defaultEditorFactory.cluster.cms-preview.plugin.viewerPlugin.cluster._default_.plugin.preview.cluster._default_.plugin.display_feature-preview.cluster..plugin.home.cluster.cms-static.plugin.servicesLoader.cluster.cms-services.plugin.defaultEditorFactory.cluster.cms-preview.plugin.viewerPlugin.cluster._default_.plugin.preview.cluster._default_.plugin.display_feature.cluster._default_.plugin.root' uses server-side HTML cleaner 'org.hippoecm.frontend.plugins.richtext.DefaultHtmlCleanerService'

This issue seems to be harder.

[Mathijs den Burger]

Hmm, that's unfortunate.

Bit still, just adding the right whitelist patterns to the server-side and client-side HTML cleaner configuration should enable you to enter i tags with a class attribute (which seems to be your goal, right?). Disabling HTML cleaning altogether is not something I would encourage.

Mathijs

[Gangel Dávid]

Hi,

I did find an already created fontawsome plugin for CKEditor:

http://ckeditor.com/addon/fontawesome?page=3

On the installation steps there are a number of steps that I don't really know how to put in in the context of hippo. Like:

• In your HTML's <head> section add this code:

<script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>

[Mathijs den Burger]

On Fri, Aug 28, 2015 at 9:55 AM, Gangel Dávid <gan...@gmail.com> wrote:

Hi,

I did find an already created fontawsome plugin for CKEditor:

http://ckeditor.com/addon/fontawesome?page=3

Always good to reuse code :)

 

On the installation steps there are a number of steps that I don't really know how to put in in the context of hippo. Like:

• In your HTML's <head> section add this code:

<script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>

That's unfortunate. AFAIK the configuration of a CKEditor plugin should be done via the config object of a CKEditor instance only, and not require manual additions to the HTML markup of a page. The fontawesome plugin should just add this script snippet itself. Maybe you could ask the developer of the plugin why it has to be done this way?

best,

Mathijs

[Gangel Dávid]

I'm going to open a new topic as it's start now not to be about the original topic.

[Gangel Dávid]

Hi,

Thank you for your support. With your suggestions and guide I was able to configure the CKEditor in a much user friendly way that I was ever think off.

Have a nice weekend.