代码示例

Code Sample 插件 (codesample) 让用户可以在可编辑区域插入并嵌入带有语法颜色高亮的代码片段。它还会向工具栏添加一个按钮，点击该按钮将打开一个对话框以接收原始代码输入。

基本设置

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

有关使用模块打包工具捆绑此插件的信息，请参阅 Bundling TinyMCE - Overview。

默认情况下，codesample 使用 http://prismjs.com/ 在编辑器内嵌入代码样本，并且开箱即用。也就是说，当用户将有效的代码语法复制到可编辑区域时，代码将根据 Prism 默认 CSS 规则自动格式化。

需要将 Prism.js 和 prism.css 添加到页面中，语法高亮才能生效。请参阅下方说明以了解如何操作。

在网页上使用 Prism.js

您需要将 prism.js 和 prism.css 添加到页面中，以便在网页上获得语法高亮的代码样本（由 Code Sample 插件创建）。Code Sample 插件使用以下语言：markup、javascript、css、php、ruby、python、java、c、csharp 和 cpp。您可以在 Prism 网站的 下载 页面生成 prism.js 和 prism.css 文件。

使用 Prism.js 脚本的示例

<link rel="stylesheet" type="text/css" href="prism.css">
<script src="prism.js"></script>
<pre class="language-markup"><code>...</code></pre>

交互式示例

HTML

<textarea id="codesample">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>
  <h2 style="text-align: center;">TinyMCE Code Sample Plugin</h2>
  <p style="text-align: center;">Code Sample 会自动对 PRE 和 CODE 元素应用颜色高亮。高亮一些文本，点击 Code Sample 按钮以查看文本上应用的 `code`。</p>
  <h3 style="text-align: center;">如何插入片段</h3>
  <p style="text-align: center;">要创建片段，请将光标放在新的/空行上，然后点击工具栏中的 Code Sample 按钮。在模态框中添加代码片段，选择语言并点击“确定”将片段添加到页面。</p>
  <p style="text-align: center">注意：此演示包括 Code 插件，该插件启用 code view。您可以使用它查看 Code Sample 如何更改可编辑区域中的 HTML。</p>
</textarea>

JS

tinymce.init({
  selector: 'textarea#codesample',
  height: 500,
  plugins: 'codesample code',
  codesample_languages: [
    { text: 'HTML/XML', value: 'markup' },
    { text: 'JavaScript', value: 'javascript' },
    { text: 'CSS', value: 'css' },
    { text: 'PHP', value: 'php' },
    { text: 'Ruby', value: 'ruby' },
    { text: 'Python', value: 'python' },
    { text: 'Java', value: 'java' },
    { text: 'C', value: 'c' },
    { text: 'C#', value: 'csharp' },
    { text: 'C++', value: 'cpp' }
  ],
  toolbar: 'codesample code',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

选项

codesample_global_prismjs

此配置选项允许在高亮代码样本块时使用全局 Prism.js 版本，而不是使用 codesample 插件中捆绑的 Prism.js 版本。这样可以使用自定义版本的 Prism.js，包括其他语言。

使用此选项时，请确保在站点上加载 Prism.js 和任何语言插件，以及 TinyMCE 脚本：

<script src="prism.js" data-manual></script>
<script src="tinymce.js"></script>

类型： Boolean

默认值： false

可能的值： true、false

示例：使用 codesample_global_prismjs

tinymce.init({
  selector: 'textarea',
  plugins: 'codesample',
  toolbar: 'codesample',
  codesample_global_prismjs: true
});

codesample_languages

此配置选项允许您设置要在语言下拉列表中显示的语言列表。

示例：使用 codesample_languages

tinymce.init({
  selector: 'textarea',
  plugins: 'codesample',
  codesample_languages: [
    { text: 'HTML/XML', value: 'markup' },
    { text: 'JavaScript', value: 'javascript' },
    { text: 'CSS', value: 'css' },
    { text: 'PHP', value: 'php' },
    { text: 'Ruby', value: 'ruby' },
    { text: 'Python', value: 'python' },
    { text: 'Java', value: 'java' },
    { text: 'C', value: 'c' },
    { text: 'C#', value: 'csharp' },
    { text: 'C++', value: 'cpp' }
  ],
  toolbar: 'codesample'
});

工具栏按钮

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

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

• toolbar 配置选项。

• quickbars_insert_toolbar 配置选项。

• 自定义上下文工具栏。

菜单项

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

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

• menu 配置选项。

• contextmenu 配置选项。

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

命令

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

tinymce.activeEditor.execCommand('CodeSample');