Comment changer la taille de police par défaut dans tinymce?
j'utilise jquery tinymce éditeur. La taille par défaut de la police est de 10. J'aime changer la taille de la police par défaut. Comment puis-je le faire,
11 réponses
Vous devez utiliser le content_css réglage de tinymce pour personnaliser le fichier css de votre propre (assurez-vous que ce paramètre pointe vers un emplacement valide d'un fichier css). Ce fichier sera inséré dans l'éditeur iframes head après que tous les autres paramètres css(fichiers du noyau) y sont insérés lors de l'initialisation de tinymce - ainsi tous les paramètres que vous placez dans votre fichier écraseront les paramètres faits avant (par tinymce).
Exemple: définition de la valeur par défaut taille de police 11px. Contenu d'un fichier CSS personnalisé (je l'ai nommé contenu.css dans mon installation):
body {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
}
Comment utiliser ce paramètre:
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",
...
});
j'ai utilisé dans mon projet de cette façon
tinymce.init({
selector:"#txt1",
setup : function(ed)
{
ed.on('init', function()
{
this.execCommand("fontName", false, "tahoma");
this.execCommand("fontSize", false, "12px");
});
}
});
C'est la meilleure façon de changer les valeurs des propriétés dans 'content.css'
il suffit d'ajouter cette ligne aux options
content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}",
de sorte qu'il ressemble à ceci
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"}
});
<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>
Ou tout simplement trouver le fichier css qui est utilisé par de tinymce et changement font-size. Par exemple, si vous utilisez un thème simple, allez quelque part comme ceci: js/themes/simple/skins/default/content.css et là, changer font-size. De travail pour moi.
je vais juste laisser ceci ici, avec tinyMCE 4 c'est maintenant:
setup : function(ed) {
ed.on('init', function(ed) {
ed.target.editorCommands.execCommand("fontName", false, "Calibri");
ed.target.editorCommands.execCommand("fontSize", false, "11pt");
});
}
tinymce/themes/advanced/skins/o2k7/content.css ajouter css:
#tinymce { font-size: 15px;}
une option est content_style où vous pouvez ajouter des css à l'éditeur.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
content_style: "div, p { font-size: 15px; }"
});
Malheureusement, vous ne pouvez pas définir body sans !important en raison de l'ordre dans lequel ils ont réglé le css.
de plus, Je ne permets pas aux gens de changer la taille de la police - et cela va probablement déraper.
cela m'a aidé à changer la taille' par défaut ' comme vu, mais vous devez être prudent si vous laissez les gens changer la taille de police après cela.
Pour moi, ce petit et dirty approach était tout ce dont j'avais besoin parce que le HTML que je suis en train d'éditer est super simple.
il suffit d'éditer
tinymce/themes/advanced/skins/o2k7 / content.css
et changer de taille de police à cette ligne:
body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}
pour autant que je sache, TinyMCE hérite de la taille de police définie pour la balise parent par exemple<body> la balise
Voici comment le faire sans codage
- utilisez le plugin 'TinyMCE Advanced'
- l'Activer dans les paramètres.
instructions plus détaillées ici.