Important changes to Tiny Cloud pricing > Find out more

Nonbreaking Space plugin

Insert a nonbreaking space.

Contribute to this page
+ toolbar button + menu item

This plugin adds a button for inserting nonbreaking space entities   at the current caret location (cursor insert point). It also adds a menu item Nonbreaking space under the Insert menu dropdown and a toolbar button.

Type: String

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'nonbreaking',
  menubar: 'insert',
  toolbar: 'nonbreaking'
});

Options

nonbreaking_force_tab

This option allows you to force TinyMCE to insert three   entities when the user presses the keyboard tab key.

It’s important to note that this does not change the behavior of the menu and toolbar controls, which will continue to insert a single &nbsp entity when nonbreaking_force_tab value is true.

However, the true condition does capture the tab key and contain it within the editable area, whereas when set to its default state of false a tab keypress will move the cursor to the next editable area (e.g. a browser url bar or form field on the current page).

Note: Review Usage with table or lists plugin before using this setting.

Type: Boolean

Default Value: false

Possible Values: true, false

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'nonbreaking',
  menubar: 'insert',
  toolbar: 'nonbreaking',
  nonbreaking_force_tab: true
});

Usage with table or lists plugin

The nonbreaking_force_tab setting can break the following functionality:

  • The table plugin uses the Tab key for navigating between table cells.
  • The lists plugin uses the Tab key for item indentation.

To retain the Tab key functionality of the lists or table plugins, add the table or lists plugins before the nonbreaking plugin in the init configuration, such as:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table lists nonbreaking',
  nonbreaking_force_tab: true
});

To insert a non-breaking space with the Tab key instead of table and lists Tab functionality, add the nonbreaking plugin before the table and lists plugins in the init configuration, such as:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'nonbreaking table lists',
  nonbreaking_force_tab: true
});

nonbreaking_wrap

This option allows you to force TinyMCE to wrap non-breaking space characters inserted by the plugin in a <span class="mce-nbsp-wrap"></span> element. This will prevent the non-breaking space being replaced by the editor or browser when typing additional spaces.

Type: Boolean

Default Value: true

Possible Values: true, false

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'nonbreaking',
  menubar: 'insert',
  toolbar: 'nonbreaking',
  nonbreaking_wrap: false
});

Toolbar buttons

The Nonbreaking Space plugin provides the following toolbar buttons:

Toolbar button identifier Description
nonbreaking Inserts a nonbreaking space into the editor.

These toolbar buttons can be added to the editor using:

Menu items

The Nonbreaking Space plugin provides the following menu items:

Menu item identifier Default Menu Location Description
nonbreaking Insert Inserts a nonbreaking space into the editor.

These menu items can be added to the editor using:

Commands

The Nonbreaking Space plugin provides the following JavaScript command.

Command Description
mceNonBreaking Inserts a non breaking space at the cursor location or overwrites the current selection.

Example

tinymce.activeEditor.execCommand('mceNonBreaking');

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.