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.