CODEWITHSUNDEEP
tinymce
freefaller
freefaller

Reputation: 19953

TinyMCE adding code/pre to toolbar/shortcuts

Using TinyMCE, is it possible to add toolbar buttons or shortcuts for <code> and <pre> formatting (so that they work in the same way as <b>, <i> etc)?

Having to go through 4 clicks to get to code (Format -> Formats -> Inline -> Code) and another 4 clicks to get to pre (Format -> Formats -> Blocks -> Pre) is a massive pain.

Adding the keyword code to the list of toolbar buttons or even to the Format menu results in the source code button.

Upvotes: 2

Views: 636

Answers (1)

Ignacio Ara
Ignacio Ara

Reputation: 2582

On the TinyMCE initialization:

tinymce.init({
  selector: 'textarea',
  height: 500,
  toolbar: 'codeSC',
  [...]

  setup: function (editor) {
    editor.addButton('codeSC', {
      text: '<code>',
      icon: false,
      onclick: function () {
        editor.insertContent('<code>Text inside code</code>');
      }
    });
  }
});

codeSC = codeShortCut

Upvotes: 2

Related Questions