Sakai 22 ckeditor fontawesome

[Austin]

Hello Sakai-Devs

In previous versions we used the ckawesome plugin, but that plugin is no longer compatible with the Sakai 22 ckeditor.  However, I noticed that in ckeditor.launch.js, there are these lines:

// Load FontAwesome CSS in case a user wants to manually add FA markup
ckconfig.contentsCss.push(webJars+'fontawesome/4.7.0/css/font-awesome.min.css');
ckconfig.fontawesomePath = [webJars+'fontawesome/4.7.0/css/font-awesome.min.css'];

But I tried adding e.g.

<i class="fa fa-phone"></i>

to the ckeditor [source] and if you save right away it saves ok, but if you toggle the ckeditor's [source] button, it will get stripped out.  (I know that's not antisamy, because antisamy only takes effect when you save)  Why does toggling the source button strip out the <i> tag.  Is there another type of markup to include fontawesome icons?

Has anyone successfully installed a different fontawesome plugin?

thanks,

Austin

[alan.regan]

Try SPAN tags instead (not “I”). See if that works.

I’ll have to check but I think the add-in works on our 22 instance but the SPAN workaround is worth a shot.

 Best,

Alan

[Austin]

Thanks Alan,

SPAN tags work with the fontawesome classes!

[alan.regan]

Hi, Austin. Glad to hear that the SPAN tags work.

I also checked our Sakai 22, and the FontAwesome plug-in is still working for us. I'm not a developer, so I apologize that I can't give you more details, but I can share that it's present in our CKEditor, and the button works for us. (We had it installed in prior versions and upgraded to Sakai 22 this past summer. Maybe that's why it's still working for us?)

Separately, I have advocated for the community to change the button options in the collapsed/expanded flavor of the editor. The shorter editor bar doesn't have the most popular features (bold, italic, etc.), so it defeats the purpose of a collapsed bar. Why have it collapsed if you always have to expand it to get to the commonly used features? This makes a feature intended for efficiency very inefficient instead.

https://sakaiproject.atlassian.net/browse/SAK-49196

Anyway... hope all is well. Stay dry on the islands!

-- Alan

[Austin]

Hello Alan,

Is this the FontAwesome plugin you are using?  https://ckeditor.com/cke4/addon/ckeditorfa-0

One of the comments mentions issues with the audio recorder... did you apply their workaround?

Also, as far as the toolbar being collapsed/expanded.  Yes, I agree it would be good to have the most common options available in the first line when collapsed. However, we decided to always display it as expanded like it used to be.  We added the following property to ckeditor.launch.js

toolbarStartupExpanded: true,

- Austin

ps  - thanks, yes we are forecasted to have some rain over the next few days.  Hopefully it's not too bad.

[alan.regan]

Hi, Austin.

I believe that we are using this FontAwesome plug-in:

https://ckeditor.com/cke4/addon/ckawesome

It doesn't have as many options as the version you shared, but it works for us.

Thanks for sharing the property about always expanding the editor. We considered the option but decided to keep the expand/collapse approach. We manually adjusted our editor button order to offer the most popular options (for professors who want the basics) and allowed folks who want to use other features to expand. Since the out-of-the-box versions come with the expand/collapse, we wanted to promote the most popular tools for community releases, too.

I hope you can find a fix for the plug-in you are exploring. It looks like it has some nice bells and whistles!

Best,

Alan

[Austin]

We used to have ckawesome installed on Sakai 21 and below, but when we upgraded to Sakai 22, ckawesome seemed to be causing an error in ckeditor.js, so we removed it.  does it need to be installed/configured differently in Sakai 22?

ckeditor.js?version=22.3-L1.x:6 Uncaught TypeError: a.charAt is not a function
    at Object.appendTimestamp (ckeditor.js?version=22.3-L1.x:6:478)
    at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.dom.document.appendStyleSheet (ckeditor.js?version=22.3-L1.x:83:371)
    at Object.init (plugin.js?t=N2MA:22:24)
    at Object.<anonymous> (ckeditor.js?version=22.3-L1.x:269:19)
    at n (ckeditor.js?version=22.3-L1.x:249:123)
    at Array.x (ckeditor.js?version=22.3-L1.x:249:266)
    at w (ckeditor.js?version=22.3-L1.x:249:350)
    at ckeditor.js?version=22.3-L1.x:250:285

[Matthew Jones]

I think you might have been the only Sakai that installed ckawesome.

This ticket from 2018 https://sakaiproject.atlassian.net/browse/SAK-40112 was still open and ckawesome was never added to Sakai because of the still unresolve issue in ckawesome. It also hasn't been updated for 7 years.

Have you tried this plugin? https://ckeditor.com/cke4/addon/ckeditorfa-0 The updated data of 2022 seems like that might be more compatible. 

--
You received this message because you are subscribed to the Google Groups "Sakai Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sakai-dev+...@apereo.org.
To view this discussion on the web visit https://groups.google.com/a/apereo.org/d/msgid/sakai-dev/CAKL84%3DkCwtWxT9Gg96Lo9viDqkBOfT31QOLbK1oj_uCE%2B9iHtg%40mail.gmail.com.

[Austin]

Thanks Matthew,

The https://ckeditor.com/cke4/addon/ckeditorfa-0 plugin works on my laptop's Sakai.  But only if I applied the workaround in the comments.  And the audio recorder still works.

if(typeof ids !== "undefined")

We'll do more testing, then eventually give it a try on our production servers.