EnableTabs

Summary: Enable Tabs in the main edit text area
Version: 20200506
Prerequisites:
Status: Beta
Maintainer: Petko
License: Public domain
Categories: Editing PHP74
Users: (view? / edit)
Discussion: EnableTabs-Talk?

Two ways to enable the insertion of the "tab" character in the main edit text area.

Description

The Tab key by convention moves between form fields, so it is difficult to insert an actual Tab character into an edit field.

Here you can find 2 recipes, one is to make the tab key actually insert a tab character in the main text area, the other is to add a GuiEdit button that inserts that character.

Installation

You can install one or both solutions listed here.

To enable the tab key from the keyboard to actually insert the tab character, add this to config.php:

## https://www.pmwiki.org/wiki/Cookbook/EnableTabs
$HTMLFooterFmt['allow-tabs'] = "<script>
  var tarea = document.querySelector('#wikiedit #text');
  if(tarea) tarea.addEventListener('keydown', function(e){
    if(e.key!='Tab' || e.ctrlKey || e.shiftKey || e.altKey) return;
    e.preventDefault();
    var s1 = this.selectionStart, s2 = this.selectionEnd;
    this.value = this.value.substring(0, s1) + '\t' + this.value.substring(s1);
    this.selectionStart = s1+1 ; this.selectionEnd = s2+1;
  });
  </script>";

Note that this will prevent your writers to use the Tab key to move from the edit area to the summary field and to the buttons to submit the form. They will absolutely need to have a mouse or a touch screen to be able to submit the form or to get out of the text area.

To insert a tab in the main text editing area, just press the "Tab" on your keyboard.

To enable a GUIEdit button that inserts the Tab character, place this button in your directory pmwiki/pub/guiedit/ and add to config.php:

$GUIButtons['tab'] = array(9999, "\t", '', '', '$GUIButtonDirUrlFmt/tab.png"$[Tab]"');

Obviously, this requires that you enable the GUI buttons, see $EnableGUIButtons.

To insert a tab in the main text editing area, push the new button.

Internationalization

The button tooltip title "Tab" can be translated in an XLPage, for example in French:

  'Tab' => 'Tabulation',

Notes

Both solutions require a relatively modern browser with JavaScript enabled.

Change log / Release notes

  • 20200506 First release, ready to be tested.

See also

Contributors

Recipes written and maintained by Petko.

Comments

See discussion at EnableTabs-Talk?

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.