我如何实施<pre> with tinymce</pre>

Question

很高兴看到很多关于tinymce的帖子，但这里没有什么可以帮助我解决当前的问题。

我想要做的是弄清楚如何使用tinymce为我的文本添加“代码”。

Something like this

有谁知道我怎么做到这一点。

帮助将不胜感激。

曼迪

Answer 1

您需要将pre添加到tinymce初始设置valid_elements

Answer 2

您需要在编辑器中添加代码示例插件。

这是包含TinyMCE网站上的插件的示例代码。

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "codesample",
  toolbar: "codesample"
});

codesample插件使用http://prismjs.com/将代码示例嵌入编辑器中并可以直接使用。也就是说，当用户将有效的代码语法复制到可编辑区域时，代码将根据Prism默认CSS规则自动设置格式。

  

您需要将 prism.js 和 prism.css 添加到页面中，语法突出显示才能起作用。

然后，您将在编辑器界面中获得代码示例按钮。

在这里您可以找到有关Documentation的信息。