web-dev-qa-db-fra.com

Changer la famille de polices par défaut dans TinyMCE

J'ai réussi à changer la police par défaut dans l'éditeur en utilisant la documentation ici mais cela me laisse un problème. La police par défaut d'origine ne fonctionne plus dans la liste déroulante des polices.

Défaut d'origine: Verdana
Nouvelle valeur par défaut: MyCustomFont

Lorsque je tape dans l'éditeur, ma police MyCustomFont est affichée par défaut. Si j'essaie de changer cela en Verdana (valeur par défaut d'origine), rien ne se passe. Je peux le changer pour n’importe quelle famille de polices sauf Verdana. J'ai également remarqué que lorsque je sélectionne MyCustomFont dans la liste déroulante, le contenu est entouré d'une étendue avec des styles en ligne. Cela ne se produit pas avec la police par défaut d'origine (par conséquent, rien ne se passe).

Il me semble qu’il manque un élément clé de la documentation: comment dire à l’éditeur (en particulier la police) que la police que j'ai définie par défaut dans css est la police par défaut.

J'ai un peu cherché sur Google mais je n'ai obtenu aucun résultat. Tout le monde semble se contenter de la documentation mentionnée ci-dessus. Suis-je le seul à avoir ce problème? Si non, aidez s'il vous plaît! :)

Veuillez noter que les réponses à this question ne répondent pas à ma question. 

javascriptcssfontstinymcefont-face
13
Paul Fleming

peut-être trop tard mais ...

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

MODIFIER

Pour TinyMCE 4, selon les états @ jason-tolliver et @georg, la syntaxe est la suivante:

ed.on('init', function (ed) {
    ed.target.editorCommands.execCommand("fontName", false, "Arial");
});
25
geedelur
// Init TinyMCE
$('#content').tinymce({
    setup : function(ed)
    {
        ed.on('init', function() 
        {
            this.getDoc().body.style.fontSize = '12px';
            this.getDoc().body.style.fontFamily = 'serif';
        });
    }
});
16
Radius Kuntoro

Pour ceux qui commencent timymce avec tinymce.init({ et ne peuvent pas implémenter Radius Kuntoro answer directement.

Mon init ressemble à

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

En vous référant au site Web de TinyMce, vous pouvez intégrer une feuille de style à votre fonction init, comme ceci:

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

Cela fonctionne et vous n'avez pas besoin de configurer quoi que ce soit. consultez-le sur la page Web tinyMCE

2
Hamed

Pour TinyMCE 4.6.3, cela semble être la voie à suivre:

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

Certains d’entre vous travailleront dans les limites de TinyMCE EditorManager, qui propose deux événements: AddEditor et RemoveEditor. Lorsqu'une nouvelle instance de TinyMCE est générée et que AddEditor est déclenché, l'éditeur n'est pas réellement initialisé et l'appel de getDoc() renvoie donc la valeur null.

Ce que vous devez faire, c'est créer un auditeur init à l'intérieur.

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

Ceci est au moins vrai à partir de la version 4.3.8

1
Jared

J'ai eu des difficultés avec toutes les solutions ici dans tinymce 4.x Je ne pouvais changer ni fontsize ni fontname. Après avoir beaucoup essayé, j'ai trouvé la solution. Tout d'abord, je peux confirmer que Jareds répond, merci pour cela! Ces deux commandes ne fonctionneront pas avec les paramètres par défaut:

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

La taille de police par défaut est "pt", pas "px". Donc, définissez fontSize affiché comme "px" par [fontsize_formats] [1] ou transférez simplement la taille souhaitée avec "pt". Avec tinymce.EditorManager.execCommand, tinymce n’est pas non plus heureux. Vous devez transférer toute la famille de polices comme "arial, helvetica, sans-serif". Ces commandes ont fonctionné sur mon site:

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

C'est la réponse, ça marche pour moi:

ÉTAPE 1:

Cherchez functions.php à la racine de votre répertoire themes dans/wp-content/themes/yourtheme /, ouvrez-le et ajoutez une ligne après la balise php.

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

ÉTAPE 2:

Dans le même répertoire, créez un fichier appelé custom-editor-style.css contenant les lignes ci-dessous.

@import url ( https://fonts.googleapis.com/css?family=Open+Sans:400,700 ); * {font-family: 'Open Sans', sans-serif, Arial , Helvetica;} Allez-y, effacez le cache de votre navigateur et voici ce que vous verrez.

Lien de référence: https://blog.phi9.com/wordpress-editor-and-its-font/

Tony Ngo

0
Tony Ngo