suite Gettin' Font Awesome within editor working

[Admonstrator]

Hi there,

I'm currently trying to get font awesome working within the CKeditor but it's not working. I tried a plugin called "FontAwesomePremium" ( http://ckeditor.com/addon/fontAwesomePremium ) but I'm not able to get in up'n'running. Is here anybody who uses this plugin and could help me with this or can provide another solution for font awesome?

Thanks!

[Adlago]

Everything here http://fortawesome.github.io/Font-Awesome/icons/  exists in ips 4.x 

You can use any icons such as

<i class="fa fa-your icon" ></i>

 

[Paul.F]

He wants it in the editor.

1 hour ago, Admonstrator said:

Hi there,

I'm currently trying to get font awesome working within the CKeditor but it's not working. I tried a plugin called "FontAwesomePremium" ( http://ckeditor.com/addon/fontAwesomePremium ) but I'm not able to get in up'n'running. Is here anybody who uses this plugin and could help me with this or can provide another solution for font awesome?

Thanks!

When you installed the other pre-reqs were they version 4.5.4. And working before installing the fontawesome.

[Kjell Iver Johansen]

@Admonstrator - did you find the solution on this issue?

[Admonstrator]

17 hours ago, Kjell Iver Johansen said:

@Admonstrator - did you find the solution on this issue?

Nope, not a this time

[Nathan Explosion]

As that plugin is a commercial plugin, you're going to have to wait for someone else to purchase it and install it to obtain some help. However, as you have access to it can you advise if it uses the same installation instructions as the non-commercial version or not? http://ckeditor.com/addon/fontawesome

You also said that you were unable to get this up and running - why? Was it the installation that you couldn't do, or did you do it exactly as it said but it didn't work? Provide more information about the problem you are having and you'll most likely get an answer on how to get it working.

[Admonstrator]

6 minutes ago, Nathan Explosion said:

You also said that you were unable to get this up and running - why? Was it the installation that you couldn't do, or did you do it exactly as it said but it didn't work? Provide more information about the problem you are having and you'll most likely get an answer on how to get it working.

The install procedure should be the same.
 managed to install it but if you press the installed button within the editor an iframe/popup will open with your settings and you can choose the icon you want to insert in your text. But this popup isn't working. I think that there are some restrictions within IPS for external editor plugins. You can whitelist javascript controllers and something else but I don't know what to enter ...

[Nathan Explosion]

Can you provide a link to your forum in that case, with the icon on display, and provide some test credentials please?

[Admonstrator]

6 hours ago, Nathan Explosion said:

Can you provide a link to your forum in that case, with the icon on display, and provide some test credentials please?

Thanks, I will create you an account after I set up our test environment. Just give me a few days.

[Kjell Iver Johansen]

I have the same commercial Plugin and I just install in ACP.

The How To procedure states: Is that all OK when I install in ACP - or do we need to do anything else?

[Nathan Explosion]

You will need to go through those instructions - all the install in the ACP does is upload the plugin folder and then add the plugin to the extraPlugins content in the database.

You will need to go through the installation as per the instructions - and if you need assistance on it then you'll need to wait for someone who has purchased it and performed it to advise.

[Nathan Explosion]

@Kjell Iver Johansen thanks for getting the file to me. I've got it to the point where it will insert the icons in to the editor, which isn't that difficult to do, however when submitting the content in a post it is stripped out. Now, to understand why that happens (probably something to do with the allowedcontent settings for ckeditor) I need to look at the source of the content in the editor.....and this is where I believe there might be a bug with the plugin as I'm seeing several javascript errors related to ckeditor.

So...I took IPS out of the mix and downloaded ckeditor, making sure I included the widget/line utilities/color dialog plugins in my download, and attempted to install that plugin in to it.

Same result: unable to view the source if there is a font-awesome icon included in the content. This bug can be reproduced as follows:

1. Download ckeditor, including the 3 listed plugins in the build.
2. Copy the ckeditor to a localhost installation (http://localhost/ckeditor)
3. Open http://localhost/ckeditor/samples/index.html
4. Type some content - click the 'source' button. Works fine.
5. Download font-awesome 4.4
6. Copy that folder to the localhost installation (http://localhost/fontawesome)
7. Follow the instructions to install the plugin. For the 'contentsCss' line, the path will be '../../fontawesome/css/font-awesome.css'
8. Open http://localhost/ckeditor/samples/index.html
9. Click the font awesome icon and insert an icon - click the 'source' button. Fails to show the source, and javascript errors appear.

That bug will need to be reported to, and fixed by, the support team for the plugin (your support is included in your purchase) before we can proceed further with this one.

[ABGenc]

On 31.10.2015 18:47:17, Adlago said:

Everything here http://fortawesome.github.io/Font-Awesome/icons/  exists in ips 4.x 

You can use any icons such as

<i class="fa fa-your icon" ></i>

 

 

On 31.10.2015 19:50:51, Paul.F said:

He wants it in the editor.

When you installed the other pre-reqs were they version 4.5.4. And working before installing the fontawesome.

@Paul.F actually @Adlago is right. Today I have used the way he described. I needed to create a record to explain the contents and usage of streams and posted following record ;

http://www.mazdaclubtr.com/sss/yeni-mesaj-konu-ve-icerikleri-nasil-goruntulerim-r7/

The usage was simple. Anywhere you want to put the icon, click Source on the editor toolbar and put ;

<i class="fa fa-your icon" ></i>

where ever you like.

[Nathan Explosion]

3 minutes ago, ABGenc said:

 

@Paul.F actually @Adlago is right. Today I have used the way he described. I needed to create a record to explain the contents and usage of streams and posted following record ;

http://www.mazdaclubtr.com/sss/yeni-mesaj-konu-ve-icerikleri-nasil-goruntulerim-r7/

The usage was simple. Anywhere you want to put the icon, click Source on the editor toolbar and put ;

<i class="fa fa-your icon" ></i>

where ever you like.

All relies on the ability to post HTML though (to reveal the source button)

It's the solution I would use if it was just me that was posting - but if an admin wants to open it up to everyone but not allow 'source' then it's plugin city time! :D

[ABGenc]

Just now, Nathan Explosion said:

All relies on the ability to post HTML though (to reveal the source button)

It's the solution I would use if it was just me that was posting - but if an admin wants to open it up to everyone but not allow 'source' then it's plugin city time! :D

That is true. Since at the moment admins are the only ones that is aware of Font Awesome, this solution works for us. For a wider usage a plugin is needed though.

[Paul.F]

18 minutes ago, ABGenc said:

 

@Paul.F actually @Adlago is right. Today I have used the way he described. I needed to create a record to explain the contents and usage of streams and posted following record ;

http://www.mazdaclubtr.com/sss/yeni-mesaj-konu-ve-icerikleri-nasil-goruntulerim-r7/

The usage was simple. Anywhere you want to put the icon, click Source on the editor toolbar and put ;

<i class="fa fa-your icon" ></i>

where ever you like.

Uhm. ok

[Admonstrator]

4 hours ago, ABGenc said:

The usage was simple. Anywhere you want to put the icon, click Source on the editor toolbar and put ;

<i class="fa fa-your icon" ></i>

where ever you like.

Sounds like a feature request for me. Shouldn't be difficult to parse so everyone can use font-awesome (just like smileys)

[Nathan Explosion]

This option isn't difficult at all.

1. ACP -> Customization -> (Editor) Toolbars
2. Add Button -> Custom
3. Name it as you wish.
4. Upload an icon
5. Use Option = on.
6. html would be as below code box
7. Save it and move the button in to the editor
8. Click it and simply add in the additional class information for the icon.

<i class="fa {option}>&nbsp;</i>
          
(The &nbsp; is needed otherwise ckeditor will strip the empty element out)

Yes, the users will have to look up the class information for each icon - but show me someone who knows them all off by heart ;)

[Admonstrator]

@Nathan Explosion Yeah, thanks for that snippet. Will it work for people without the permission to use HTML too?

[Nathan Explosion]

Yes.

[Kjell Iver Johansen]

@Nathan Explosion thanks for your detailed bugreport. I have filed it to the developer