Configuration de TinyMCE pour l'importation de formules MathType en format vectoriel

Pour intégrer l'édition de formules MathType dans TinyMCE tout en conservant leur rendu vectoriel, il est nécessaire d'implémenter une solution qui capture les formules et les convertit en un format web compatible comme MathML. Cette approche garantit que les formules restent nettes à n'importe quelle échelle d'affichage.

Avantages des formules vectorielles

• Clarté indépendante de la résolution : Les formules vectorielles restent nettes sur tous les écrans.
• Éditées et stylisées : Elles peuvent être modifiées via CSS et restent accessibles.
• Compatibilité web : Le format MathML est suppporté par les navigateurs modernes.

Mise en œuvre du plugin TinyMCE

La structure du plugin permet d'ajouter un bouton dédié à l'insertion de formules. Le code ci-dessous montre comment enregistrer ce plugin dans TinyMCE.

// Enregistrement du plugin d'édition de formules pour TinyMCE
tinymce.PluginManager.add('formulaire_editor', function(editor, url) {
    // Ajouter un bouton dans la barre d'outils
    editor.ui.registry.addButton('formulaire_editor', {
        icon: 'math',
        tooltip: 'Insérer une formule MathType',
        onAction: function() {
            showDialogFormules(editor);
        }
    });

    // Fonction pour ouvrir la boîte de dialogue
    function showDialogFormules(editor) {
        editor.windowManager.open({
            title: 'Éditeur de formules MathType',
            width: 800,
            height: 600,
            body: {
                type: 'panel',
                items: [{
                    type: 'textarea',
                    name: 'zone_saisie_latex',
                    label: 'Code LaTeX de la formule',
                    multiline: true,
                    minHeight: 150
                }, {
                    type: 'htmlpanel',
                    name: 'apercu_formule',
                    html: '<div id="conteneur-apercu">L\'aperçu apparaîtra ici</div>'
                }]
            },
            buttons: [
                {
                    type: 'cancel',
                    text: 'Annuler'
                },
                {
                    type: 'submit',
                    text: 'Insérer',
                    primary: true
                }
            ],
            onSubmit: function(api) {
                var latexCode = api.getData().zone_saisie_latex;
                convertirEtInserer(editor, latexCode);
                api.close();
            }
        });
    }

    // Convertir le code LaTeX en MathML et l'insérer dans l'éditeur
    function convertirEtInserer(editor, codeLatex) {
        // Appel API ou conversion côté client
        var baliseMathML = transformerLatexEnMathML(codeLatex);
        if (baliseMathML) {
            editor.insertContent(baliseMathML);
        } else {
            console.error('Échec de la conversion de la formule LaTeX');
        }
    }

    // Fonction de conversion (exemple simplifié)
    function transformerLatexEnMathML(codeLatex) {
        // Logique de conversion - peut utiliser une bibliothèque comme KaTeX ou MathJax
        try {
            // Implémentation réelle dépendrait d'une bibliothèque
            var conteneur = document.createElement('div');
            conteneur.innerHTML = '<math>' + encoderEnMathML(codeLatex) + '</math>';
            return conteneur.innerHTML;
        } catch (erreur) {
            console.erreur('Erreur de conversion LaTeX:', erreur);
            return null;
        }
    }

    function encoderEnMathML(codeLatex) {
        // Logique d'encodage spécifique - placeholder pour l'implémentation réelle
        return '<mi>' + codeLatex + '</mi>';
    }
});

Traitement côté serveur

Le serveur doit pouvoir recevoir les formules LaTeX et les convertir en MathML. L'exemple suivant montre un contrôleur API en C# pour le traitement.

using Microsoft.AspNetCore.Mvc;
using System.Text.RegularExpressions;

namespace ControleursAPI
{
    [ApiController]
    [Route("api/formules")]
    public class ControleurFormules : ControllerBase
    {
        // Endpoint pour convertir du LaTeX en MathML
        [HttpPost("convertir")]
        public IActionResult ConvertirLatex([FromBody] ModeleRequeteFormule requete)
        {
            if (string.IsNullOrWhiteSpace(requete.CodeLatex))
            {
                return BadRequest("Le code LaTeX ne peut pas être vide.");
            }

            string resultatMathML = EffectuerConversionMathML(requete.CodeLatex);
            return Ok(new { mathml = resultatMathML });
        }

        // Logique de conversion
        private string EffectuerConversionMathML(string codeLatex)
        {
            // Utilisation d'une bibliothèque comme MathJax ou conversion personnalisée
            // Ceci est un exemple simplifié
            var expressionNettoyee = NettoyerExpressionLatex(codeLatex);
            return EncoderEnMathML(expressionNettoyee);
        }

        private string NettoyerExpressionLatex(string expression)
        {
            // Supprimer les commandes LaTeX non supportées et normaliser
            var expressionPropre = Regex.Replace(expression, @"\\\\(?!\\\\)", " ");
            return expressionPropre.Trim();
        }

        private string EncoderEnMathML(string expression)
        {
            // Encodage en structure MathML de base
            // Note: Une implémentation réelle serait plus complexe
            return $@"<math http:="" xmlns="">
                <mrow>
                    <mi>{expression}</mi>
                </mrow>
            </math>";
        }
    }

    // Modèle pour la requête
    public class ModeleRequeteFormule
    {
        public string CodeLatex { get; set; }
    }
}

Configuration et déploiement

Pour que la solution fonctoinne, plusieurs éléments doivent être configurés :

1. Inclure le plugin JavaScript dans le répertoire plugins de TinyMCE.
2. Ajouter le plugin formulaire_editor à la configuration de TinyMCE dans l'initialisation.
3. Déployer l'API de conversion sur le serveur et s'assurer que l'endpoint est accessible.
4. Configurer les en-têtes CORS si l'API est sur un domaine différent de l'éditeur.

Exemple d'initialisation TinyMCE

tinymce.init({
    selector: '#editeur',
    plugins: 'formulaire_editor lien image table',
    toolbar: 'formulaire_editor | bold italic | bullist numlist',
    // Autres configurations...
});

Les formules insérées via cette méthode sont rendues comme des éléments MathML dans le DOM, garantissant ainsi leur nature vectorielle. Elles peuvent être stylisées avec CSS et conservent leur qualité indépendamment du zoom du navigateur.