CODEWITHSUNDEEP
javascriptjquerytinymcetinymce-4rte
Tariq Husain
Tariq Husain

Reputation: 566

How to add custom block in tinyMce

I wanted to add custom formatting block for TinyMCE, I Was able to do it with below code. 

style_formats: [
{title : 'Code', block : 'pre', classes : 'pre-code', exact: true},]

https://codepen.io/anon/pen/vWRGEg enter image description here

However, by adding this code, the only Code block is visible in format drop-down. There were some default Option e.g

  1. Headings
  2. Inline
  3. Block
  4. Alignment

https://codepen.io/anon/pen/jazqEv

Is it possible to add custom code block under the Block - > pre section?

enter image description here

Upvotes: 1

Views: 5243

Answers (2)

Micio
Micio

Reputation: 21

try this jsfiddle

style_formats: [
    { title: 'Headers', items: [
      { title: 'test', block: 'h1' },
      { title: 'h2', block: 'h2' },
      { title: 'h3', block: 'h3' },
      { title: 'h4', block: 'h4' },
      { title: 'h5', block: 'h5' },
      { title: 'h6', block: 'h6' }
    ] },

    { title: 'Blocks', items: [
      { title: 'p', block: 'p' },
      { title: 'div', block: 'div' },
      { title: 'pre', block: 'pre' }
    ] },

    { title: 'Containers', items: [
      { title: 'section', block: 'section', wrapper: true, merge_siblings: false },
      { title: 'article', block: 'article', wrapper: true, merge_siblings: false },
      { title: 'blockquote', block: 'blockquote', wrapper: true },
      { title: 'hgroup', block: 'hgroup', wrapper: true },
      { title: 'aside', block: 'aside', wrapper: true },
      { title: 'figure', block: 'figure', wrapper: true }
    ] }
  ],
  visualblocks_default_state: true,
  end_container_on_empty_block: true

Upvotes: 2

charlietfl
charlietfl

Reputation: 171689

In order to merge with existing use style_formats_merge: true per docs

Upvotes: 1

Related Questions