Advanced source code editing

The Advanced Code Editor plugin (advcode) brings a more advanced code editor to TinyMCE. This code editor makes it easier to modify the HTML, and it’s a very useful add-on for power users. It comes with many features often found in IDEs, all enabled by default:

  • Syntax color highlighting

  • Bracket matching

  • Code folding

  • Multiple selections/carets

  • Search and Replace

The difference between the Code and Advanced Code Editor plugins

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

The Code Plugin

The Advanced Code Editor Plugin

 
<table>
  <thead>
      <tr>
          <th style="width: 50%"><h2>The Code Plugin</h2></th>
          <th style="width: 50%"><h2>The Advanced Code Editor Plugin</h2></th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td style="width: 50%">
            <textarea class="codedemo">
              <p>The Code (<code>code</code>) plugin provides a dialog for viewing and editing the HTML of the editor content.</p>
              <p>To open the Code dialog:</p>
              <ul>
                <li>On the menu bar, open <strong>View</strong> &gt; <strong>Source code</strong>.</li>
                <li>On the menu bar, open <strong>Tools</strong> &gt; <strong>Source code</strong>.</li>
                <li>Click the <strong>Source code</strong> toolbar button.</li>
              </ul>
            </textarea>
          </td>
          <td style="width: 50%">
            <textarea class="advcodedemo">
              <p>The Advanced Code Editor (<code>advcode</code>) plugin provides the same dialog as the code (<code>code</code>) plugin, but with the following additional features:</p>
              <ul>
                <li>Syntax highlighting</li>
                <li>Element matching and closing</li>
                <li>Code folding</li>
                <li>Multiple selections/carets</li>
                <li>Search and replace</li>
              </ul>
              <p>To open the Advanced Code Editor dialog:</p>
              <ul>
                <li>On the menu bar, open <strong>View</strong> &gt; <strong>Source code</strong>.</li>
                <li>On the menu bar, open <strong>Tools</strong> &gt; <strong>Source code</strong>.</li>
                <li>Click the <strong>Source code</strong> toolbar button.</li>
              </ul>
            </textarea>
          </td>
      </tr>
  </tbody>
</table>
tinymce.init({
  selector: 'textarea.advcodedemo',
  plugins: 'advcode',
  toolbar: 'code',

  height: 600,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});

tinymce.init({
  selector: 'textarea.codedemo',
  plugins: 'code',
  toolbar: 'code',

  height: 600,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});

Getting started with Advanced Code Editor

Creating an account

Try the Advanced Code Editor plugin and the Tiny Cloud with a free Tiny Account. New accounts receive a 30-day trial of the Tiny premium plugins, skins, and icon packs; with no credit card information or commitment required.

Get Advanced Code Editor

The Advanced Code Editor plugin is included in the following Tiny Cloud plans:

A 14-day free trial is also available for the Tiny Cloud Essential Plan and the Tiny Cloud Professional Plan.

Further information

For information on: