javascript - 更改 TinyMCE 中的默认字体系列

Question

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

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

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

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

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

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

score 34 · Accepted Answer

也许为时已晚，但...

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

score 23 · Accepted Answer

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

score 11 · Accepted Answer

对于那些使用Radius Kuntorotinymce.init({直接启动且无法实现的人回答。

我的初始化看起来像

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

它可以工作，你不需要设置任何东西。在 tinyMCE 网页上查看

score 1 · Accepted Answer

你们中的一些人将在 TinyMCE 的范围内工作EditorManager，它提供两个事件：AddEditor和RemoveEditor. 当生成并AddEditor触发 TinyMCE 的新实例时，编辑器实际上并未初始化，因此调用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 版开始是这样

score 0 · Accepted Answer

我在 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");

score 0 · Accepted Answer

这对我有用：

functions.php在你的主题目录的根目录中查找/wp-content/themes/yourtheme/，打开它并在 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/

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

我试过这样做。我使用 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 块围绕您编辑的任何内容，因此您在编辑器中手动编辑的内容将被覆盖。如果您不在编辑器中编辑文本，那么我们在父元素force_root_block:'div'上附加的默认样式将被保留。

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

PS：-

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

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

score -1 · Accepted Answer

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

score -2 · Accepted Answer

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

步骤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;} 继续，清除浏览器缓存，这就是你所看到的。

托尼·吴

javascript - 更改 TinyMCE 中的默认字体系列

12 回答 12

Related

Reference