TinyMCE 5: Custom blockqote with (noneditable) cite

Question

I'm using TinyMCE 5. By default, when you click on "blockquote" button (that is on toolbar) - it will insert the following HTML:

<blockquote>
    <p>
        <br data-mce-bogus="1">
    </p>
</blockquote>

Or, if I select some text and then click on "blockquote" button, it will put it inside:

<blockquote>
    <p>
        selected text
        <br data-mce-bogus="1">
    </p>
</blockquote>

I want to change this so that when you click on the button that is on toolbar - it will always insert <cite class="mceNonEditable">Quote:</cite> inside <blockquote> as the first element. Also, if possible, I would like to make this "cite" element non-editable.

<blockquote>
    <cite class="mceNonEditable">Quote:</cite>
    <p>
        <br data-mce-bogus="1">
    </p>
</blockquote>

I've checked the following article and documentation, but couldn't find anything on how to achieve (implement) this:

• Blockquote CSS and styling in TinyMCE: https://www.tiny.cloud/blog/blockquote-css-and-styling-in-tinymce/
• Content formatting options: https://www.tiny.cloud/docs/configure/content-formatting

I'm using TinyMCE 5.

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

---

UPDATE (more details):

Dallas Clark suggested using ::before pseudo element before a Blockquote. It's interesting idea but there's this problem:

• Like any forum, each post will have "quote" button (link). When user clicks on it, backend (server-side) code will prepare the following HTML with "cite":

<blockquote>
    <cite class="mceNonEditable">
        Originally posted by <a href="user_profile_page">John Doe</a>:
        <a class="pull-right" href="link_to_the_post"><i class="fa fa-link"></i></a>
    </cite>
    <p>
        Lorem ipsum...
    </p>
</blockquote>

Then user will be redirected to the form for creating a new post, which will have TinyMCE with that HTML.

If my site already applies the following CSS:

        blockquote::before {
            content: "Quote:";
            color: #ff9c00;
            font-weight: bold;
        }

... then that "pseudo element" will always appear, even when there's already "cite" element there.

That's why I was asking for adding non-editable "cite" element if user just clicks on "blockquote" button on TinyMCE toolbar. I already asked about applying such CSS only if there's no "cite" element: CSS: Apply blockquote::before only if it blockquote doesn't have <cite> element (without jQuery/JavaScript) (but it's not possible without using JS/jQuery).

Answer 1

Customising the HTML has some risks, as indicated by your blog post, you can add a ::before pseudo element before a Blockquote within your TinyMCE content using CSS. The same CSS can be added to your website/application (where the content is displayed) to replicate the same functionality.

Simply add a blockquote style within content_style in your init function:

    ...
    content_style: `
        blockquote::before {
            color: #ff9c00;
            content: "Quote:";
            font-size: 0.6rem;
            font-weight: bold;
        }
    `
    ...

This way, the content is not editable, it will always exist and you shouldn't have any issues when upgrading TinyMCE.

Check out the following Fiddle as an example.