如何使用TinyMCE和Prism.js添加代码段

本文概述

• 如何添加摘录
• 定制棱镜风格
• 更改代码输入尺寸
• 自定义语言列表

代码段是可重用代码的小块, 对于开发人员来说, 很常见的是复制和粘贴他们已经编写的代码, 公司代码库中的代码, 开放源代码以及堆栈溢出时的答案。如果你拥有一个与其他开发人员共享知识的博客, 则可能已经测试了许多所见即所得的编辑器, 它们提供了轻松编辑文章的方式, 它们可以完成其基本任务, 但是不能与代码片段很好地配合使用。用标记编写的人没有的问题, 但是对于那些使用HTML的人呢？幸运的是, 有人听了我们的祈祷, TinyMCE决定在Prism.js的帮助下为代码段提供支持。 Prism是一种轻量级的, 可扩展的语法突出显示工具, 其构建考虑了现代Web标准。它已在数千个网站中使用, 包括你每天访问的一些网站。

谈话很便宜。给我看代码。 -Linux创始人Linus Torvalds

如何添加摘录

要将代码段添加到你的内容中, 可以使用codesample插件(通常包含在社区版本中)。要启用此插件, 你只需要在初始化对象的plugins属性中提供插件” codesample”的名称, 并在工具栏中添加用相同名称” codesample”标识的操作按钮：

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

在工具栏中添加了codesample插件和操作按钮后, tinymce应该显示新按钮：

注意

此插件可从TinyMCE的4.3版本开始使用。因此, 它处于”测试阶段”, 存在多个错误和修改, 但是大多数错误和修改很快就得到解决, 例如, 你不能加载超过10种语言来突出显示。

如你所知, Prism.js鼓励良好的作者做法。其他突出显示符号鼓励甚至强迫你使用语义上错误的元素, 例如<pre>(单独)或<script>。 Prism会强制你使用正确的元素来标记代码：<code>。单独用于内联代码, 或在<pre>内部用于代码块。另外, 通过HTML5草案中推荐的方式定义语言：通过language-xxxx类。使用TinyMCE, 可以通过代码输入对话框中显示的选择元素来设置该语言。你可以通过设置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'
});

现在, 如果单击TinyMCE中的codesample按钮, 则应该看到代码输入对话框：

生成的HTML的所有不安全字符(例如内部的HTML片段)将自动转义为其html符号, 因此TinyMCE生成的带有html片段的HTML应该如下所示：

<p>Span tag in HTML:</p>
<pre class="language-html"><code>&lt;span&gt;Hello World&lt;/span&gt;</code></pre>
<p>Hello World !</p>

和用户界面：

定制棱镜风格

默认情况下, TinyMCE使用插件默认包含的默认棱镜主题。通过在初始化时使用Prism.css的自定义CSS文件的路径自定义codesample_content_css选项, 你可以使用自己的主题, 例如Our Code World片段突出显示(Okaidia)：

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', // Custom CSS file
    codesample_content_css: "http://ourcodeworld.com/material/css/prism.css", });

结果是：

更改代码输入尺寸

你可以通过更改codesample_dialog_width和codesample_dialog_height来更改输入代码的对话框的尺寸：

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', // Custom dimensions
    codesample_dialog_height: 400, codesample_dialog_width: 600
});

自定义语言列表

因此, 你不必查看Prism支持的语言列表, 然后自己创建带有语言标识符和名称的对象, 我们为你提供Prism.js支持的所有语言列表, 可在TinyMCE的codesample_languages属性中使用：

tinymce.init({
    selector: 'textarea', plugins: 'codesample', toolbar: 'codesample', codesample_languages: [
        {text:'HTML/XML', value:'markup'}, {text:"XML", value:"xml"}, {text:"HTML", value:"html"}, {text:"mathml", value:"mathml"}, {text:"SVG", value:"svg"}, {text:"CSS", value:"css"}, {text:"Clike", value:"clike"}, {text:"Javascript", value:"javascript"}, {text:"ActionScript", value:"actionscript"}, {text:"apacheconf", value:"apacheconf"}, {text:"apl", value:"apl"}, {text:"applescript", value:"applescript"}, {text:"asciidoc", value:"asciidoc"}, {text:"aspnet", value:"aspnet"}, {text:"autoit", value:"autoit"}, {text:"autohotkey", value:"autohotkey"}, {text:"bash", value:"bash"}, {text:"basic", value:"basic"}, {text:"batch", value:"batch"}, {text:"c", value:"c"}, {text:"brainfuck", value:"brainfuck"}, {text:"bro", value:"bro"}, {text:"bison", value:"bison"}, {text:"C#", value:"csharp"}, {text:"C++", value:"cpp"}, {text:"CoffeeScript", value:"coffeescript"}, {text:"ruby", value:"ruby"}, {text:"d", value:"d"}, {text:"dart", value:"dart"}, {text:"diff", value:"diff"}, {text:"docker", value:"docker"}, {text:"eiffel", value:"eiffel"}, {text:"elixir", value:"elixir"}, {text:"erlang", value:"erlang"}, {text:"fsharp", value:"fsharp"}, {text:"fortran", value:"fortran"}, {text:"git", value:"git"}, {text:"glsl", value:"glsl"}, {text:"go", value:"go"}, {text:"groovy", value:"groovy"}, {text:"haml", value:"haml"}, {text:"handlebars", value:"handlebars"}, {text:"haskell", value:"haskell"}, {text:"haxe", value:"haxe"}, {text:"http", value:"http"}, {text:"icon", value:"icon"}, {text:"inform7", value:"inform7"}, {text:"ini", value:"ini"}, {text:"j", value:"j"}, {text:"jade", value:"jade"}, {text:"java", value:"java"}, {text:"JSON", value:"json"}, {text:"jsonp", value:"jsonp"}, {text:"julia", value:"julia"}, {text:"keyman", value:"keyman"}, {text:"kotlin", value:"kotlin"}, {text:"latex", value:"latex"}, {text:"less", value:"less"}, {text:"lolcode", value:"lolcode"}, {text:"lua", value:"lua"}, {text:"makefile", value:"makefile"}, {text:"markdown", value:"markdown"}, {text:"matlab", value:"matlab"}, {text:"mel", value:"mel"}, {text:"mizar", value:"mizar"}, {text:"monkey", value:"monkey"}, {text:"nasm", value:"nasm"}, {text:"nginx", value:"nginx"}, {text:"nim", value:"nim"}, {text:"nix", value:"nix"}, {text:"nsis", value:"nsis"}, {text:"objectivec", value:"objectivec"}, {text:"ocaml", value:"ocaml"}, {text:"oz", value:"oz"}, {text:"parigp", value:"parigp"}, {text:"parser", value:"parser"}, {text:"pascal", value:"pascal"}, {text:"perl", value:"perl"}, {text:"PHP", value:"php"}, {text:"processing", value:"processing"}, {text:"prolog", value:"prolog"}, {text:"protobuf", value:"protobuf"}, {text:"puppet", value:"puppet"}, {text:"pure", value:"pure"}, {text:"python", value:"python"}, {text:"q", value:"q"}, {text:"qore", value:"qore"}, {text:"r", value:"r"}, {text:"jsx", value:"jsx"}, {text:"rest", value:"rest"}, {text:"rip", value:"rip"}, {text:"roboconf", value:"roboconf"}, {text:"crystal", value:"crystal"}, {text:"rust", value:"rust"}, {text:"sas", value:"sas"}, {text:"sass", value:"sass"}, {text:"scss", value:"scss"}, {text:"scala", value:"scala"}, {text:"scheme", value:"scheme"}, {text:"smalltalk", value:"smalltalk"}, {text:"smarty", value:"smarty"}, {text:"SQL", value:"sql"}, {text:"stylus", value:"stylus"}, {text:"swift", value:"swift"}, {text:"tcl", value:"tcl"}, {text:"textile", value:"textile"}, {text:"twig", value:"twig"}, {text:"TypeScript", value:"typescript"}, {text:"verilog", value:"verilog"}, {text:"vhdl", value:"vhdl"}, {text:"wiki", value:"wiki"}, {text:"YAML", value:"yaml"}
    ]
});

编码愉快！