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

Changing the default font family in TinyMCE

提问by Paul Fleming

I've successfully changed the default font inside the editor using the documentation herebut that leaves me with a problem. The original default font no longer works in the font drop down list.

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

Original default: Verdana
New default: MyCustomFont

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

When I type into the editor I see my MyCustomFont font by default. If I try to change that to Verdana (original default) nothing happens. I can change it to any font family except Verdana. I noticed also that when I select MyCustomFont in the drop down list the content gets surrounded with a span with inline styles. This does not happen with the original default font (hence why nothing happens).

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

It seems to me like there's a key piece of documentation missing - how to tell the editor (the font feature in particular) that the font I've defined by default in the css is the default font.

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

I've Googled quite a bit but had no results. Everybody else seems to be settling for the documentation mentioned above. Am I the only one having this problem? If not, please help! :)

我在谷歌上搜索了很多，但没有结果。其他人似乎都在为上面提到的文档感到满意。只有我有这个问题吗？如果没有，请帮忙！:)

Please note, the answers to thisquestion do not answer my question.

请注意，这个问题的答案并没有回答我的问题。

回答by geedelur

maybe too late but...

也许为时已晚，但...

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

EDIT

编辑

For TinyMCE 4, as @jason-tolliver and @georg states, the syntax is:

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

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

回答by Radius Kuntoro

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

回答by Nikolay Prokopyev

For those who init timymce with tinymce.init({and cannot implement Radius Kuntoroanswer directly.

对于那些使用tinymce.init({并不能直接实现Radius Kuntoro来初始化 timymce 的人。

My init looks like

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

回答by Hamed

As refer to TinyMce website you can embed style sheet within your init function like this :

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

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

It works and you do not need to setup anything. check it out on tinyMCE webpage

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

回答by Kenneth Saey

For TinyMCE 4.6.3 this seems to be the way to go:

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

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

回答by shmup

Some of you will be working within the confines of the TinyMCE EditorManager, which offers two events: AddEditorand RemoveEditor. When a new instance of TinyMCE is being spawned and AddEditoris fired, the editor isn't actually initialized and so calling getDoc()will return null.

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

What you need to do is create an initlistener within.

您需要做的是在其中创建一个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 ...
  }
});

This is at least true as of version 4.3.8

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

回答by Jonny

I had difficulties with all solutions here in tinymce 4.x I couldn't change neither fontsize nor fontname. After trying out a lot I found the solution. First of all I can confirm Jareds answer, thank you for it! Those two commands will not work by default settings:

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

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

The default fontsize size is "pt", not "px." So either define displayed fontSize as "px" by [fontsize_formats][1] or just handover the desired size with "pt". With tinymce.EditorManager.execCommand tinymce is also not happy. You have to handover the whole font-family like 'arial, helvetica, sans-serif'. These commands worked on my site:

默认字体大小是“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");

回答by Tony Ngo

This is the Answer, It work for me:

这是答案，它对我有用：

STEP # 1:

第1步：

Look for functions.php in root of your themes directory inside /wp-content/themes/yourtheme/, open it up and add one line after php tag.

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

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

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

STEP # 2:

第2步：

In the same directory, create a file called custom-editor-style.css with below lines in it

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

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); * { font-family: 'Open Sans', sans-serif, Arial, Helvetica;} Go ahead, clear your browsers cache and this is what you'll see.

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

Refer link: https://blog.phi9.com/wordpress-editor-and-its-font/

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

Tony Ngo

托尼·吴

回答by Mohammed Ramadan

For tinymce 5 you can add fullpageplugin to plugins array then new key called fullpage_default_font_familybut i don't know if it works the same way for old versions or not.

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

回答by Tony Ngo

This is the Answer. It work for me:

这是答案。它对我有用：

STEP # 1:

第1步：

Look for functions.php in root of your themes directory inside /wp-content/themes/yourtheme/, open it up and add one line after php tag.

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

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

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

STEP # 2:

第2步：

In the same directory, create a file called custom-editor-style.css with below lines in it

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

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); * { font-family: 'Open Sans', sans-serif, Arial, Helvetica;} Go ahead, clear your browsers cache and this is what you'll see.

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

Tony Ngo

托尼·吴