How do I implement <pre> with tinymce

Glad to see a lot of posts about tinymce but there's nothing here that helps me with my current problem.

What I am trying to do is work out how to add "code" to my t开发者_运维知识库ext with tinymce.

Something like this

Does anyone know how I can do this.

Help would be appreciated.

Mandy

You will need to add pre to the tinymce init setting valid_elements

You need to add to the editor the Code Sample plugin to your editor.

This is the example code to include the plugin from the TinyMCE website.

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

The codesample plugin uses http://prismjs.com/ to embed the code samples within the editor and works out of the box. That is, when a user copies valid code syntax into the editable area the code will be automatically formatted according to Prism default CSS rules.

You need to add prism.js and prism.css to your page for syntax highlighting to work.

Then you will get the code sample button in your editor interface.

Here you can find the Documentation about.