javascript - TinyMCE 4 : Apply one block format to new blocks automatically

Question

在 TinyMCE 4 中，我使用标准的 formatselect 控件来格式化内容中的 block 元素。它的配置通常是这样的:

block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2'

我为这些 block 设置了自定义样式，无论编辑器生成的 HTML 在哪里结束，我都需要保留这些样式。主题中的 content.min.css 可以控制 block 在编辑器中的外观，但不能控制其他地方的外观，所以我不能依赖它。所以我使用自定义格式而不是标准 block 格式。我的配置如下所示:

block_formats: 'Normal=normal;Header 1=header1;Header 2=header2',
formats: {
    normal: {block: 'p', styles: {
        'font-family': '"Helvetica Neue",Helvetica,Arial,sans-serif',
        'font-weight': 'normal',
        'font-size': '13px',
        'line-height': '20px',
        'color': '#333'}},
    header1: {block: 'h1', styles: {
        'font-family': '"Helvetica Neue",Helvetica,Arial,sans-serif',
        'font-weight': 'normal',
        'font-size': '30px',
        'line-height': '40px',
        'color': '#333'}},
    header2: {block: 'h2', styles: {
        'font-family': '"Helvetica Neue",Helvetica,Arial,sans-serif',
        'font-weight': 'normal',
        'font-size': '20px',
        'line-height': '30px',
        'color': '#333'}}
},

这通过在生成的 HTML 元素中嵌入样式实现了我的意图。但是在使用我不理解的自定义格式时，行为会发生一些变化。

当使用默认 block 格式时，当内容为空时以及每当创建新 block 时默认选择段落。对于自定义格式，它不会选择默认的 block 格式，因此默认情况下没有我的自定义样式。我希望 normal 成为默认值。我怎样才能做到这一点？

Answer 1

这可能已经太晚了，但我认为我能够以适合您的方式完成这项工作。希望有人觉得这很有用。

(使用 tinyMCE:4.3.13)

在我的情况下，我在模式中显示了一个 tinyMCE 实例。模式可用于创建或编辑文本，然后将其作为 html 保存到数据库中。我遇到的问题是在创建新文本实例时，默认情况下会放入一个 p 标签(假设您添加了一些内容)，该标签不反射(reflect)他们正在查看的当前样式。稍后，我需要将此 html 渲染成图像，因此当我渲染它时样式必须出现在标签上，并且“格式”对象不会影响它，因为用户尚未通过 UI 选择它。然后用户可以创建在图像中以不同方式显示的结果 html，因为呈现的 Web-Kit 没有正确的 css，所以只呈现其默认值。

因此，要强制它显示初始样式(字体大小和字体系列是我关心的问题)，您可以简单地设置编辑器的初始内容。如果没有可供编辑的 html，我会在向用户显示模态之前立即执行此操作。

tinymce.activeEditor.setContent('<p><span style="font-family: arial; font-size: 8pt;">&nbsp;</span></p>');

当然，可以先检查浏览器版本以确保您设置的值可接受。

希望这对您有所帮助。

[更新]*这是一个失败!编辑器将呈现默认字符并将光标放在焦点之后。这会造成设计错误的编辑。 (假设我在文本上施加了默认的“下划线”样式)

因为我做了一个空格，所以带下划线的空格现在会出现在编辑器中。如果用户按下退格键以删除该空格，则可以。但是，如果用户再次按下退格键，它会删除格式。这不是修复。

要修复它，您需要将 tiny 设置为不验证 html。不幸的是，它不会呈现很好的 html。您无法切换验证。我认为这应该改变。我们需要能够仅将内容作为样式注入(inject)。我会开票。

https://github.com/tinymce/tinymce/issues/3126