【问题标题】:TinyMCE 4: Apply one block format to new blocks automaticallyTinyMCE 4:自动将一种块格式应用于新块
【发布时间】:2016-01-24 21:00:14
【问题描述】:

在 TinyMCE 4 中,我使用标准的 formatselect 控件来格式化内容中的块元素。它的配置通常看起来像这样:

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

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

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 元素中嵌入样式来实现我的意图。但是在使用我不理解的自定义格式时,行为会发生一些变化。

使用默认块格式时,当内容为空以及创建新块时,默认选择段落。使用自定义格式,它不会选择默认的块格式,所以默认是没有我的自定义样式。我希望 normal 成为默认值。我怎样才能做到这一点?

【问题讨论】:

    标签: javascript formatting tinymce tinymce-4


    【解决方案1】:

    这可能太晚了,但我想我能够以适合您的方式完成它。希望有人觉得这很有用。

    (使用 tinyMCE:4.3.13)

    在我的情况下,我在模态中显示了一个 tinyMCE 实例。模式可用于创建或编辑文本,然后将其作为 html 保存到数据库中。我遇到的问题是在创建新文本实例时,默认情况下会放入一个 p 标签(假设您添加了一些内容),这并不反映他们正在查看的当前样式。稍后,我需要将此 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。您无法切换验证。我认为这应该改变。我们需要能够仅将内容作为样式注入。我会买票的。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-03-10
      • 1970-01-01
      • 2011-06-28
      • 1970-01-01
      • 2020-01-23
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多