Disable auto HTML formatting in rich-text editor

[c.chen]

Hi folks,

When I edit a document containing rich-text content, I usually use the source mode of the ckeditor so I can copy and paste the exact HTML from an already developed page. However as soon as I exit the source mode, the editor will automatically format the HTML and many times this breaks the styles. Is there a way to disable this default behavior?

Thanks!

Charlie

[Oscar Scholten]

Hi Charlie,

As far as I could see, CKEditor allows you to configure the formatting rules for each element separately, see [1]. See [2] on how to configure CKEditor instances within the CMS.

One followup remark: next to the formatting that is done by CKEditor, the server side HTML Cleaner also (re)formats the HTML, see [3] on how to configure that mechanism.

Last but not least: you mention that "this breaks the styles", do you mean that the <style> elements are removed? If so, this is a known issue, see [4].

[1] http://docs.ckeditor.com/#!/guide/dev_output_format

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

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

[4] https://issues.onehippo.com/browse/CMS-9563

Hope this helps, Oscar

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

--

Amsterdam - Oosteinde 11, 1017 WT Amsterdam
Boston - 745 Atlantic Ave, 8th Floor, MA 02111

Europe +31(0)20 522 4466
US +1 877 414 4776
www.onehippo.com | www.onehippo.org

[Charlie Chen]

Thank you Oscar! One specific problem I encountered was the editor automatically surrounds texts with "<p>" tags whenever I edit the document and these extra "<p>" tags were conflict with css stylesheet. It looks like a CKEditor formatting issue. I followed the documents and set "allowedContent" to "true", but it's not working. Any suggestions?

Thanks!

Charlie Chen

Solution Architect | Email: c.c...@onehippo.com

Boston -  71 Summer St, Boston, MA 02110

Amsterdam - Oosteinde 11, 1017 WT Amsterdam

US +1 877 414 4776 (toll free)
Europe +31(0)20 522 4466
http://www.onehippo.com/

[Oscar Scholten]

Hi Charlie,

My suggestion would be to adjust the CSS. It is possible to change the default behavior, but I get the feeling you'd be fighting the default behavior and not making it necessarily easier to create good quality content.

It is possible to add <br/> tags in wysiwyg mode by hitting shift-enter. This behavior is configurable using the settings "enterMode" and "shiftEnterMode", see [1]. I had to set "forceEnterMode" to true for those settings to have effect. So you could switch around the behavior. But then I don't think many content editors will figure out themselves how to start a new paragraph, leading to poor quality content (loads of manual <br/>'s making future layout changes hard).

Cheers, Oscar

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

[Charlie Chen]

Thanks Oscar! Unfortunately the css is maintained by the client and I can't do much about it...

Regards,

[Mahesh Acharya]

How about introducing some client side javascript to remove "p" (or
any element of your choice) within the scope of a specific element?
Display your content within an element with some custom class name,
let's assume a class name "sans-p"

for example (freemarker):

<div class='sans-p'>
<@hst.html hippohtml=dcument.content>
</div>

will produce the following content output,

<div class='sans-p'>
<p>foo</p>
</div>

Add some JQuery on document ready(like below) to find and replace all
"p" within class "sans-p"

$('.sans-p p').replaceWith
(
function() { return $(this).contents(); }
);

Mahesh R. ACHARYA
Solution Architect | Mobile: 781-640-5559 | Email: m.ac...@onehippo.com
Boston - 71 Summer Street, Boston, MA 02110

[Charlie Chen]

Hi Mahesh, 

That will require modifying templates, which is a bigger hassle. Currently my workaround is to save the document without exiting the source mode. But I think Oscar was right, modifying the css seems to be the easiest permanent solution.

Thanks!