TinyMCE 5: Always add a class to blockquote element when inserting it (by clicking on the "blockquote" button on toolbar)

1.4k views Asked by At

When user clicks on "blockquote" button (that is on toolbar) to insert blockquote element:

enter image description here

then TinyMCE will insert <blockquote> HTML element without any class. I want to change this so that it always inserts <blockquote> with class myClass (but only when blockquote is inserted by clicking on "toolbar" button, not when loaded):

<blockquote class="myClass">
    ...
    </p>
</blockquote>

Do you know how this can be done/achieved?

I'm using TinyMCE 5.

Fiddle: http://fiddle.tinymce.com/Guhaab


UPDATE:

Sorry, my question wasn't precise enough: I want this class to be added just for elements added via the button, not when loaded.

1

There are 1 answers

3
Tiny Lincoln On BEST ANSWER

Updated Answer:

The querent added:

I want this class to be added just for elements added via the button, not when loaded.

In that case: Blockquotes are added to content by applying a predefined, default format called (you guessed it) "blockquote". You can override that default style to include a class when it is applied to content:

formats: {
    // Changes the default format for blockquote to have a class of 'foo'
    blockquote: { block: 'blockquote', classes: 'foo' }
  },

Here is a Tiny Fiddle demonstration:

http://fiddle.tinymce.com/svhaab/1

Here's information about formats in TinyMCE:

https://www.tiny.cloud/docs/configure/content-formatting/


Original Answer:

One option would be to use a node filter to add this class to all <blockquote> elements:

https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.serializer/#addnodefilter https://www.tiny.cloud/docs/api/tinymce.html/tinymce.html.domparser/#addnodefilter

Here is a Tiny Fiddle example: http://fiddle.tinymce.com/hvhaab/1 (ETA correct Fiddle link)

Note: As seen in the Fiddle, this approach will also add the class to <blockquote> elements that are loaded or pasted in to the editor as existing content - not just <blockquote> elements added via the button.

Also, if a <blockquote> element already has a (different) class, this will add your custom class to the attribute.