Ajouter une police dans HTLM Editor

Bonjour,

Est-il possible d’ajouter une nouvelle police dans le HTML Editor ?

Merci.
Version Simplicité :

[Platform]
Status=OK
Version=5.2.10
BuiltOn=2022-07-09 12:12
Git=5.2/3ba919c64f179a90280ab39e7c8dbc2b4bc2fcb8

Tu veux dire ajouter une police supplémentaire à l’éditeur HTML = TinyMCE ?

Si oui c’est à priori possible, cf. Add a custom font family in TinyMCE

Coté Simplicité, il est possible de customiser les options de TinyMCE via le param système HTML_EDITOR_PARAMS, sachant que les options par défaut sont:

{
		plugins: [
			'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor',
			'searchreplace', 'visualblocks', 'code', 'fullscreen',
			'insertdatetime', 'media', 'table', 'help', 'wordcount', 'emoticons', 'directionality'
		],
		toolbar: 'bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | emoticons fullscreen code',
		menubar: 'edit insert format table tools',
		statusbar: false,
		paste_data_images: true, // paste image as base64
		paste_as_text: true, // paste rich text content as plain text (e.g. from MS Word)
		browser_spellcheck: true, // spell check
		contextmenu: false // no context menu (needed for spell check on rigth click, otherwise ctrl + right click is to be used)
	}

Oui c’est bien ça, je vais tester.
Merci David.

Bonjour,

J’ai ajouté le paramètre système HTML_EDITOR_PARAMS pour configurer le TinyMCE.
Voici la configuration du paramètre selon leur doc:

{
   "plugins":[
      "advlist",
      "autolink",
      "lists",
      "link",
      "image",
      "charmap",
      "preview",
      "anchor",
      "searchreplace",
      "visualblocks",
      "code",
      "fullscreen",
      "insertdatetime",
      "media",
      "table",
      "help",
      "wordcount",
      "emoticons",
      "directionality"
   ],
   "toolbar":"italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | emoticons fullscreen code",
   "menubar":"edit insert format table tools",
   "statusbar":false,
   "paste_data_images":true,
   "paste_as_text":true,
   "browser_spellcheck":true,
   "contextmenu":false,
   "font_formats":"Webb Ellis Cup",
   "content_style":"@font-face { font-family: 'Webb Ellis Cup'; src: url('content/responsive/WebbEllisCup.woff2') format('woff2'), url('content/responsive/WebbEllisCup.woff') format('woff'), url('content/responsive/WebbEllisCup.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } body { font-family: Webb Ellis Cup; }"
}

J’ai ajouté la police ‘Webb Ellis Cup’ dans un File Set.En testant avec un objet externe, j’ai pu ajouter la police sur un texte en l’appelant dans le CSS de la disposition responsive5.

Le contenu de la ressource CSS:

@font-face {
    font-family: 'Webb Ellis Cup';
    src: url('content/responsive/WebbEllisCup.woff2') format('woff2'),
        url('content/responsive/WebbEllisCup.woff') format('woff'),
        url('content/responsive/WebbEllisCup.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Mais je n’arrive pas à le faire fonctionner dans l’éditeur TinyMCE.

C’est dans le content_style où j’appelle la police dans le param sys de TinyMCE. Dans la doc de TinyMCE ils disent qu’il est nécessaire d’ajouter la police partout où l’éditeur est appelé pour qu’il fonctionne correctement.

Peut être en mettant un / au debut des URL des fichiers de la police ?

Sinon, à quel endroit la doc TinyMCE dit elle de mettre les polices additionnelles ? Je pose la question car il vous est toujours possible de builder une image Docker custom en ajoutant des fichiers addtionnels là où il faut. Dans nos images Docker les composants de TinyMCE sont dans /usr/local/tomcat/webapps/ROOT/scripts/tinymce.

J’ai essayé d’ajouter un / mais sans succès.

Pour la doc c’est dans le lien que vous avez posté. cf. Add a custom font family in TinyMCE

Je ne pense pas que nous ayons besoin de fichiers supplémentaires puisque je peux parfaitement appeler la police ailleurs.

Oui le fait de mettre les fichiers en ressource CONTENT_* les rends disponibles dans le docroot (dans /content) mais ici TinyMCE doit ne pas réussir à les localiser, d’où mes suggestions de:

  • mettre le / au debut des URLs pour lever l’ambiguité de la localisation de ces fichiers vu de TinyMCE
  • ou mettre les fichiers à un endroit “standard” pour TinyMCE via customisation de l’image Docker ou autre approche similaire

J’ai pu trouver le problème, il était lié au fait qu’il fallait mettre responsive5 au lieu de responsive dans l’url de la police.

url('content/responsive5/WebbEllisCup.woff2') format('woff2'),

et TinyMCE a pu localiser les fichiers.

Merci.

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.