tinymce插入编辑代码的插件叫codesimple,tinymce默认的codesimple支持插入编辑代码的语言如下

在实际使用过程中,我常用的还会有bash或sql等语言,那么今天来看看怎么让codesimple插件支持bash和sql。
在tinymce的初始化配置中,有codesample_languages这个选项,支持的语言在这里配置,我们只需要更改这里的配置即可。
先来看看codesimple_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'
});
刚好和咱们最开始的截图对上号,那么要新增加的语言的text和value要怎么填写呢。
tinymce的官网看了一圈,没找到。
再想想办法,又想到了tinymce代码高亮使用的prismjs,那么去prismjs的官网看看吧。
prismjs的使用方法在前面的文章中有介绍,prismjs的官网地址:https://prismjs.com/
在首页的Supported languages中我们就能找到语言对应的text和value。
比如我们今天要添加的bash的text是Bash,value可以是bash,sh,shell中的一个,为了更美观一点,text的值我们更改为Bash/Shell。
再找一下sql,sql的text是SQL,value是sql。
好了,我们把这两种语言添加到codesimple_languages的配置项里面去。
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' },
{ text: 'Bash/Shell', value: 'bash' },
{ text: 'SQL', value: 'sql' }
]
大功告成,看看效果吧。

1、添加普通文本(纯文本)
1.1、没有普通文本的原因
在Prism官方上找了一圈,没找到一个叫普通文本的语言。原因是
- Prism 官网的“Supported languages”只列有语法高亮的正式语言(js、css、python等)。
- plaintext/text/txt/plain 是核心内置无高亮兜底规则,专门用于“纯文本”,不列入正式语言清单。
- 源码里直接绑定:
plain: plainTextGrammar,
plaintext: plainTextGrammar,
text: plainTextGrammar,
txt: plainTextGrammar
1.2、官方认可的纯文本写法(都能用)
<!-- 都生效,无高亮 -->
<code class="language-plaintext">...</code>
<code class="language-text">...</code>
<code class="language-txt">...</code>
<code class="language-plain">...</code>
<!-- 官方还推荐用 none,更标准 -->
<code class="language-none">...</code>
language-none:官方文档明确推荐的禁用高亮标准写法Prism。plaintext/text/txt:社区广泛使用的别名,效果和none完全一样Prism。
1.3、总结
- 列表里没有:因为它不是正式高亮语言,是内置兜底规则Prism。
- 实际可用:
plaintext/text/txt/plain/none都能实现纯文本无高亮Prism。 - 最规范写法:
language-nonePrism。