Permanent Pen Plugin

This plugin is only available for paid TinyMCE subscriptions.

The Permanent Pen allows a user to apply a pre-defined format (for example, color, typeface and type style, font, etc.) to a new content, overriding the default values set for that content area.

The Permanent Pen is useful when a distinct style text needs to be repeatedly added to the content. The user can pre-define the desired style in the Permanent Pen properties. This pre-defined style is applied to all the text entered into the document while the Permanent Pen is enabled. The ability to store information for reuse saves the user time and ensures consistency across the content.

The Permanent Pen can also be used to create user notes and other useful comments in a different format for easy identification. This allows the user to add text without modifying the original content.

The default properties of Permanent Pen are:

fontname: 'arial,helvetica,sans-serif',
forecolor: '#E74C3C',
fontsize: '12pt',
hilitecolor: '',
bold: true,
italic: false,
underline: false,
strikethrough: false

For more information on TinyMCE formats, refer to the formats section.

Try our Permanent Pen demo

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="permanent-pen">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>

   <h2>Got questions or need help?</h2>

  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/tinymce/6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

  <h2>A simple table to play with</h2>

  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>

  <p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

  <h2>Finally ...</h2>

  <p>
    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>
tinymce.init({
  selector: 'textarea#permanent-pen',
  plugins: 'permanentpen code',
  contextmenu: 'configurepermanentpen',
  toolbar: 'permanentpen code',
  menubar: 'file edit view format table tools help',
  menu: {
    format: {
      title: 'Format',
      items: 'configurepermanentpen | bold italic underline strikethrough ' +
        'superscript subscript codeformat | styles blocks fontfamily ' +
        'fontsize align | forecolor backcolor | removeformat'
    }
  },
  permanentpen_properties: {
    fontname: 'arial,helvetica,sans-serif',
    forecolor: '#E74C3C',
    fontsize: '12pt',
    hilitecolor: '',
    bold: true,
    italic: false,
    strikethrough: false,
    underline: false
  },
  height: 500,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Using a Permanent Pen

To enable Permanent Pen

  1. Click on the Permanent Pen(Permanent Pen) toolbar button to enable the Permanent Pen.

  2. Place the cursor in the desired text area and start typing.

Result: The Permanent Pen toolbar button background color changes to grey Permanent Pen and the text is entered using the default settings.

To disable Permanent Pen

To exit the Permanent Pen, click on the Permanent Pen(Permanent Pen) icon.

The Permanent Pen toolbar button background color changes to white Permanent Pen.

Accessing the Permanent Pen properties

There are two ways to access the Permanent Pen properties:

From the menubar

Add the Permanent pen properties option to the menu bar with the menu configuration.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'permanentpen',
  toolbar: 'permanentpen',
  menu: {
    format: { title: 'Format', items: 'configurepermanentpen' }
  }
});

Inline

  1. Place the cursor on the text entered using a Permanent Pen.

  2. Right-click anywhere from inside the text area.

  3. Choose the Permanent pen properties…​ option. Right-click

Result: The Permanent Pen Properties dialog box appears.

The Permanent Pen has to be enabled to access the Permanent Pen Properties dialog box by right-clicking the text. On the other hand, the menubar option can be accessed without enabling the Permanent Pen.

Changing Permanent Pen properties

Using the UI

  1. Open the Permanent Pen Properties dialog box using any of the above methods. Permanent pen properties

  2. Select the desired settings from the Font and Size drop-down menus.

  3. To select the desired Styles, click on the checkbox next to Bold, Italic, Strikethrough, or Underline.

  4. Choose the desired Text color.

  5. Select the desired Background color

  6. Press Ok to save or Cancel to dismiss.

Result: When the Permanent Pen is enabled, it will apply the new settings to the entered text.

Basic setup

The following example shows how to add the Permanent Pen toolbar button:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'permanentpen',
  contextmenu: 'configurepermanentpen',
  toolbar: 'permanentpen'
});

Options

permanentpen_properties

The default formats for Permanent Pen can be specified in the following configuration.

Type: Object

Default value:

{
  fontname: 'arial,helvetica,sans-serif',
  forecolor: '#E74C3C',
  fontsize: '12pt',
  hilitecolor: '',
  bold: true,
  italic: false,
  underline: false,
  strikethrough: false
}

Example: using permanentpen_properties

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'permanentpen',
  contextmenu: 'configurepermanentpen',
  toolbar: 'permanentpen',
  permanentpen_properties: {
    fontname: 'arial,helvetica,sans-serif',
    forecolor: '#E74C3C',
    fontsize: '12pt',
    hilitecolor: '',
    bold: true,
    italic: false,
    strikethrough: false,
    underline: false
  }
});

For more information on TinyMCE formats, refer to the formats section.

Toolbar buttons

The Permanent Pen plugin provides the following toolbar buttons:

Toolbar button identifier Description

permanentpen

Enables and disables Permanent Pen formatting.

These toolbar buttons can be added to the editor using:

The Permanent Pen plugin provides the following menu items:

Menu item identifier Default Menu Location Description

configurepermanentpen

Not Applicable

Opens the Permanent Pen properties dialog.

permanentpen

Not Applicable

Enables and disables Permanent Pen formatting.

These menu items can be added to the editor using:

Commands

The Permanent Pen plugin provides the following TinyMCE commands.

Command Description

mceConfigurePermanentPen

Opens the Permanent Pen dialog.

mceTogglePermanentPen

Toggles Permanent Pen.
Examples
tinymce.activeEditor.execCommand('mceConfigurePermanentPen');
tinymce.activeEditor.execCommand('mceTogglePermanentPen');