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

我用的是TinyMCE 5。默认情况下，当您单击工具栏上的blockquote按钮时，它将插入以下HTML：

或者，如果我选择一些文本，然后单击blockquote按钮，它会将其放入：

选定文本

我想更改它，这样当您单击工具栏上的按钮时，它将始终插入Quote:inside作为第一个元素。另外，如果可能的话，我想使这个cite元素不可编辑

引述：

我查看了以下文章和文档，但找不到有关如何实现此目标的任何信息：

TinyMCE中的Blockquote CSS和样式： 内容格式选项： 我用的是TinyMCE 5

小提琴：

更新更多详细信息：

在块引号之前使用：：before伪元素。这是一个有趣的想法，但有一个问题：

像任何论坛一样，每个帖子都会有引用按钮链接。当用户单击它时，后端服务器端代码将使用cite准备以下HTML： 原作者： 乱数假文。。。

然后，用户将被重定向到表单以创建一个新的帖子，该帖子将与该HTML保持一致

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

blockquote：：之前{ 内容：报价：； 颜色：ff9c00； 字体大小：粗体； } 。。。然后，该伪元素将始终出现，即使已经存在cite元素

这就是为什么我要求添加不可编辑的引用元素，若用户只需单击TinyMCE工具栏上的blockquote按钮。

---

我已经问过，只有在没有引用元素的情况下才可以应用这样的CSS：但如果不使用JS/jQuery，这是不可能的。

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

只需在init函数的content_样式中添加一个blockquote样式：

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

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

---

查看以下示例。

您好，我喜欢这个想法，但有一个问题：我更新了我的问题，并提到了您的答案。这似乎是论坛现有数据的问题？是的，从后端加载的现有blockquote将包含引用的原始帖子作者的详细信息以及指向该原始帖子的链接。另一方面，用户只需单击TinyMCE工具栏上的blockquote按钮，就可以插入不引用文章的blockquote，这样这些blockquotes就不会引用详细信息，只需引用：。您的解决方案with:：before可用于本例中，我创建了一个具有此类CSS的类，现在我只需要解决以下问题：