Permanent Pen plugin

Interactive example

This example shows how to use Permanent Pen to apply a pre-defined format (color, typeface and type style, or font) to a desired section of content overriding the default values set for that content area. For more information on the Permanent Pen plugin, see the docs.

  • 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="" 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>

    <li>Our <a href="">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="" 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="">TinyMCE premium plans</a>.</li>

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

  <table style="border-collapse: collapse; width: 100%;" border="1">

  <h2>Found a bug?</h2>

    If you think you have found a bug please create an issue on the <a href="">GitHub repo</a> to report it to the developers.

  <h2>Finally ...</h2>

    Don't forget to check out our other product <a href="" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  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 | formats blockformats fontformats ' +
        'fontsizes 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:14px }'