TinyMCE 5：带有不可编辑引用的自定义blockqote

问题描述

我正在使用TinyMCE5。默认情况下，当您单击“ blockquote” 按钮（位于工具栏上的）时，它将插入以下HTML：

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

或者，如果我选择一些文本，然后单击“ blockquote”按钮，它将被放置在其中：

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

我想对此进行更改，以便当您单击工具栏上的按钮时-它将始终在<cite class="mceNonEditable">Quote:</cite>内插入<blockquote>作为第一个元素。另外，如果可能的话，我想使这个“引用”元素不可编辑。

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

我已经检查了以下文章和文档，但找不到有关如何实现（实现）的任何信息：

TinyMCE中的Blockquote CSS和样式：https://www.tiny.cloud/blog/blockquote-css-and-styling-in-tinymce/
内容格式选项：https://www.tiny.cloud/docs/configure/content-formatting

我正在使用TinyMCE 5 。

提琴：http://fiddle.tinymce.com/Guhaab

更新（更多详细信息）：

Dallas Clark suggested在Blockquote之前使用::before伪元素。这是一个有趣的想法，但是存在这个问题：

像任何论坛一样，每个帖子都将带有“引用”按钮（链接）。当用户单击它时，后端（服务器端）代码将使用“ cite”准备以下HTML：

<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>

然后，用户将被重定向到用于创建新帖子的表单，该帖子将包含带有该HTML的TinyMCE。

如果我的网站已经应用了以下CSS：

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

...，那么即使存在“引用”元素，该“伪元素”也将始终出现。

这就是为什么我要求用户在TinyMCE工具栏上单击“ blockquote”按钮时添加不可编辑的“ cite”元素的原因。我已经问过仅在不存在“引用”元素CSS: Apply blockquote::before only if it blockquote doesn't have <cite> element (without jQuery/JavaScript)的情况下才应用这样的CSS（但是，如果不使用JS / jQuery，这是不可能的。）

解决方法

自定义HTML存在一些风险，如您的博客文章所述，您可以使用CSS在TinyMCE内容中的Blockquote之前添加::before伪元素。可以将相同的CSS添加到您的网站/应用程序（显示内容的地方）以复制相同的功能。

只需在blockquote函数的content_style中添加init样式：

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

这样，内容不可编辑，它将始终存在，并且升级TinyMCE时不会出现任何问题。

以下面的Fiddle为例。

tinymce tinymce-5 tinymce-plugins