modify CKEDITOR plugin tooltips

303 views
Skip to first unread message

Brian Street

unread,
Jun 13, 2018, 11:44:18 AM6/13/18
to Hippo Community
Our current configuration confuses authors with identical buttons/tooltips for internal images vs external images.

Internal images:
* image from /ckeditor/optimized/plugins/hippopicker/icons/pickimage.png?t=P70Mg2HUlgmmgohG4SRKfw__
* label=Image
* onfocus="return CKEDITOR.tools.callFunction(66,event);"
* onclick="CKEDITOR.tools.callFunction(67,this);return false;"



External images: 
* image from /ckeditor/optimized/plugins/icons.png?t=G9L7
* label=Image
* onfocus="return CKEDITOR.tools.callFunction(69,event);"
* onclick="CKEDITOR.tools.callFunction(70,this);return false;"

How can we modify the button icons and/or the tooltips to differentiate them for our authors?  I have no visibility or configuration into /ckeditor/optimized from the CMS app.  I am tempted to plug into the custom-config.js file - writing a JS function that ties into init and overwrites some of the generated markup.  But is there a better way?

Woonsan Ko

unread,
Jun 13, 2018, 10:33:25 PM6/13/18
to hippo-c...@googlegroups.com
On Wed, Jun 13, 2018 at 11:44 AM, Brian Street <brian.c...@gmail.com> wrote:
Our current configuration confuses authors with identical buttons/tooltips for internal images vs external images.

Internal images:
* image from /ckeditor/optimized/plugins/hippopicker/icons/pickimage.png?t=P70Mg2HUlgmmgohG4SRKfw__
* label=Image
* onfocus="return CKEDITOR.tools.callFunction(66,event);"
* onclick="CKEDITOR.tools.callFunction(67,this);return false;"



External images: 
* image from /ckeditor/optimized/plugins/icons.png?t=G9L7
* label=Image
* onfocus="return CKEDITOR.tools.callFunction(69,event);"
* onclick="CKEDITOR.tools.callFunction(70,this);return false;"

How can we modify the button icons and/or the tooltips to differentiate them for our authors?  I have no visibility or configuration into /ckeditor/optimized from the CMS app. 
I find it in cms/WEB-INF/lib/hippo-ckeditor-*-optimized.jar!ckeditor/optimized/plugins/icons.png. I believe that's served through the servlet mapped at /ckeditor/* in cms/WEB-INF/web.xml.
Perhaps you can try to shadow the resource by putting a custom one in cms/WEB-INF/classes/ckeditor/optimized/plugins/icons.png? I know this is not the best solution.

Regards,

Woonsan

 
I am tempted to plug into the custom-config.js file - writing a JS function that ties into init and overwrites some of the generated markup.  But is there a better way?

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



--

Mathijs den Burger

unread,
Jun 15, 2018, 8:48:50 AM6/15/18
to hippo-c...@googlegroups.com
The tooltip text of these plugins (in all languages) is baked into the minified JavaScript and cannot be changed. Using the customConfig option is probably your best bet. You could try to change CKEDITOR.lang.hippopicker.imageTooltip, but I could not find a way to do that at the right moment. Either the hippopicker plugin is not loaded yet, or the tooltip text is already rendered. Modifying the DOM of the rendered editor is, although ugly, probably the most pragmatic solution :).

Mathijs

Brian Street

unread,
Jun 20, 2018, 1:13:04 PM6/20/18
to Hippo Community
I tried:
* replacing the icon, but between the /optimized/ folder and the spriting, this was not a good solution
* CKEDITOR.lang... was also a dead-end: never found "hippopicker" anywhere in the object tree - also couldn't find any *Tooltips

For now, going with https://www.onehippo.org/library/concepts/editor-interface/tweak-the-css-of-the-cms.html to set a different background color on one of the icon links - they do have different classes.

Kitty Liem

unread,
Jun 21, 2018, 3:35:28 AM6/21/18
to Hippo Community
Hi,

I have different image for extra plugin in /hippo:namespaces/hippostd/html/editor:templates/_default_, in ckeditor.config.appended.json  set buttonIcon and/or defaultDocumentIcon (cms/images/...), buttonLabel for text.

Does this help you?


Op woensdag 20 juni 2018 19:13:04 UTC+2 schreef Brian Street:
Reply all
Reply to author
Forward
0 new messages