TinyMCE getContent() 使用默认字体

Question

我正在使用 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>

Answer 1

TinyMCE 不会做你想让它做的事情——但我不知道你想要的实际上是一个好主意。

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

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

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

TinyMCE getContent() 使用默认字体

问题描述

1 个解决方案

解决方案1
0 2020-10-23 15:20:43

TinyMCE getContent() 使用默认字体

问题描述

1 个解决方案

解决方案1 0 2020-10-23 15:20:43

解决方案1
0 2020-10-23 15:20:43