By EvanE77 on

I have migrated my D6 site to D8 successfully and want to implement the font module in ck editor. When I activate the ck editor font module the editor window does not appear when editing a page if I disable it the edit window reappears. How can I fix this? Where exactly do I insert the font plugin? I have successfully implemented ck editor and ck finder in drupal 6 & 7 but this has me baffled.

⋅ Categories: Drupal 8.x

Comments

slewazimuth’s picture

slewazimuth commented

CKEditor is native to Drupal 8. This youtube video I did a long time ago should give you an idea of working with font family and size plugin for ckeditor in Drupal 8.

EvanE77’s picture

EvanE77 commented

Hi slewazimuth, thanks for the video it does explain a great deal. My main problem is that when I enable the "font ck editor" module in the extend page, first I do not see the font buttons in the configure ck editor page and second when I try to edit a page of content the editor windows is missing in other words I cannot see it to do any editing. On the extend page it reports that the module was successfully installed. So as you can see I cannot even get to first base.
I am aware that ck editor is native to drupal 8, as far as I am concerned this seems a retrograde step as I had ck editor work perfectly for me in drupal 6 and drupal7 and I didn't need to mess about installing specific fonts and font sizes either.
Apart from your video where would I find full instructions for implementing fonts in ck editor in drupal 8

slewazimuth’s picture

slewazimuth commented

That old video shows the original "CKEditor Font Family and Size" module back when it was first developed. The latest version includes the original set of fonts and sizes which are installed automatically when the module is first enabled or the list of fonts and/or sizes gets deleted which resets the affected textarea(s). You can still add/edit fonts and sizes as desired. I just haven't updated the video yet.

However, it is NOT a contrib module from drupal.org, although, it is based on the "Font Size and Family" plugin from ckeditor.com. I wrote it back when I was first checking out CKEditor on Drupal 8 and doing stuff on projects. There were no contrib modules for ckeditor on drupal.org at the time so I just whipped up what was needed.

As for where to find full instructions, I would have thought there would be a mountain of documentation by now. However, I am writing a book about 8 at the moment which includes a free suite of modules I wrote, (including the CKEditor Font Family and Size), documentation, code examples, screen recordings, and Intermedia.

EvanE77’s picture

EvanE77 commented

My main problem is that activating the ck editor font module causes the edit window to disappear, not show when trying to edit content. The edit window reappears after I uninstall the ck editor font module.
In other words it doesn't work for me.

slewazimuth’s picture

slewazimuth commented

I just tried installing the ckeditor font module from the drupal.org and followed their instructions. It worked immediately.

Here are the instructions to which I added a few notes:

1. Download the plugin from http://ckeditor.com/addon/font. (Unzip the downloaded zip file)
2. Place the plugin, (font folder that showed up when you did the unzip), in the root libraries folder (/libraries). (If you don't have a libraries folder there, then create one)
3. Enable CKEditor Font in the Drupal admin. (This the one from drupal.org at https://www.drupal.org/project/ckeditor_font)
4. Configure your WYSIWYG toolbar to include the buttons. (They show as active buttons labelled S and F)

EvanE77’s picture

EvanE77 commented

This was the information I needed. I had downloaded the font addon file and unzipped it but couldn't figure out where it needed to go. Everything works fine now. Thank you.

1. Download the plugin from http://ckeditor.com/addon/font. (Unzip the downloaded zip file)
2. Place the plugin, (font folder that showed up when you did the unzip), in the root libraries folder (/libraries). (If you don't have a libraries folder there, then create one)

sagir42’s picture

sagir42 commented

I saw your old video. I followed your 4 steeps instruction, but I don't know why it's nor working.
I didn't see any 'font' and 'size' icon. only it's showing 'f' and 's' button. When I put them into the wysiwyg area, editor area just disappeared.

slewazimuth’s picture

slewazimuth commented

The old video is for the module I created for clients before there was ever a contrib module available. The module I made is named "CKEditor Font Family and Size". After it had been around for a while an official contrib module showed up named "Font Size and Family" and is found at drupal.org. That is the one you have. It requires doing additional steps to install and if they are not done properly or a step is missed it results in what you have.

sagir42’s picture

sagir42 commented

I followed the steeps from module page.

slewazimuth’s picture

slewazimuth commented

Do you have the libraries folder(directory) in your sites root folder(directory)?

sagir42’s picture

sagir42 commented

I created the libraries folder and downloaded the plugin library and unziped it in that libraries folder.

slewazimuth’s picture

slewazimuth commented

Just to check I went to one of my test sites, created a libraries directory in the root directory of the site, downloaded Font Size and Family plugin from ckeditor.com and placed it in libraries folder, unzipped it and downloaded CKEditor Font Size and Family module from drupal.org and installed it. Then went to "/admin/config/content/formats", clicked on "Full HTML" configure button, made a Font Group, dragged the "F" and "S" buttons to the Font Group and saved the configuration. I created a font test page and tired a few fonts and sizes. Everything worked. The test site is running Drupal 8.4.0-rc1

sagir42’s picture

sagir42 commented

Exactly I did the same. But It's not working for me. I failed more then twoice.
Ok! Let me try again.

sagir42’s picture

sagir42 commented

Only local images are allowed.
I followed you all the steeps very carefully. But failed.

sagir42’s picture

sagir42 commented

I did all the thingks right as you mentioned. but it's not working. when I went to the console of firefox I get this error:
Error: [CKEDITOR.resourceManager.load] Resource name "font" was not found at "/libraries/font/plugin.js?t=owbqb6".
can you tell you what does it means?
I have the libraries folder where I put the font library.

slewazimuth’s picture

slewazimuth commented

I just tried the site out on firefox and it was working just fine. I have a libraries directory in the root directory of my site which is the same directory where the sites, profiles, and vendor directories are located. In the libraries directory is a directory called font which houses the plugin.js library. Did remember to clear the cache after making you corrections?

sagir42’s picture

sagir42 commented

Yes! I did it. To find out the mistake I reinstlal a seperate drupal8 site in my local pc. I'm getting the same error here. Howver I installed juicebox module to test if my libraries folder is working or not. Juicebox is working fine and drush command libraries-list shoing only juicebox libraries. no option for font plugin is showing.

sagir42’s picture

sagir42 commented

Sorry If I'm bothering you. I'm really trying hard to find the problem but I failed.
When I enable ckeditor font module plugin seciton of Full HTML disappears.
https://pasteboard.co/GM1YlLY.png
you can find the photo of plugin section in above link.

slewazimuth’s picture

slewazimuth commented

The libraries folder needs a folder inside it called "font". Inside the font folder should be a file called plugin.js and a folder called "lang". Placing the zip file you downloaded from ckeditor.com into the library folder and unzipping it there should produce the font folder, the plugin.js file and the folder called lang inside the font folder. The version of the plugin I download was 4.7.3 which is labelled on the zip file.

sagir42’s picture

sagir42 commented

Thanks for your instruction and pluging version. I did the exact same things as you did and my versoin is also 4.7.3. Even I tried other version too. but no result.
It's driving me crazy!

arthurgr’s picture

arthurgr commented

I was having the same problem as you, I unchecked the "Limit allowed HTML tags and correct faulty html" and it seemed to have fixed my issue. Please try this. I read that this was an ongoing bug, but unfortunately I cannot find the url. But at least this is worth a try

arthurgr’s picture

arthurgr commented

This is in the "Enabled Filters" section, right underneath where you configure the ckeditor toolbar. Hope that helps

sagir42’s picture

sagir42 commented

Thanks for your help. But my that option is already unchacked.

johnnyho1508’s picture

johnnyho1508 commented

Hi Guys, I tried to disable filter html. It works well now on lightning (drupal 8.3.x). Please try it on

sagir42’s picture

sagir42 commented

can you tell me what is yoru font plugin version?

mikeslade’s picture

mikeslade commented

New to Drupal 8.4.2 and have starting building a site. Wanted to expand Ckeditor with fonts. Follow procedure but once I have added to the font plugin to /libraries, full html no longer shows up when editing and text is also missing.

The problem is caused by adding the 'S' and 'F' menu items to the Full HTML toolbar.

Check boxes to be unchecked by earlier comments are unchecked.

sagir42’s picture

sagir42 commented

Have you solved the problem? If not you can follow my footprint.

I was working at my own pc or local machine. I failed to solve it. But When I tried to do the same steeps as module describes in the read me file at a live site it works. Give a try to follow the steeps in a live site. Hope it will work at that time.

pe.aguera’s picture

pe.aguera commented

I had the same problem. My D8 site isn't installed in / . I fixed the error by changing the followin line of FontCKEditorButton.php :

    $path = '/libraries/font'; 

to

    $path = 'libraries/font';   // remove / because not at root

rimibhagat’s picture

rimibhagat commented

This Solutions Worked. Thanks.

I would like to add if your site is in '/'  or root then this change is not required

Heyitsrick’s picture

Heyitsrick commented

I can't tell you how much time I've spent looking to see why I was having the same problem listed in this thread.

As mentioned above, here's the console error I was seeing when trying to activate the Fonts module in D8:

    [CKEDITOR.resourceManager.load] Resource name "font" was not found at "/libraries/font/plugin.js?t=(my t code) 

Not only was I getting that error and subsequent 404 code in console, my edit window would go blank. All of my text in the window would disappear. 

Once I saw this post from @pe.aguera, I actually looked closer at the console log error. Sure enough, the URL it was looking for was missing the name of my Drupal install folder. Hence, it was 404ing. 

To be clear, the URL looked something like this while giving a 404:

https://mysite.com/libraries/font/plugin.js

To fix the path, I had to edit it like this:

https://mysite.com/mydrupalinstallfolder/libraries/font/plugin.js

Once I edited the FontCKEditorButton.php file to add the correct path, the font capability came right up in CKEditor, and I could see my edit window contents normally. By the way, the FontCKEditorButton.php file is located in /modules/ckeditor_font/src/Plugin.

I also made the same/similar edits to the plugin files for CKEDITOR colorbutton and panelbutton modules. Before I corrected the colorbutton path, for example, I would get no labels on the colorbutton buttons. They were just blank. Once the path was corrected, the buttons came up with their correct labels.

Many, many thanks for figuring out this fix!