I actually have an issue with tinymce and the style_formats.
I created a css file and add with content_css function. Then i apply my style with style_formats like this :
tinymce.init({
selector: "textarea",
paste_text_sticky: true,
paste_text_sticky_default: true,
paste_as_text: true,
forced_root_block: "",
force_br_newlines: true,
force_p_newlines: false,
menubar: false,
height: 700,
schema: 'html5',
min_height: "700",
max_height: 3000,
language: "fr_FR",
content_css: 'stylesheets/SITE/aparte_generic.css?'+ new Date().getTime(),
style_formats: [
{
title: 'Headers', items: [
{
title: 'H2', items: [
{title: "H2 Corail", inline: 'h2', classes: '_aparte_h2_corail', wrapper: true},
{title: "H2 Violine", inline: 'h2', classes: '_aparte_h2_violine', wrapper: true},
{title: "H2 Prune", inline: 'h2', classes: '_aparte_h2_prune', wrapper: true},
{title: "H2 Gris", inline: 'h2', classes: '_aparte_h2_grey', wrapper: true}
]
},
{
title: 'H3', items: [
{title: "H3 Corail", inline: 'h3', classes: '_aparte_h3_corail', wrapper: true},
{title: "H3 Violine", inline: 'h3', classes: '_aparte_h3_violine', wrapper: true},
{title: "H3 Prune", inline: 'h3', classes: '_aparte_h3_prune', wrapper: true},
{title: "H3 Gris", inline: 'h3', classes: '_aparte_h3_grey', wrapper: true}
]
}
]
},
{
title: 'Bold', items: [
{title: "Bold corail", inline: 'strong', classes: '_bold_corail', wrapper: true},
{title: "Bold gris", inline: 'strong', classes: '_bold_grey', wrapper: true},
{title: "Bold rouge", inline: 'strong', classes: '_bold_red', wrapper: true},
{title: "Bold prune", inline: 'strong', classes: '_bold_prune', wrapper: true}
]
},
{
title: 'Autres', items: [
{title: "Block fond", block: 'div', classes: '_block_background', wrapper: true},
{title: "Surligné Corail", inline: 'span', classes: '_surligne_corail', exact: true},
{title: "Surligné Prune", inline: 'span', classes: '_surligne_prune', exact: true},
{title: 'Texte arrow Prune', inline:'span', classes: '_inline_arrow_prune'}
]
}
],
link_class_list: [
{title: 'Lien surligné', value: '_link_surligne'},
{title: 'Lien avec fond', value: '_link_background'}
],
table_class_list: [
{title: '', value: ''},
{title: 'full width', value: '_table_width'}
],
plugins: [
"advlist autolink lists link image charmap preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste jbimages "
],
toolbar: "code | undo redo | removeformat | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | table | bullist numlist outdent indent | link image jbimages | fullscreen",
relative_urls: false
});
The classes are apply good, except that tinymce not take the good font i load ( inside the css file ) by from myfonts.net like that
@import url("//hello.myfonts.net/count/3338780");
@font-face {font-family: 'B-Regular';src: url('../../fonts/webfonts/333780_0.eot');src: url('../../fonts/webfonts/3338780_0_0.eot?#iefix') format('embedded-opentype'),url('../../fonts/webfonts/3338780_0_0.woff2') format('woff2'),url('../../fonts/webfonts/3338780_0_0.woff') format('woff'),url('../../fonts/webfonts/3338780_0_0.ttf') format('truetype');}
The font is correctly apply everywhere except inside tinymce, how can i visualize the good font-face inside it properly ?
Thanks a lot by advance