0

我正在使用 TinyMCE 5。默认情况下，当您单击“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 5。

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

更新（更多细节）：

Dallas Clark 建议在 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”按钮。我已经问过只有在没有“引用”元素时才应用这样的 CSS：CSS: Apply blockquote::before only if it blockquote 没有 <cite> 元素（没有 jQuery/JavaScript）（但如果不使用 JS/这是不可能的） jQuery）。

4

1 回答 1

1

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

只需在函数中添加blockquote样式：content_styleinit

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

这样，内容是不可编辑的，它会一直存在，升级 TinyMCE 时应该不会有任何问题。

以下面的Fiddle为例。

于 2020-10-08T05:52:47.967 回答