¿Cómo cambiar el tamaño de fuente predeterminado en tinymce?

49

Es necesario utilizar la configuración content_css de tinymce para establecer un archivo CSS personalizado propio (asegúrese de que esta configuración apunte a una ubicación válida de un archivo css). Este archivo se insertará en el editor iframes head después de que todas las demás configuraciones de css (archivos del núcleo) se inserten allí al inicializar tinymce; por lo tanto, todas las configuraciones que coloque en su archivo sobrescribirán las configuraciones realizadas anteriormente (por tinymce).

Ejemplo: Configurando el tamaño de fuente predeterminado a 11px. Contenido de un archivo CSS personalizado (i nombró content.css en la instalación):

body { 
    font-family: Verdana,Arial,Helvetica,sans-serif; 
    font-size: 11px; 
}

Cómo utilizar este ajuste:

tinyMCE.init({ 
... 
// you do not need to include it yourself, tinymce will do this for you, 
// but you will need to give tinymce the location of your css file 
content_css : "http://www.myserver.com/css/content.css", 
    ... 
});

Fuente

2010-12-13 09:36:00 Thariama

+1

Donde necesito incluir este CSS. ya que mi página principal también se ve afectada si inserto en la misma página. Dónde insertar este CSS y cómo acceder a él. –

+0

Lamento dar comentarios innecesarios. Esto funciona para mi. He cambiado el tamaño de fuente en content.css directamente, gracias –

+0

contento de haber podido ayudar – Thariama

-1

Por lo que yo sé, TinyMCE hereda tamaño de la fuente definido para la etiqueta principal, por ejemplo, la etiqueta <body>

Fuente

2010-12-13 09:34:39

+0

Cómo cambiar eso, explícame. –

+4

esto es cierto, pero ¿cómo ayuda eso a resolver el problema? – Thariama

+0

@Thariama Creo que es obvio – JSON

2

O simplemente encontrar el archivo CSS que se utiliza por tinymce y cambie font-size. Por ejemplo, si usa un tema simple, vaya a un lugar como este: js/themes/simple/skins/default/content.css y cambie font-size. Trabajando para mi

Fuente

2011-09-12 11:43:06 krzyhub

5

<script type="text/javascript"> 
    tinyMCE.init({ 
     mode : "textareas", 
      setup : function(ed) 
      { 
       // set the editor font size 
       ed.onInit.add(function(ed) 
       { 
       ed.getBody().style.fontSize = '10px'; 
       }); 
      }, 
      }); 
</script>

Fuente

2014-08-22 06:35:08 KwangKung

+1

segundo parámetro ed no se pasa de alguna manera - "esto" funciona – Srneczek

+0

Parece que ya no funciona en 4.6 (ya sea con ed o esto: TypeError: undefined no es un objeto (evaluando 'ed.onInit.add') – Jonny

0

en css tinymce/themes/advanced/skins/o2k7/content.css complemento:

#tinymce { font-size: 15px;}

Fuente

2015-02-03 13:27:29

-1

Aquí es cómo hacerlo sin ningún tipo de codificación

Usar el plugin 'TinyMCE avanzada'
activarlo en la configuración.

Instrucciones más detalladas here.

Fuente

2015-04-07 09:17:16 shadowoflight

19

que he utilizado en mi proyecto de esta manera

tinymce.init({ 
    selector:"#txt1", 
    setup : function(ed) 
    { 
    ed.on('init', function() 
    { 
     this.execCommand("fontName", false, "tahoma"); 
     this.execCommand("fontSize", false, "12px"); 
    }); 
    } 
});

Ésta es la mejor manera que solo cambiando los valores de propiedad en 'content.css'

Fuente

2015-04-13 06:17:03

+0

this.execCommand ("fontSize", falso, "12px"); no funcionó para mí en tmce 4 con (google chrome 51) this.getBody(). style.fontSize = '12px'; de la respuesta de KwangKungs sin embargo. – Max

+0

esto causó desplazamiento no deseado a la entrada .... cómo evitar que –

1

Voy a yust dejo esto aquí, con TinyMCE 4 es ahora:

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

Fuente

2016-03-17 13:11:25 Georg

0

Una opción es content_style donde se puede añadir CSS extra para el editor.

tinymce.init({ 
    selector: 'textarea', // change this value according to your HTML 
    content_style: "div, p { font-size: 15px; }" 
});

Por desgracia no se puede simplemente establecer body sin !important debido al orden que establecen el css.

Además, no permito a las personas cambiar el tamaño de la fuente, y es probable que esto no funcione.

Esto me ayudó a cambiar el tamaño "predeterminado" tal como se ve, pero debe tener cuidado si permite que las personas cambien el tamaño de la fuente después de esto.

Para mí, este enfoque rápido y sucio era todo lo que necesitaba porque el HTML que estoy editando es muy simple.

Fuente

2016-09-04 20:49:42

9

Sólo añadir esta línea a las opciones

content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}",

lo que parece que este

tinymce.init({ 
    selector: "textarea",theme: "modern",width: '100%',min_height:350 ,menubar:false, 
    content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}", 
    browser_spellcheck : true, 
    plugins: 
    [ 
     "advlist autolink link image lists charmap print preview hr anchor pagebreak", 
     "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking", 
     "table contextmenu directionality emoticons paste textcolor responsivefilemanager code" 
    ], 
    toolbar1: " undo redo preview code | \n\ 
       link bold italic underline | hr | image responsivefilemanager media |unlink anchor | ", 
    image_advtab: true , 

    external_filemanager_path:"/tinymce/filemanager/", 
    filemanager_title:"Responsive Filemanager" , 
    relative_urls: false, 
    remove_script_host : false, 
    external_plugins: { "filemanager" : "/tinymce/filemanager/plugin.min.js"} 
});

Fuente

2016-10-21 13:26:49 user3721605

+1

Para v3.5 esta clase funcionó para mí: '.mceContentBody'. – Wtower

+0

Esta fue la forma más sencilla de hacerlo para mí en TinyMCE 4.6.1 –

0

Simplemente edita

TinyMCE/themes/avanzado/pieles/o2k7/content.css

y cambie el tamaño de letra en esta línea:

body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}

Fuente

2017-01-18 08:22:47 HRN

¿Cómo cambiar el tamaño de fuente predeterminado en tinymce?

Respuesta

Cuestiones relacionadas