更改 TinyMCE 中的默认字体系列答案

【问题标题】：Changing the default font family in TinyMCE更改 TinyMCE 中的默认字体系列
【发布时间】：2013-07-29 05:58:47
【问题描述】：

我已经使用文档here 成功更改了编辑器内的默认字体，但这给我留下了一个问题。原来的默认字体在字体下拉列表中不再起作用。

原始默认值：Verdana
新默认值：MyCustomFont

当我在编辑器中输入时，默认情况下会看到我的 MyCustomFont 字体。如果我尝试将其更改为 Verdana（原始默认值），则不会发生任何事情。我可以将其更改为除 Verdana 之外的任何字体系列。我还注意到，当我在下拉列表中选择 MyCustomFont 时，内容会被带有内联样式的 span 包围。原始默认字体不会发生这种情况（因此什么也没发生）。

在我看来，缺少一个关键的文档——如何告诉编辑器（特别是字体功能）我在 css 中默认定义的字体是默认字体。

我用谷歌搜索了很多，但没有结果。其他人似乎都在接受上面提到的文档。我是唯一一个有这个问题的人吗？如果没有，请帮忙！ :)

请注意，this 问题的答案不回答我的问题。

【问题讨论】：

如何将其更改为 Verdana？
我没有将其更改为 Verdana。这似乎是编辑器的默认设置。
你试过使用下拉字体吗？
当我在字体下拉列表中选择 Verdana 时，没有任何反应。我怀疑它仍然认为 Verdana 是默认字体。
看起来像一个错误。在这种情况下，您应该提交错误报告：www.tinymce.com/develop/bugtracker_bugs.php

标签： javascript css fonts tinymce font-face

【解决方案1】：

// Init TinyMCE
$('#content').tinymce({
    setup : function(ed)
    {
        ed.on('init', function() 
        {
            this.getDoc().body.style.fontSize = '12px';
            this.getDoc().body.style.fontFamily = 'serif';
        });
    }
});

【讨论】：

【解决方案2】：

也许为时已晚，但是……

$('.tinymce').tinymce({
    setup : function(ed) {
        ed.onInit.add(function(ed) {
            ed.execCommand("fontName", false, "Arial");
            ed.execCommand("fontSize", false, "2");
        });
    }
});

编辑

对于 TinyMCE 4，如 @jason-tolliver 和 @georg 所述，语法为：

ed.on('init', function (ed) {
    ed.target.editorCommands.execCommand("fontName", false, "Arial");
});

【讨论】：

很棒的答案。大多数方法侧重于 CSS，但这是一种更简洁的内联方式。当您从 TinyMCE 生成 PDF 时，它也会有所帮助！
在 TinyMCE 4 中的语法是 ed.on('init', function (ed) {...})
@JasonTolliver 正在抛出一个对象不支持此属性或方法“execCommand”。
ed.on('init', function(ed) { ed.target.editorCommands.execCommand("fontName", false, "Calibri"); 应该是版本 4 的方式
@Georg - 谢谢！这是版本 4 的完整正确答案；我编辑的答案被拒绝了，所以我希望人们往下看，找到你的答案。

【解决方案3】：

你们中的一些人将在 TinyMCE EditorManager 的范围内工作，它提供两个事件：AddEditor 和 RemoveEditor。当生成一个新的 TinyMCE 实例并触发 AddEditor 时，编辑器实际上并未初始化，因此调用 getDoc() 将返回 null。

您需要做的是在其中创建一个init 侦听器。

tinyMCE.EditorManager.on('AddEditor', function (event) {
    ... other code ...

    event.editor.on('init', function() {
      this.activeEditor.getDoc().body.style.fontSize = '12px';
      this.activeEditor.getDoc().body.style.fontFamily = 'Times New Roman';
    });

    ... other code ...
  }
});

这至少在 4.3.8 版本中是正确的

【讨论】：

【解决方案4】：

我在 tinymce 4.x 中的所有解决方案都遇到了困难我无法更改字体大小和字体名称。在尝试了很多之后，我找到了解决方案。首先我可以确认 Jareds 的回答，谢谢！这两个命令在默认设置下不起作用：

tinymce.EditorManager.execCommand("fontName", false, "12px");
tinymce.EditorManager.execCommand("fonSize", false, "Arial");

默认字体大小是“pt”，而不是“px”。因此，要么通过 [fontsize_formats][1] 将显示的字体大小定义为“px”，要么只使用“pt”切换所需的大小。用 tinymce.EditorManager.execCommand tinymce 也不满意。您必须移交整个字体系列，例如“arial、helvetica、sans-serif”。这些命令在我的网站上运行：

tinymce.EditorManager.execCommand("fontName", false, "12pt");
tinymce.EditorManager.execCommand("fonSize", false, "arial, helvetica, sans-serif");

【讨论】：

【解决方案5】：

对于那些使用tinymce.init({ 初始化时间并且无法直接实现Radius Kuntoro的人回答。

我的初始化看起来像

tinymce.init({
            selector: '#editor',
            menubar: false,
            plugins: ['bbcode'],
            toolbar: 'undo redo | bold italic underline',    
            setup : function(ed)
            {
                ed.on('init', function() 
                {
                    this.getDoc().body.style.fontSize = '12';
                    this.getDoc().body.style.fontFamily = 'Arial';
                });
            },
        });

【讨论】：

在 Tinymce 5.x 上工作

【解决方案6】：

对于 TinyMCE 4.6.3，这似乎是要走的路：

tinymce.init({
    setup: function (ed) {
        ed.on('init', function (e) {
            ed.execCommand("fontName", false, "Verdana");
        });
    }
});

【讨论】：

【解决方案7】：

参考 TinyMce 网站，您可以像这样在初始化函数中嵌入样式表：

tinymce.init({
    content_css : 'path/to/style/sheet',
    body_class: 'define-class-name-without-dot-at-the-first'
});

它可以工作，你不需要设置任何东西。 check it out on tinyMCE webpage

【讨论】：

【解决方案8】：

这就是答案。它对我有用：

第 1 步：

在 /wp-content/themes/yourtheme/ 内的主题目录的根目录中查找 functions.php，打开它并在 php 标签后添加一行。

add_editor_style('custom-editor-style.css');

第 2 步：

在同一目录中，创建一个名为 custom-editor-style.css 的文件，其中包含以下行

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); * { font-family: 'Open Sans', sans-serif, Arial, Helvetica;} 来吧，清除你的浏览器缓存，这就是你所看到的。

托尼·吴

【讨论】：

这似乎重复了同一用户的另一个答案。请在检查是否有应合并到您的其他答案中的内容后删除此内容。

【解决方案9】：

这对我有用：

在/wp-content/themes/yourtheme/内你的主题目录的根目录中寻找functions.php，打开它并在php标签后添加一行。
```
add_editor_style('custom-editor-style.css');
```

在同一目录中，创建一个名为 custom-editor-style.css 的文件，其中包含以下行：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
* { font-family: 'Open Sans', sans-serif, Arial, Helvetica;}

继续，清除浏览器的缓存，这就是你所看到的。

参考链接：https://blog.phi9.com/wordpress-editor-and-its-font/

【讨论】：

【解决方案10】：

对于 tinymce 5，您可以将 fullpage 插件添加到插件数组，然后调用新键 fullpage_default_font_family 但我不知道它是否适用于旧版本。

【讨论】：

【解决方案11】：

以上解决方案都不适合我。所以，不知何故，我设法使用自定义逻辑来修复它。

editor.on('change', function (e) {
    let node = e.target.selection.getNode();
    if (node.nodeName === 'P' || node.parentNode.nodeName === 'BODY') {
        editor.dom.setStyle(node, 'font-size', "16px");
    }

    tinymce.triggerSave(); // to keep your textarea synced with above changes
});

【讨论】：

【解决方案12】：

我试过这样做。我使用 TinyMce 5，在编辑器中生成了一个 body 标签。在初始化编辑器时，我设置了 forced_root_block:'div'，这意味着每次输入内容时，我的根元素始终是 div。

 let tinyMceBody = tinymce.activeEditor.getBody();
      let divs = $(tinyMceBody).children('div');
      for(let i =0; i<divs.length; i++) {
        divs[i].style.fontFamily = 'Nunito';
}

所以我尝试捕获所有根元素并为其设置默认样式。

当您编辑某些内容时，tinymce 会使用具有样式属性的 span 块围绕您编辑的任何内容，因此您在编辑器中手动编辑的内容将被覆盖。如果您不在编辑器中编辑文本，那么我们在父元素 forced_root_block:'div' 上附加的默认样式将被保留。

尝试根据您的自定义需求制定解决方案。使用上述技术。似乎图书馆对此没有突出的内部支持。 z

P.S:-

tinymce.activeEditor.dom.setStyles(tinymce.activeEditor.dom.select('div'), {'font-family' : 'Nunito'});

适用于所有 div ，但我只想申请 body 标签的第一级子级而不是所有 div（包括子级的子级）。否则这也可能是一个解决方案。

【讨论】：