Default Options to match Full HTML text format in Drupal

[tkcent]

This is not really an issue, but I just thought I would put it out there in case anyone was interested. These are the changes I made to the default options in _tinymcebackport_get_default_options() so it would closely match (as best I could) the Full HTML text format in Drupal.

Replace this section:

    'menubar' => FALSE,
    'plugins' => 'lists link image autoresize imgalign',
    'toolbar' => 'bold italic blockquote styles bullist numlist alignleft aligncenter alignright link unlink image removeformat',

with this:

     'menubar' => TRUE,
     'plugins' => 'lists link image autoresize imgalign table hr anchor code spellcheckdialog spellchecker visualblocks',
     'toolbar1' => 'code | cut copy paste pastetext | spellcheckdialog spellchecker | searchreplace | selectall | image table hr emoticons',
     'toolbar2' => 'bold italic underline strikethrough | subscript superscript | removeformat | numlist bullist | outdent indent blockquote | alignleft aligncenter alignright alignjustify | link unlink anchor',
     'toolbar3' => 'styles fontfamily fontsize | forecolor backcolor | fullscreen visualblocks',
     'link_target_list' => [
       ['title' => 'None', 'value' => ''],
       ['title' => 'Same page', 'value' => '_self'],
       ['title' => 'New page', 'value' => '_blank'],
       ['title' => 'Parent frame', 'value' => '_parent'],
     ],
     'link_rel_list' => [
       ['title' => 'No Opener Referrer', 'value' => 'noreferrer noopener'],
       ['title' => 'No Referrer', 'value' => 'noreferrer'],
       ['title' => 'No Opener', 'value' => 'noopener'],
       ['title' => 'External Link', 'value' => 'external'],
     ],

[indigoxela]

Many thanks for adding this info.

However, instead of patching the original module, it's actually better to do these changes in a custom module in hook_tinymcebackport_options_alter() That way you can benefit from updates (bug fixes, new Tiny versions...) in the main module.

Like:

function YOURMODULE_tinymcebackport_options_alter(array &$options, $format) {
  $options['plugins'] = 'lists link image autoresize imgalign table ...';
  // ... All your other changes
}

I know, the documentation re that is a bit sparse, only the API file. :wink:

[tkcent]

Excellent! I have to admit I got in a hurry and barely looked at the API file. Will implement that now in my own solutions.

Thanks for the module!

[indigoxela]

Another example to customize via API, if people search for help. A custom example module named "foobar", consisting of three files: foobar.info, foobar.module, foobar-editor-style.css

foobar.info

name = "Editor Foobar"
description = "Customize TinyMCE backport via API hooks."
core = 7.x
dependencies[] = tinymcebackport

foobar-editor-style.css

/**
 * Sample styles to apply to content in editor. Copy here whatever's relevant
 * from your theme.
 */
body {
  font: 1rem Georgia,"Times New Roman",Times,serif;
}
/* These are the custom styles in our modified "styles" dropdown. */
.my-special-para {
  font-size: 1.5rem;
  color: #bf4f4f;
}
span.x-large {
  font-size: 2rem;
  background-color: #ffff64;
}

And finally foobar.module

<?php
/**
 * @file
 * Customizes the TinyMCE backport module.
 */

/**
 * Implements hook_tinymcebackport_enabled_formats_alter().
 */
function foobar_tinymcebackport_enabled_formats_alter(&$enabled_formats) {
  $enabled_formats[] = 'full_html';
}

/**
 * Implements hook_tinymcebackport_options_alter().
 */
function foobar_tinymcebackport_options_alter(&$options, $format) {
  // Apply custom styles also to content inside editor iframe.
  $path = base_path() . drupal_get_path('module', 'foobar');
  $options['content_css'][] = $path . '/foobar-editor-style.css';
  // Stuff in most Open Source plugins available in TinyMCE plus the additional ones from the main module.
  $options['plugins'] = 'accordion advlist autoresize charmap code codesample emoticons fullscreen help image imgalign imce link insertdatetime lists media searchreplace table visualblocks visualchars wordcount';
  // Lots of buttons.
  $options['toolbar'] = 'bold italic blockquote styles removeformat bullist numlist outdent indent alignleft aligncenter alignright link unlink image media accordion codesample fullscreen code';
  $options['file_picker_types'] = 'file image media';
  // The menubar above the buttons toolbar.
  $options['menubar'] = TRUE;
  // Override content of the "styles" dropdown list in the toolbar.
  $options['style_formats'] = array(
    array(
      'title' => 'Paragraph',
      'format' => 'p',
    ),
    array(
      'title' => 'Heading 2',
      'format' => 'h2',
    ),
    array(
      'title' => 'Heading 3',
      'format' => 'h3',
    ),
    array(
      'title' => 'Heading 4',
      'format' => 'h4',
    ),
    array(
      'title' => 'Pre',
      'format' => 'pre',
    ),
    array(
      'title' => 'Div',
      'format' => 'div',
    ),
    // Also define custom styles via classes, styles ship with our CSS file.
    array(
      'name' => 'special-p',
      'title' => 'Special paragraph',
      'block' => 'p',
      'classes' => 'my-special-para',
    ),
    array(
      'name' => 'x-large',
      'title' => 'X-Large text',
      'inline' => 'span',
      'classes' => 'x-large',
    ),
  );
}

Above options result in this editor appearance:

Quite different, compared to the default setup:

[izmeez]

Thank you. The example for a custom module is a helpful start and requires more work to make it work as expected if user wants to switch between filtered and full input formats.

[indigoxela]

The example for a custom module is a helpful start and requires more work to make it work as expected...

Maybe you want to share some of your findings? :wink: If you have helpful hints...

I just created this module to have a solution for an immediate problem - to have a supported editor for my remaining D7 sites after ckeditor has been deprecated. But as D7 will be EOL soon, I didn't put too much effort in admin convenience. :see_no_evil:

[izmeez]

Sure, I'm happy to share my findings.

Using the Tinymcebackport module by itself, a role with permission to use both filtered and full formats: while creating content selecting "Filtered HTML" shows the TinyMCE toolbar, and selecting "Full HTML" displays as plain text with no toolbar as one would expect.

When the custom module is added and enabled: while creating content selecting "Filtered HTML" or "Full HTML" displays the TinyMCE full toolbar, rather than the simple toolbar for "Filtered HTML" and full toolbar for "Full HTML".

[indigoxela]

Ah, get it. The example module enables the editor on both. If, however, one wants it only on full_html and not on filtered_html, one could do instead:

function foobar_tinymcebackport_enabled_formats_alter(&$enabled_formats) {
  $enabled_formats = array('full_html');
}

And here's an example from an older site, which was upgraded from D6 (hence the numeric format name):

function foobar_tinymcebackport_enabled_formats_alter(&$enabled_formats) {
  $enabled_formats = array('3');
}

[izmeez]

The further example you provide does show it on full_html and no toolbar shows on filtered_html. What I would like is to show the simplified toolbar on filtered_html and the complex toolbar on full_html. I bit more of an ask.

[indigoxela]

What I would like is to show the simplified toolbar on filtered_html and the complex toolbar on full_html

@izmeez Now I get it. seems like there's a bug re toggling. I opened a fresh issue for that: #5 Testing and feedback over there would be cool. :wink: