增强代码编辑器

此插件仅适用于付费 TinyMCE 订阅。

Enhanced Code Editor 插件（advcode）在 TinyMCE 中提供了一个高级代码编辑器，使高级用户能够更高效地编辑 HTML。该编辑器包含默认启用的专业 IDE 功能：

• 针对 HTML、CSS 和 JavaScript 的语法颜色高亮

• 括号匹配和代码折叠

• 多个选区和光标以实现高效编辑

• 搜索和替换功能

• 代码显示的暗色或亮色模式切换

• 字体大小调整控件

• 全屏模式以实现无干扰编辑

全屏模式需要 Full screen 插件并且 Enhanced Code Editor 以 inline 模式运行。

Code 与 Enhanced Code Editor 插件的区别

HTML

<div style="display: flex; gap: 20px; width: 100%;">
  <div style="flex: 1; min-width: 0;">
    <h2>The Code Plugin</h2>
    <textarea class="codedemo" style="width: 100%;">
      <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>
  </div>
  <div style="flex: 1; min-width: 0;">
    <h2>The Enhanced Code Editor Plugin</h2>
    <textarea class="advcodedemo" style="width: 100%;">
      <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://www.tiny.cloud/docs/tinymce/latest/fullscreen">Full screen</a> plugin and requires the Enhanced Code Editor to be running in <a href="https://www.tiny.cloud/docs/tinymce/latest/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>
  </div>
</div>

JS

tinymce.init({
  selector: 'textarea.advcodedemo',
  plugins: [
    "advcode", "advlist", "anchor", "autolink", "charmap", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "code | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  height: 600,
  width: '100%',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

tinymce.init({
  selector: 'textarea.codedemo',
  plugins: [
    "code", "advlist", "anchor", "autolink", "charmap", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "code | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  height: 600,
  width: '100%',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Basic setup

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  plugins: 'advcode',
  toolbar: 'code'
});

有关使用模块打包器打包此插件的信息，请参阅Bundling TinyMCE - 概述。

Enable full-screen mode

要启用 Enhanced Code Editor 中的全屏模式按钮，请配置插件以 inline 模式运行并包含 fullscreen 插件：

tinymce.init({
  selector: "textarea",  // 根据您的 HTML 更改此值
  advcode_inline: true,
  plugins: [
    "fullscreen", "advcode",
  ],
  toolbar: "code"
});

代码编辑器中的选择行为

在富文本编辑器和代码编辑器视图之间切换时，选择状态行为会根据切换方向和是否进行更改而有所不同。

从富文本编辑器切换到代码编辑器

折叠选择（光标位置）：当光标位于富文本编辑器中的特定位置时，代码编辑器将打开，并且光标位于HTML源代码中的等效位置。

文本选择：当在富文本编辑器中选择文本时，该选择不会在代码编辑器中保留。相反，光标位于HTML源代码中所选内容的开头。

从代码编辑器返回到富文本编辑器

未进行更改：如果在代码编辑器中未进行任何更改，并且您点击Cancel或按下Esc，富文本编辑器中的原始选择状态或光标位置将被保留。

已进行更改：当在代码编辑器中进行了更改，并且您点击OK或Save时，选择状态或光标位置不会被保留。光标位于文档内容的开头。

在编辑器视图之间切换时，无法保证选择状态的保留。为了获得最可靠的编辑体验，请在一个视图中进行更改，然后再切换到另一个视图。

配置选项

Enhanced Code Editor插件提供了几个配置选项来自定义其行为：

advcode_inline

advcode_inline选项允许Enhanced Code Editor在TinyMCE现有的编辑器空间内打开，而不是在单独的对话框中显示。当与fullscreen插件结合使用时，这可以实现全屏模式功能。

类型：Boolean

默认值：false

可能的值：true、false

示例：启用内联模式

tinymce.init({
  selector: "textarea", // 根据需要更改此值以适应您的HTML
  plugins: ["fullscreen", "advcode"],
  toolbar: "code",
  advcode_inline: true,
});

此选项在TinyMCE 6.3中引入。启用后，Enhanced Code Editor将替换编辑器内容区域，而不是在模态对话框中打开。

advcode_prettify_getcontent

advcode_prettify_getcontent选项控制调用editor.getContent()时是否格式化HTML代码。启用后，这将使用与tinymce.activeEditor.getContent({ prettify: true })相同的格式自动格式化内容。

类型：Boolean

默认值：false

可能的值：true、false

示例：启用内容美化

tinymce.init({
  selector: "textarea", // 根据需要更改此值以适应您的HTML
  plugins: "advcode",
  toolbar: "code",
  advcode_prettify_getcontent: true,
});

如果数据库中现有的HTML内容格式不正确或缩进不一致，启用此选项可能会更改以前保存内容的格式，这在某些情况下可能不是所希望的。

advcode_prettify_editor

advcode_prettify_editor选项控制是否使用正确的缩进自动格式化Enhanced Code Editor中渲染的代码。这提高了代码的可读性，并在编辑器中保持一致的格式。

类型：Boolean

默认值：true

可能的值：true、false

示例：禁用编辑器美化

tinymce.init({
  selector: "textarea", // 根据需要更改此值以适应您的HTML
  plugins: "advcode",
  toolbar: "code",
  advcode_prettify_editor: false, // 禁用自动格式化
});

示例：启用编辑器美化（默认行为）

tinymce.init({
  selector: "textarea", // 根据需要更改此值以适应您的HTML
  plugins: "advcode",
  toolbar: "code",
  advcode_prettify_editor: true, // 默认值
});

编辑器加载时显示视图

可以使用view_show选项在编辑器加载时显示Enhanced Code Editor视图。

例如：

tinymce.init({
  selector: 'textarea',  // 根据需要更改此值以适应您的HTML
  plugins: 'advcode',
  toolbar: 'code',
  view_show: 'code',
});

Enhanced Code Editor的搜索和替换键盘快捷键

Enhanced Code Editor在代码对话框中提供了以下快捷键。

操作	Windows快捷键	macOS快捷键
查找	Ctrl+F	Command+F
查找下一个	F3	F3
查找上一个	Shift+F3	Shift+F3
转到行	Ctrl+G	Command+G
关闭搜索面板	Esc	Esc
缩进代码	Ctrl+]	Command+]
取消缩进代码	Ctrl+[	Command+[
折叠代码	Ctrl-Shift-[	Command-Option-[
展开代码	Ctrl-Shift-]	Command-Option-]
全部折叠	Ctrl-Alt-[	Ctrl-Option-[
全部展开	Ctrl-Alt-]	Ctrl-Option-]
接受自动补全	Enter / Tab	Enter / Tab
选择下一个匹配项	Ctrl+D / Ctrl+B	Command+D / Command+B
选择所选内容的所有匹配项	Ctrl+Shift+L	Command+Shift+L
跳转到指定行（备选）	Ctrl+Alt+G	Command+Option+G
启动自动补全	Ctrl+Space	Control+Space
切换注释	Ctrl+/	Command+/
向上或向下移动行	Alt+Up / Alt+Down	Option+Up / Option+Down
向上或向下复制行	Shift+Alt+Up / Shift+Alt+Down	Shift+Option+Up / Shift+Option+Down
删除行	Ctrl+Shift+K	Command+Shift+K

在代码对话框中，某些快捷键与编辑器主体中的相同按键组合有所不同。Ctrl+B（或 Command+B）用于选择所选内容的下一个匹配项，而不是应用加粗，而 Ctrl+F（或 Command+F）则打开代码对话框搜索面板，而非 searchreplace 对话框。这些快捷键仅在代码对话框获得焦点时生效。

工具栏按钮

Enhanced Code Editor 插件提供了以下工具栏按钮：

工具栏按钮标识符	描述
code	打开代码对话框。

这些工具栏按钮可以通过以下方式添加到编辑器：

• toolbar 配置选项。

• quickbars_insert_toolbar 配置选项。

• 自定义上下文工具栏。

菜单项

Enhanced Code Editor 插件提供了以下菜单项：

菜单项标识符	默认菜单位置	描述
code	视图	打开代码对话框。

这些菜单项可以通过以下方式添加到编辑器：

• menu 配置选项。

• contextmenu 配置选项。

• 自定义菜单工具栏按钮。

命令

Enhanced Code Editor 插件提供了以下 TinyMCE 命令。

命令	描述
mceCodeEditor	打开代码编辑器对话框。

示例

tinymce.activeEditor.execCommand('mceCodeEditor');