Changing the default font family in TinyMCE

问题:

I've successfully changed the default font inside the editor using the documentation here but 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

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).

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.

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 this question do not answer my question.

回答1:

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:

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

回答2:

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

回答3:

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

My init looks like

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

回答4:

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

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

回答5:

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

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

回答6:

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

What you need to do is create an init listener within.

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

回答7:

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.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:

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

回答8:

This is the Answer, It work for me:

STEP # 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.

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

STEP # 2:

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

@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.

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

Tony Ngo

回答9:

This is the Answer. It work for me:

STEP # 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.

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

STEP # 2:

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

@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.

Tony Ngo