jquery - ejemplos - ¿Cómo cambiar el tamaño de fuente por defecto en tinymce?
tinymce toolbar (11)
Debe usar la configuración content_css de tinymce para establecer su propio archivo css personalizado (asegúrese de que esta configuración apunte a una ubicación válida de un archivo css). Este archivo se insertará en el encabezado de iframes del editor después de que todas las demás configuraciones de css (archivos del núcleo) se inserten allí al inicializar tinymce, por lo que todas las configuraciones que coloque en su archivo sobrescribirán las configuraciones realizadas anteriormente (por tinymce).
Ejemplo: establecer el tamaño de fuente predeterminado en 11px. Contenido de un archivo css personalizado (lo nombré content.css en mi 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",
...
});
Estoy usando jquery tinymce editor. El tamaño de fuente predeterminado es 10. Me gusta cambiar ese tamaño de fuente predeterminado. Cómo puedo hacer eso,
He aquí cómo hacerlo sin ningún tipo de codificación.
- Usa el plugin ''TinyMCE Advanced''
- Actívalo en la configuración.
Instrucciones más detalladas here .
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");
});
}
});
Esta es la mejor manera de cambiar los valores de propiedad en ''content.css''
O simplemente busque el archivo css utilizado por tinymce y cambie font-size . Por ejemplo, si usa un tema simple, vaya a un sitio como este: js/themes/simple/skins/default/content.css y cambie font-size . Trabajando para mi
Que yo sepa, TinyMCE hereda el tamaño de fuente definido para la etiqueta principal, por ejemplo, la etiqueta <body>
Simplemente edita
tinymce / themes / advanced / skins / o2k7 / content.css
y cambiar el tamaño de fuente en esta línea:
body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}
Solo agrega esta línea a las opciones
content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}",
asi se ve asi
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"}
});
Una opción es content_style donde puede agregar css extra al editor.
tinymce.init({
selector: ''textarea'', // change this value according to your HTML
content_style: "div, p { font-size: 15px; }"
});
Desafortunadamente, no se puede configurar el body sin !important por el orden en que se configuró el css.
Además, no permito que las personas cambien el tamaño de la fuente, y esto probablemente se volverá loco.
Esto me ayudó a cambiar el tamaño "predeterminado" tal como se ve, pero debes tener cuidado si permites que las personas cambien el tamaño de la fuente después de esto.
Para mí, todo lo que necesitaba era este enfoque rápido y sucio, porque el HTML que estoy editando es super simple.
Voy a dejar esto aquí, 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");
});
}
en tinymce/themes/advanced/skins/o2k7/content.css agregue css:
#tinymce { font-size: 15px;}
<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>