-1

I work with Drupal 8.1.3 and my WYSIWYG editor lacks font-size and color buttons.

Is there a way to unlock these or should I install a total different editor (while trying to convince some in the community to bring these options back)?

0
5

You are looking for the ColorButton and CKEditor Font Size and Family plugins. Follow the instructions on the project pages and you'll have the option to add those back to the toolbar.

Beware that because these plugins use inline styles, the effects will be removed by Drupal's XSS filtering mechanisms if the format has "Limit allowed HTML tags and correct faulty HTML" enabled.

There is currently no way (that I know of) to have both filtered markup and inline styles. There is currently no equivalent of D7's WYSIWYG Filter module for D8. Such a module would have to both implement a new filter of type Drupal\filter\Plugin\FilterInterface::TYPE_HTML_RESTRICTOR and the hook hook_editor_xss_filter_alter() to override the use of \Drupal\editor\EditorXssFilter\Standard in the Editor module (that class extends Drupal\Component\Utility\Xss and calls its filter method, which in turn is hard-coded to always remove style attributes.

Update: The htmLawed module does provide an alternative to Core's filter, so you can configure it to not strip style attributes during rendering. Ensuring that configuration safe is another matter, but just adding the 'span' tag in the list of allowed tags and removing 'style' from the list of disallowed attributes got me partially there.

I say partially because as soon as you try to edit the saved content or switch to another format and back, the style attribute will still be stripped by Editor module. When you switch to a format with an editor enabled Editor module's script will make an AJAX call to the server and pass the contents of the original textarea to be filtered before sending it into the editor. (When an editor is attached on page load, this happens as part of generating the form so no AJAX call is needed until the format switch.)

It is during this process which the XSS filtering is still messing with the inline style attribute, as the call to Xss:filter() still blacklists it. The htmLawed module (or another module) would have to perform the aforementioned class replacement to get rid of this feature/problem completely.

So, as long as you re-apply inline styles each time you edit the content, and do not switch between editor formats while doing so, you can get font colors and sizes done, though it's currently a bit impractical and not very intuitive.

0

Open Administration -> Configuration -> Content authoring -> Text formats and editors admin/config/content/formats and Configure the text format you are using. Then drag and drop the buttons you want to use in your editor in the Toolbar Configuration section and click Save Configuration.

To add custom styles to the editor like different font colors & font sizes, drag the Styles-button to the toolbar. You will get a new tab below called Styles Dropdown. In that tab you can add your own Style options. So if you want to add a possibility to add Heading 2 content in your editor, add the line h2|Heading 2. If you want to add text that is red color, add the line .color-red|Red color and then in your CSS file define .color-red { color: red; } and so on.

7
  • 1
    This buttons aren't included there. If they appear for you, please upload an image that shows that.
    – user16289
    Jun 22 '16 at 1:20
  • 1
    Ah yes, out of the box there's no font-size or color dropdowns. You'll need to add these yourself by dragging the Styles-button to the toolbar. You will get a new tab below called Styles Dropdown. In that tab you can add your own Style options. So if you want to add a possibility to add Heading 2 content in your editor, add the line h2|Heading 2. If you want to add text that is red color, add the line .color-red|Red color and then in your CSS file define .color-red { color: red; } and so on.
    – Juhani
    Jun 22 '16 at 1:26
  • 1
    I can write CSS directly in the source code; I am not asking of a way to write CSS directly with the editor but rather on a way to bring back these buttons - Most preferably in a modular way.
    – user16289
    Jun 22 '16 at 1:27
  • 1
    Adding the Styles-dropdown doesn't add any CSS directly. It only allows you to specify CSS Classes and tags to your content that you can then style as you wish in your theme's CSS stylesheet.
    – Juhani
    Jun 22 '16 at 1:31
  • 1
    It's quite different than what I aim to get.
    – user16289
    Jun 22 '16 at 1:32

Your Answer

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