Javascript 更改TinyMCE中的默认字体系列

我已经使用文档成功地更改了编辑器中的默认字体，但这给我留下了一个问题。“字体”下拉列表中的原始默认字体不再有效

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

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

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

我在谷歌上搜索了不少，但都没有结果。其他所有人似乎都满足于上面提到的文档。我是唯一有这个问题的人吗？如果没有，请帮助！：）

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

也许太晚了，但是

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

$('.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");
});

---

你们中的一些人将在TinyMCE

EditorManager

的范围内工作，它提供两个事件：

AddEditor

和

removeditor

。当生成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版时是正确的，我在tinymce 4.x中遇到了所有解决方案的困难 我无法更改fontsize和fontname。经过多次尝试，我找到了解决办法。 首先我可以确认Jareds的答案，谢谢！默认设置下，这两个命令不起作用：

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

默认的fontsize大小是“pt”，而不是“px”。因此，可以通过[fontsize_formats][1]将显示的fontsize定义为“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");

---

对于那些使用

tinymce.init（{

）初始化timmce并且无法实现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 4.6.3来说，这似乎是一条路要走：

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

---

参考TinyMce网站，您可以在init函数中嵌入样式表，如下所示：

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

它可以工作，你不需要设置任何东西。

---

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

第1步：

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

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

添加编辑器样式（“custom-editor-style.css”）

第2步：

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

@导入url（）； *{字体系列：'opensans'，Sans serif，Arial，Helvetica；} 继续，清除浏览器缓存，这就是您将看到的内容

Tony Ngo

这对我很有用：

在主题目录的根目录

/wp content/themes/yourtheme/

中查找

functions.php

，打开它并在php标记后添加一行

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

在同一目录中，创建一个名为

自定义编辑器样式.css

的文件，其中包含以下行：

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

继续，清除浏览器的缓存，这就是您将看到的内容

---

请参阅链接：

对于tinymce 5，您可以将全页插件添加到插件阵列，然后调用新键 fullpage\u default\u font\u family但我不知道它是否适用于旧版本

---

上述解决方案都不适合我。因此，我设法用自定义逻辑修复了它

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
});

---

如何将其更改为Verdana？我没有将其更改为Verdana。这似乎是编辑器的默认设置。您是否使用字体下拉列表尝试过它？当我在字体下拉列表中选择Verdana时，什么都没有发生。我怀疑它仍然认为Verdana是默认字体。看起来像个bug。在这种情况下，您应该提交一份bug报告：www.tinymce.com/develope/bugtracker\u bugs.php答案令人不快。大多数方法侧重于CSS，但这是一种更简洁的内联方式。当您从TinyMCE生成PDF时，它也会有所帮助！在TinyMCE 4中，语法是

ed.on（'init'，function（ed）{…}）

@jasontelliver，抛出的对象不支持此属性或方法“execCommand”。

ed.on（'init'，function（ed）{ed.target.editorCommands.execCommand（“fontName”，false，“Calibri”）

应该是使用版本的方式4@Georg-谢谢！这是第4版的完整正确答案；我对答案的编辑被拒绝，因此我希望人们在这里查找并找到您的答案。在Tinymce 5.x上工作这似乎与同一用户的另一个答案重复。请在检查是否有需要合并的内容后删除此答案你的另一个答案是什么。