Cambiar el tipo/tamaño de fuente predeterminado en TinyMCE

default font-face

Question

¿Cómo cambia el tipo de fuente y el tamaño de fuente predeterminados en TinyMCE?

Estoy usando la máscara avanzada y he cambiado el estilo del body, td, pre en default / content.css pero todavía no cambia.

Answer 1

Aquí hay otra manera de resolver este problema.

Agregando sus propios estilos personalizados a nuestro archivo CSS definiendo tinymce id.

#tinymce .mceContentBody p {
   font-family: your_font_name !important; 
}

Answer 2

Aquí te mostramos cómo hacerlo sin tocar CSS o cualquier otro código.

1. Usa el plugin ''TinyMCE Advanced''
2. Actívalo en la configuración.

Instrucciones más detalladas here .

Answer 3

Bueno, hay varios content.css y solo uno se usa para estilizar tu editor dependiendo de tus ajustes de configuración .

Debe usar la opción de configuración content_css y nombrar un archivo css propio donde puede sobrescribir los valores predeterminados de los editores (el content.css que estaba buscando recientemente). En tu función init usa algo como

content_css: "http://localhost/css/my_tiny_styles.css",

y en my_tiny_styles.css o cualquier archivo que elija que use

font-family: myfont1, myfont2, sans-serif;

Answer 4

Para las personas que tienen problemas para agregar una hoja de estilo debido a problemas de ruta o cualquier otra razón, esto debería hacerlo de manera bastante simple:

setup : function(ed) {
     ed.on(''init'', function(){
         $(this.getDoc()).find(''head'').append(''<style>p{margin:0;}</style>'');
     });
}

Tenga en cuenta que usé jQuery, pero, por supuesto, se puede hacer sin él también.

Answer 5

Si desea cambiar el valor predeterminado de los dropboxes en lugar de solo la pantalla css, con tinyMCE 4 ahora es:

setup : function(ed) {
 ed.on(''init'', function(ed) {
  ed.target.editorCommands.execCommand("fontName", false, "Calibri");
  ed.target.editorCommands.execCommand("fontSize", false, "11pt");
 });
}

EDITAR: esta es la opción de configuración de la función init como se explica aquí: https://www.tinymce.com/docs/configure/integration-and-setup/#setup