2

Is there a way to add a tag to the format dropdown that would wrap the text in <small></small> tags?

Editing config.js as follows causes a runtime error:

config.format_tags = 'small;p;h1;h2;h3;pre';

probably because <small> is not block level?

2
  • 2
    The idea behind the formats drop-down is that it defines block level formats. For inline ones it's better to use the styles drop-down. And if you want to have block and inline styles in one drop down, then the styles drop-down is a better choice IMO.
    – Reinmar
    Jun 12, 2014 at 8:33
  • Thanks, I will investigate the preferred option.
    – Tim
    Jun 13, 2014 at 20:09

3 Answers 3

3

The reason of the runtime error is, that js can not find CKEDITOR.config.format_small.

You have to do two things:

  1. Search for CKEDITOR.config.format_h6 in ckeditor.js and add CKEDITOR.config.format_small={element:"small"};. Then the error is gone, but you can not see the entry yet.
  2. open the languagefile you want (e.g. en.js) and add "tag_small":"small text".
    now CKEditor supports the small tag.

This works for me, I hope it works for you too.

2
  • Thank you for the instructions. It works. I will accept the answer, but look into the Styles dropdown as well, as @Reinmar suggested.
    – Tim
    Jun 13, 2014 at 20:08
  • I would add that the language files contain nested object. Find "format":{...} and define your tag in there, for example "format":{"tag_section":"Section"} May 8, 2015 at 19:03
1

If I want to add a custom section tag to format tags, this work for me:

1. Go to config.js, add
config.format_tags = 'h1;h2;h3;h4;h5;h6;section';
config.format_section = { element : 'section' };

2. Then open the languagefile you want (e.g. en.js) -> lang/en.js
search for "tag_pre":"Formatted", and add "tag_section":"Section".

0

If you're looking to wrap text in a certain tag, you can also achieve this with the Style dropdown as well.

  1. First, configure your editor to allow styles at /admin/config/content/formats/manage/full_html. Replace full_html with whatever editor version you want to modify
  2. Drag the Styles button to the active toolbar if it isn't already there
  3. Add items to "Styles Dropdown" tab under CKEditor plugin settings

Each option takes the form css_selector | Human Visible Name so in your case, you'd add small.my_element_class | Super Special Small or something similar.

Instructions abbreviated from this post: https://www.axelerant.com/resources/team-blog/drupal-8-custom-styles-in-ckeditor

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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