Integrate fontawsome CKEditor plugin into the hippo's CKEditor inside the CMS

[Gangel Dávid]

Hi all,

I would like to get some help about integrating the fontawsome plugin into the hippo's CKEditor.

Plugin that I'm talking about:

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

Sofar I was able to display the icon chooser and also changing the colors of the icons.

My configuration looks like at the moment:

ckeditor.config.overlayed.json:

{

extraPlugins:'fontawesome,widget,colordialog,lineutils',
contentsCss:'/mnt/ssd/Developer/Repositories/corporate-website/bootstrap/webfiles/src/main/resources/site/css/global/plugins/font-awesome/css/font-awesome.css',
toolbar:[{ name: 'insert', items: [ 'FontAwesome', 'Source' ] } ],
allowedContent:true
}

The issues that I'm having at the moment are:

1. Once I select an icon from the list I'm not able anymore to open the the source tab. When I click on it just nothing happens. Once I'm having just text inside the same field I'm able to open it.

2. When I try to save my document when the field has a selected icon the CMS "goes crazy". I mean there is no exception in the logs but it seems like tries to load something as the load-bar at the top left just goes back and forth. Once I remove the icon I'm able to save the document.

3. One strange thing in the log:

[INFO] [talledLocalContainer] 28.08.2015 13:00:20 WARN  http-nio-8080-exec-4 [ResourceServlet.prepareResponse:452] No mime-type mapping for resource path: /mnt/ssd/Developer/Repositories/corporate-website/target/tomcat8x/webapps/cms/WEB-INF/classes/ckeditor/optimized/plugins/fontawesome/font-awesome/fonts/fontawesome-webfont.woff2. Fallback to 'application/octet-stream'.

Does this plugin requires to write a custom CKEditorNodePlugin Java class?

Or what could be the problem?

Thank you.

[Gangel Dávid]

I did make a mistake in the config as the contentsCss path was wrong.

New config is:

{

  extraPlugins:'fontawesome,widget,colordialog,lineutils',

  contentsCss: [

    'ckeditor/hippocontents.css',

    'ckeditor/css/font-awesome/css/font-awesome.css'

  ],

  toolbar:[{ name: 'insert', items: [ 'FontAwesome', 'Source' ] } ],

  allowedContent:true

}

The first issue seems to be plugin related as others have also reported the same.

The others are still valid at the moment.

[Gangel Dávid]

Maybe this is the relevant exception in the browsers console for the 2nd issue:

Wicket.Ajax:  An error occurred while executing Ajax request:TypeError: Cannot read property 'attributes' of nullWicket.Log.error 

@ wicket-ajax-jquery.min-ver-1437635110000.js:1Wicket.Channel.schedule 

@ wicket-ajax-jquery.min-ver-1437635110000.js:1Wicket.ChannelManager.schedule 

@ wicket-ajax-jquery.min-ver-1437635110000.js:1Wicket.Ajax.Call.ajax 

@ wicket-ajax-jquery.min-ver-1437635110000.js:1(anonymous function) 

@ wicket-ajax-jquery.min-ver-1437635110000.js:1m.event.dispatch 

@ jquery-1.11.2.min-ver-1437635110000.js:3m.event.add.r.handle 

@ jquery-1.11.2.min-ver-1437635110000.js:3

[Gangel Dávid]

Issues are fixed!!

Explanation will follow soon.

[Jeroen Reijn]

Great!

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

--

Jeroen Reijn
Hippo

Amsterdam office - Oosteinde 11, 1017 WT Amsterdam

Boston office - 745 Atlantic Ave, Eight Floor, Boston MA 02111, United states of America.

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

http://blog.jeroenreijn.com | @jreijn | http://about.me/jeroenreijn

[Gangel Dávid]

Wasn't an easy round but seems to be working.

So what needs to be configured to get this work:

I did prefer to get working for one specific document type so I did apply the following configuration on that specific node type:

/hippo:namespaces/corporatewebsite/FeatureType/editor:templates/_default_/display_feature/cluster.options

{

  extraPlugins:'fontawesome,widget,colordialog,lineutils',

  contentsCss: [

    'ckeditor/hippocontents.css',

    'ckeditor/css/font-awesome/css/font-awesome.css'

  ],

  toolbar: [{ name: 'insert', items: [ 'FontAwesome', 'Source' ] } ],

  customConfig: './customconfig.js',

  allowedContent: true; 

}

extraPlugins: are the fontawsome itself and it's dependencies that can be found in the linked documentation.

contentsCss: needs to tell to the CKEditor where is the font-awsome css located. As addition I did keep the original provided by hippo as well.

toolbar: just to show the font selection icon and the source tab

customConfig: path the the custom js configuration file where you configure your ckeditor.

allowedContent: Client side filtering settings. For now I just disabled it.

My customconfig.js contains:

CKEDITOR.dtd.$removeEmpty.span = 0;

under:

cms/src/main/resources/ckeditor/customconfig.js

That's all.

[Gangel Dávid]

The only remaining problem that I could not fix with the above described solution is the #3 point. All the other issues are gone.

If someone thinks it needs to be addressed as a bug ticket in jira please let me know.

Thank you for the support!

[Mathijs den Burger]

Good to hear you got it working! 

The "#3 point" is about the MIME type warning, right? That's caused by the 'CKEditorResourceServlet' that serves files from JARs below the path /ckeditor. It's defined in the file cms/src/main/webapp/WEB-INF/web.xml. 

The ResourceServlet has a hardcoded map of extensions-to-MIME-types [1], but 'woff2' is not in that list. You could create an improvement issue to add it, but it will take some time to get it in. To get rid of the warning quickly, either use the .woff version of the FontAwesome icons instead of .woff2 (easiest solution), or configure the (not very well documented) 'mimeTypes' init parameter of the ResourceServlet. For example:

    <init-param>

      <param-name>mimeTypes</param-name>

      <param-value>.css=text/css,.js=text/javascript, .... (etc. etc.)</param-value>

    </init-param>

You have to define the MIME types of all file extensions fetched by CKEditor. And add your .woff2 extension there as well.

hope this helps,
Mathijs

[1] http://svn.onehippo.org/repos/hippo/hippo-cms7/utilities/trunk/src/main/java/org/onehippo/cms7/utilities/servlet/ResourceServlet.java

[Gangel Dávid]

Hi,

Thank you for your suggestions.

I was able to fix with the config as:

<init-param>

      <param-name>mimeTypes</param-name>

      <param-value>.css=text/css,.js=text/javascript,.woff2=font/*</param-value>

</init-param>

Based on your suggestion.

More details about the mimetypes for fonts:

http://stackoverflow.com/questions/28235550/proper-mime-type-for-woff2-fonts

http://dev.w3.org/webfonts/WOFF2/spec/

[brian.c...@gmail.com]

Thanks for documenting this solution: a different thread injected JS in the head of the page to set `CKEDITOR.dtd.$removeEmpty.span` but I prefer configuring ckeditor directly outside of page markup.