1

I'm trying to install the CKEditor Font Size Module in my my editor. I installed the module via composer and then proceeded to copy the font/plugin.js file from the Font Plugin's page into libraries/ in my document root, per the instructions.

I also threw in a console.log() call into the font/plugin.js file to make sure it was loading. I modified the configuration of the Basic HTML editor to include the font size and family buttons in the toolbar on the /admin/config/content/formats/manage/basic_html page of my site. When I go to create a piece of content that uses the Text Editor, I don't see the font/size buttons I've configured.

Checking the Javascript console, I see my log message so I know the font/plugin.js file is being loaded. There are no error messages in the console. Why would the buttons not be showing up in this case?

  • What about when uyou try the Full HTML filter? – Kevin Dec 19 '18 at 17:01
  • @Kevin Oh, interesting. I see them in Full HTML mode but not in Basic HTML. Why might that be the case? – Kimberly W Dec 19 '18 at 18:01
  • It sounds like however those fonts are set, it might be rejected by the filter (like inline style tags) or depend on another plugin that might not be loaded by Basic HTML configuration. In these cases buttons won't show, I have seen this happen on some button plugins I've made before. – Kevin Dec 19 '18 at 18:05
  • Maybe could be related to this, have you applied the patch in #22 ? – No Sssweat Dec 19 '18 at 18:34
  • @NoSssweat Thanks for the suggestion, I actually came across this already and the patch by the way is out of date. I believe Kevin was correct that it is the Basic HTML configuration that is not rendering the buttons. I'm testing it out and will post an answer shortly. – Kimberly W Dec 19 '18 at 18:45
2

Kevin's comment was spot on and it was in fact the Basic HTML configuration that was preventing the button from rendering. Specifically, the filter "Limit allowed HTML tags and correct faulty HTML" was the issue. The buttons rendered correctly in Full HTML mode so that was the hint.

In the filter configuration at the bottom of the /admin/config/content/formats/manage/basic_html page, I modified the allowed tags. By default the filter allows plain span tags without any attributes. However, this plugin uses span tags with inline style attributes. As a result, I had to change <span> to <span style> in Allow Tags list.

I can now see the font and size buttons in the editor, and using the tool injects HTML like the following:

<p>The <span style="font-size:72px;">Quick red</span> fox jumps over the lazy brown dog</p>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.