代码

此插件添加了一个工具栏按钮，允许用户编辑被 WYSIWYG 视图隐藏的 HTML 代码。它还在 Tools 菜单下添加了 Source code 菜单项。

基本设置

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

有关如何使用模块打包器（module bundlers）捆绑此插件的信息，请参阅 Bundling TinyMCE - Overview（捆绑 TinyMCE - 概述）。

代码编辑器中的选区行为

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

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

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

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

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

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

已做更改：如果在代码编辑器中做了更改，并且您点击 OK 或 Save，选区状态或光标位置将不被保留。光标会定位到文档内容的开头。

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

工具栏按钮

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

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

• toolbar 配置选项。

• quickbars_insert_toolbar 配置选项。

• 自定义上下文工具栏（Custom Context toolbars）。

菜单项

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

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

• menu 配置选项。

• contextmenu 配置选项。

• 自定义菜单工具栏按钮（Custom Menu toolbar buttons）。

命令（Commands）

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

tinymce.activeEditor.execCommand('mceCodeEditor');