tinymce-docs/modules/ROOT/examples/live-demos/advcode/index.html at 6a55c2e02b9a886b7c7a233f40e2d3c158bda3f0 · tinymce/tinymce-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<table>
  <thead>
    <tr>
      <th style="width: 50%;"><h2>The Code Plugin</h2></th>
      <th style="width: 50%;"><h2>The Enhanced 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 Enhanced 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>
            <li>Dark or light mode for code display.</li>
            <li>Increase and decrease display font size.</li>
            <li>Full-screen mode.</li>
          </ul>
          <p>For the Enhanced Code Editor to offer a full-screen mode requires the <a href="https://tiny.cloud/docs/tinymce/7/fullscreen">Full screen</a> plugin and requires the Enhanced Code Editor to be running in <a href="https://tiny.cloud/docs/tinymce/7/advcode/#advcode_inline">inline mode</a>.</p>
          <p>To open the Enhanced 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>