中文文档

此页更新时间：2019-03-25 20:34

此页英文文档：https://www.tiny.cloud/docs/plugins/codesample/

此插件适合程序员编写技术类文章时，展示高亮源码。

默认codesample自动使用prism.js将代码示例嵌入编辑器中。也就是说，当用户将有效代码复制编辑区域时，将根据Prism.js默认的CSS规则自动格式化。

在非编辑器环境展示代码示例，需要自行在当前页面引入prism.js和prism.css两个文件，这两个文件可到prism官网下载，官网还很贴心地提供了配色方案DIY功能。

tinymce.init({
    selector: '#tinydemo',
    plugins: "codesample",
    toolbar: "codesample",
});

<pre class="language-javascript" contenteditable="false" data-mce-selected="1">tinymce<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selector<span class="token punctuation">:</span> <span class="token string">'#tinydemo'</span><span class="token punctuation">,</span> plugins<span class="token punctuation">:</span> <span class="token string">"codesample"</span><span class="token punctuation">,</span> toolbar<span class="token punctuation">:</span> <span class="token string">"codesample"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre>

额外选项

codesample_languages

设置编程语言下拉列表中项目。

codesample_content_css

指定在将代码示例插入编辑器内容区时，加载自定义的css文件。

例：

tinymce.init({
    selector: '#tinydemo',
    plugins: "codesample",
    toolbar: "codesample",
    codesample_languages: [
        {text: 'HTML/XML', value: 'markup'},
        {text: 'JavaScript', value: 'javascript'},
        {text: 'CSS', value: 'css'},
        {text: 'PHP', value: 'php'},
    ],
    codesample_content_css: '/static/prism.css',
});

下一节：directionality 文字方向