TinyMCE getContent() 使用默认字体答案

【问题标题】：TinyMCE getContent() with default fontTinyMCE getContent() 使用默认字体
【发布时间】：2021-02-06 08:46:08
【问题描述】：

我使用的是 TinyMCE 版本 5.4.2。到目前为止一切都很好。 TinyMCE 有配置选项content_style 在我们设置内容之前设置默认字体或其他。它在屏幕上工作，但当我们调用 getContent() 时它不工作。

当我们调用getContent() 时，我们如何获得我们之前设置的默认字体。如果用户从工具栏或菜单栏更改字体，它仅适用于带有字体的 getContent。是否可以getContent() 使用默认字体或字体大小？

tinymce.init({
    selector: 'textarea#full-featured-non-premium',
    forced_root_block: 'div',
    content_style: "div { font-family: 'comic sans ms', sans-serif; font-size:14px }",
    plugins: ['fullpage save print preview searchreplace autolink directionality',
        'visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor',
        'toc insertdatetime advlist lists wordcount imagetools textpattern noneditable',
        'charmap emoticons quickbars'
    ],
    menubar: 'file format',
    menu: {
        file: {
            title: 'File',
            items: 'newdocument | mnuGetContent'
        },
        format: {
            title: 'Format',
            items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat'
        },
        insert: {
            title: 'Insert',
            items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime'
        },
    },
    setup: function (ed) {
        ed.on('init',
            function () {                    
                tinymce.activeEditor.setContent('<!DOCTYPE HTML"><html><title>this is</title><body><div>Hi World!</div></body></html>', {
                    format: 'html'
                })

            });
        ed.on('BeforeSetContent', function (e) {});
        ed.ui.registry.addMenuItem('mnuGetContent', {
            text: 'Get Content',
            onAction: function () {
                alert(tinymce.activeEditor.getContent({
                    format: 'html'
                }))
            }
        });        
    }
});

这是预期的结果：

content_style: "div { font-family: 'comic sans ms', sans-serif; font-size:14px }"

<!DOCTYPE HTML"><html><title>this is</title><body>
<div style="font-family: 'comic sans ms', sans-serif; font-size:14px">Hi World!</div>
</body></html>

或

content_style: "body { font-family: 'comic sans ms', sans-serif; font-size:14px }"

<!DOCTYPE HTML"><html><title>this is</title><body style="font-family: 'comic sans ms', sans-serif; font-size:14px">
<div>Hi World!</div>
</body></html>

这是当前结果：

<!DOCTYPE HTML"><html><title>this is</title><body>
<div>Hi World!</div>
</body></html>

【问题讨论】：

标签： javascript css fonts tinymce

【解决方案1】：

TinyMCE 不会做您希望它做的事情 - 但我不知道您想要的实际上是个好主意。

在编辑内容时，通过content_style 或content_css 传入外部样式表可以让您清晰地将语义内容与该内容的样式分开。当您使用 getContent() API 调用时，TinyMCE 只是将编辑器的 <body> 中的内容返回给您 - 这是它的预期行为。

如果您想在对内容进行某些操作（例如，作为电子邮件发送）之前将 CSS 内联到 HTML 中，那么在将内容用于该目的之前就这样做是有意义的。有一些工具可以执行此内联，因为这是发送电子邮件的常见需求。

如果您选择在将来更改 CSS 并在保存内容时内联 CSS，则每次更新 CSS 时都必须“修复”所有先前的内容。如果您在选择使用/发送内容时内联 CSS，您将保持内容与其布局的分离，并使将来更新内容和更改其布局变得更容易。

【讨论】：

嗨@Michael，非常感谢您回复我的回答并解释了详细信息。实际上，我正在尝试基于 TinyMCE 构建一些插件。因此其他开发人员或我们的用户可以使用该插件发送电子邮件或其他目的。 TinyMCE 返回内的内容不是事实（也许我错过了对此的理解）。如果我们在 configuration_option 设置“fullpage”插件，TinyMCE 会返回整个 HTML。如果我们可以使用默认字体获取内容，那对我们来说会更好。我希望 TinyMCE 团队会在下一个版本中考虑这个功能。目前，我听从你的建议。谢谢
@ib3an 有很多 API 可以拼凑起来实现这一点。原则上，您在init event 上获得content body，然后使用您喜欢的方式在 iframe 的 body 元素上应用内联样式。希望能有所帮助。