I need users to be able to post simple lists of dates/events like:

09&10 Dec     event 1
13 Dec        event 2
20 Dec        event 3

The only ways to preserve the 'tab' space, is to put five normal spaces and use a fixed-width font, or use a table. Both methods are inadequate for various reasons.

Does anyone know how to get the tab button working in TinyMCE, so we can create simple columns easily?

Thanks.

Comments

twod’s picture

Title: tab in wysiwyg + tinymce » Inserting tabs
Status: Active » Fixed

Can't say I'd prefer tabs (&#09) over tables at any point, since both they and any amount of spaces get collapsed to a single space.
Source:

<p>This is a sample     sentence.</p><!-- Five spaces -->
<p>This is a sample&#09;sentence.</p><!-- A tab -->

Rendered:

This is a sample sentence.

This is a sample sentence.

Unless you want to wrap everything in pre tags, regular spaces will only count as non-visible markup indents.

Non breaking spaces &nbsp; are a different matter though, they will get rendered as spaces, but they'll also prevent normal line wrapping. I don't know how their behavior changes between fixed and non-fixed with fonts, but tabs would most likely not work perfectly either since there's no equivalent to custom tab stops in HTML.

If you really want to try using &nsbsp; to represent tabs anyway, you can create a small Drupal module to inform Wysiwyg about TinyMCE's "nonbreaking" plugin. The number of spaces is hardcoded to 3 so I can't help you there, but here's the code to show the plugin under "Buttons and plugins".

sites/all/modules/tiny_tabs/tiny_tabs.info:

name = Tiny tabs 
description = Adds support for the nonbreaking TinyMCE plugin via Wysiwyg module.
core = 6.x
dependencies[] = wysiwyg

sites/all/modules/tiny_tabs/tiny_tabs.module:

/**
 * @file
 * Informs Wysiwyg module about the nonbreaking plugin for TinyMCE.
 */

/**
 * Implements hook_wysiwyg_plugin().
 */
function tiny_tabs_wysiwyg_plugin($editor, $version) {
  if ($editor == 'tinymce') {
    return array(
      'nonbreaking' => array(
        'url' => 'http://www.tinymce.com/wiki.php/Plugin:nonbreaking',
        // Change 'buttons' to 'extensions' to enable just the plugin and not the button
        'buttons' => array('nonbreaking' => t('Insert tab')),
        'options' => array('nonbreaking_force_tab' => TRUE),
        'load' => TRUE,
        'internal' => TRUE,
      ),
    );
  }
}

If you find that the nonbreaking plugin does almost what you need, you could copy it from TinyMCE's plugins folder to somewhere else, rename it to avoid name collisions and modify to your liking. Then change 'internal' in the code above to FALSE and add 'path' and 'filename' properties to point to where the new plugin is located. 'path' => drupal_get_path('module', 'wysiwyg') . '/plugin/myplugin', 'filename' => 'editor_plugin.js',, or something like that should do the trick.

chianti’s picture

Thanks for the verbose reply.
Greatly appreciated.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.