CKEditor Rich text field removes tags

[gigi...@gmail.com]

Hi,

I want to allow my editors to add complete HTML in a rich text field in Hippo.

When I paste a HTML page CKEditor removes the doctype, html and head tags.

I tried configuring the following:

{
  allowedContent: true
}

or removing the htmlCleanerService classes as specified in:

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

but the behavior still occurs.

What could cause this?

Regards,

Alex

[Mathijs den Burger]

Hi Alex,

Try setting the CKEditor config property 'fullPage' [1] to 'true'.

best,

Mathijs

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

--
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.

[gigi...@gmail.com]

Hi Mathijs,

I tried setting this property in the document configurator or in the console.

Adding it in both

/hippo:namespaces/system/Html/editor:templates/_default_

and

/hippo:namespaces/mamhippo/freehtml/editor:templates/_default_/freehtml/cluster.options

in either ckeditor.config.appended.json or ckeditor.config.overlayed.json.

This is the configuration I added ( I tried reversing them, removing whitespaces and so on ):

{ fullPage: true, allowedContent: true}

I know allowedContent works, otherwise I can't paste whole pages in the editor in "Source" mode.

If the editor is open and I type in the browser console CKEDITOR.config.fullPage I get "false" in all the cases.

Any other ideas on how I can debug this?

Best regards,

Alex

[Mathijs den Burger]

Hi Alex,

You're definitely almost there! If you want to enable full page editing in all HTML fields your have to modify

 

  /hippo:namespaces/hippostd/html/editor:templates/_default_/ckeditor.config.overlayed.json

If you want to do it for specific document type fields only you can use the second way you described.

I've tried full-page editing myself, and it turns out you also have to render the CKEditor editing area in an iframe again instead of a div. The default CKEditor distribution uses iframe-based editing, but Hippo CMS uses div-based editing by default because that performs better when instantiating many CKEditor instances (this mainly applied to IE, notably IE8).

I've just documented the CKEditor configuration for full-page editing at the bottom of [1]. It boils down to:

  {

    fullPage: true,

    removePlugins: 'divarea', 

    extraPlugins: 'wysiwygarea'

  }

I've also added a 'hint' on client-side debugging of editor configurations to [1]. CKEDITOR.config contains the default 'factory' configuration for all editors as documented at [2]. The configuration of individual editors can be found via CKEDITOR.instances.<editorId>.config.

best,

Mathijs

[1] http://www.onehippo.org/library/concepts/document-types/html-fields/ckeditor-configuration-properties.html

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

--

[gigi...@gmail.com]

Hi Mathijs,

This works from the CMS editing part. I added alloweContent:true and now I can paste whole pages, save them and they don't get altered by CKEDITOR.

The issue now is when rendering those pages, it seems the HTMLCleaner service is interfering and removing the html, head and body tags.

I tried 2 solutions for this:

1. Add the tags to the whitelist in:

/hippo:configuration/hippo:frontend/cms/cms-services/htmlCleanerService/whitelist

or

2. Remove the HTML cleaner completely from:

/hippo:configuration/hippo:frontend/cms/cms-services/htmlCleanerService@plugin.class

and

/hippo:configuration/hippo:frontend/cms/cms-services/htmlCleanerService@service.id

Both approaches have not worked.

Any ideeas how to advance with this?

Regards,

Alex

[Mathijs den Burger]

I can confirm the behavior of the HTML cleaner. Even when title, head, html and body are all white-listed, the cleaner library still removes these tags. It could be a setting of the HTML cleaner library we use [1], but I couldn't find one at first glance.

But it is possible to disable the HTML cleaner for all HTML fields or specific ones. As described at [2] and [3], set /hippo:namespaces/hippostd/html/editor:templates/_default_/htmlcleaner.id to an empty string, or remove that property altogether. The same can be done for individual HTML fields. Don't forget to reload the CMS (i.e. log out and in) before testing this to ensure that the new configuration is used.

hope this helps,

Mathijs

[1] http://htmlcleaner.sourceforge.net/

[2] http://www.onehippo.org/library/concepts/document-types/html-fields/html-cleaning.html

[Mathijs den Burger]

Forgot one reference:

[3] http://www.onehippo.org/library/concepts/document-types/html-fields/html-fields-configuration-properties.html

[gigi...@gmail.com]

Hi Mathijs,

I removed everything and still the page renders without the tags.

I tried debugging in the org.hippoecm.frontend.plugins.richtext.htmlcleaner package and it doesn't get called when I save the document.

Is there anything else I could try?

Best regards,

Alex

[Mathijs den Burger]

On Thu, Feb 26, 2015 at 12:14 PM, <gigi...@gmail.com> wrote:

Hi Mathijs,

I removed everything and still the page renders without the tags.

To eliminate communication errors: what do you mean exactly with "the page renders". Do you either mean 

1. the 'preview' version of the document in the CMS renders without the extra tags? (i.e. the stuff you see after clicking 'Save & Close'). 

2. the document is rendered somewhere in your website by the Hippo Site Toolkit, and there the extra tags are not showing up?

1 is expected: the CMS itself is a web application, so it cannot suddenly render <html> and <body> tags halfway the page without using iframes. CKEditor can only do this when it renders the edited HTML in an iframe. IIRC the CMS simply removes <html> and <body> tags from rendered HTML fields, and only renders the remaining markup to show the 'preview' version of the HTML field.

2 depends on how you render the contents of an HTML field in the site. Please check what's stored exactly in the repository. If that includes <html>, <body>, etc. then the CMS part of full page editing at least works, and you may for example be fighting the hst:html tag to renders your field.

 

I tried debugging in the org.hippoecm.frontend.plugins.richtext.htmlcleaner package and it doesn't get called when I save the document.

Is there anything else I could try?

You can checkout the CMS source code and set a break point in RichTextModel#setObject, or one of the other decorating models created in CKEditorNodePlugin#createEditModel [2]. The string created in CKEditor (i.e. the stuff returned by editor.getData()) goes in, the string written to the repository eventually goes out. If the former is wrong there's still something wrong in CKEditor. If the latter is wrong there's something going in one of the decorating models.

hope this helps,

Mathijs

[1] http://svn.onehippo.org/repos/hippo/hippo-cms7/cms/branches/hippo-cms-2.26.xx/richtext/frontend/src/main/java/org/hippoecm/frontend/plugins/richtext/RichTextModel.java

[2] http://svn.onehippo.org/repos/hippo/hippo-cms7/cms/branches/hippo-cms-2.26.xx/richtext/ckeditor/frontend/src/main/java/org/hippoecm/frontend/plugins/ckeditor/CKEditorNodePlugin.java

[gigi...@gmail.com]

Hi Mathijs,

Thank you for the detailed response.

Both the "preview" and "live" version of the documents render without the tags.

The content appears in the CKEDITOR and is stored in the repository correctly.

I guess the problem is indeed with the <hst:html> tag, I tried both JSP and Freemarker ( I Iterate because I have Rich Text with "MULTIPLE" ):

JSP code:

<%@ include file="/WEB-INF/jspf/htmlTags.jspf" %>
<hst:defineObjects/>
<c:forEach var="html " items="${freehtml}" varStatus="loop">
    <p>test test</p>
        <hst:html hippohtml="${html.content}" />
</c:forEach>

Freemarker code:

<#assign hst=JspTaglibs["http://www.hippoecm.org/jsp/hst/core"] >
<#list freehtml as html>
 <@hst.html hippohtml=html/>
  </#list>

Any ideas / alternatives I could try?

Best regards,

Alex

[Mathijs den Burger]

Maybe a custom content rewriter can help you out?

See http://www.onehippo.org/library/concepts/rewriting-rich-text-field-runtime/hst-2-rewriting-rich-text-field-runtime.html

best,

Mathijs

--

[gigi...@gmail.com]

Hi Mathijs,

For now I found another solution, I just use the getter method from the document type Bean:

<%@ include file="/WEB-INF/jspf/htmlTags.jspf" %>
<hst:defineObjects/>

<c:forEach var="test" items="${freehtml}" varStatus="loop">
    ${test.content}
    /* ${test.getContent()} also works */        
</c:forEach>

I will also have a look at what you sent me for future uses and a better understanding of Hippo.

Thank you very much for the support.

Best regards,

Alex

[Mathijs den Burger]

Sure that just dumps the HTML as stored. But it won't resolve links to documents and images in the HTML: that's handled by the content rewriter. So if a CMS user creates links to documents or to images in the gallery, the rendered HTML will contain broken links.

best,

Mathijs