TinyMCE - 样式：插入日期时间插件 - 字体/大小答案

【问题标题】：TinyMCE - style: insert date time plugin - font / sizeTinyMCE - 样式：插入日期时间插件 - 字体/大小
【发布时间】：2022-01-20 00:02:51
【问题描述】：

谁能告诉我如何或是否可以设置 TinyMCE insertdatetime 插件插入的文本的样式？

具体来说，我想将字体大小设置为小于文本的其余部分。

我还想知道这样做是否会导致后续键入的文本出现问题，因为它会继续使用不同的字体大小？

这是我现在使用的：

insertdatetime_formats: [ '✏️ (%d/%m/%Y  -  %Hh%M)', '%d/%m/%Y' ],

【问题讨论】：

标签： javascript html css tinymce tinymce-5

【解决方案1】：

一种方法是使用insertdatetime_element: true 将日期/时间字符串包装在<time> 元素中，然后使用content_style 设置<time> 标记的样式。正如您所说，这确实会产生一个问题，即如果您继续输入（直到您按下 Enter 键），文本将保持较小。

作为一种解决方法，您可以使用noneditable_noneditable_class 和extended_valid_elements 将不可编辑的类添加到<time> 标记（如果它不需要可编辑），之后键入的任何文本都将返回到默认样式。

小提琴示例：https://fiddle.tiny.cloud/LShaab/3

tinymce.init({
    selector: "textarea",
    plugins: [
        "insertdatetime noneditable"
    ],
    insertdatetime_formats: ['(%d/%m/%Y  -  %Hh%M)', '%d/%m/%Y'],
    insertdatetime_element: true,
    content_style: "time { font-size:11px; }",
    noneditable_noneditable_class: 'mceNonEditable',
    extended_valid_elements: 'time[class=mceNonEditable]'
});

【讨论】：