Illustrator script with a font drop-down menu and font preview in the user interface.

[Jeffosaure]

Is it possible to show a preview about selected font in UI with jsx for Illustrator ?
I share my script but it doesn't work

My script :

var doc = app.activeDocument;

var textObj = doc.selection[0];

if (textObj && textObj instanceof TextFrame) {

    // Créer une fenêtre de dialogue

    var dialog = new Window("dialog", "Script V1.0 - 2023.12.08");

    // Taille de la UI

    dialog.size = [340, 500];

var panelBold = dialog.add("panel");

panelBold.orientation = "column";

var imageFileBold = new File("C:/Program Files/Adobe/Adobe Illustrator 2024/Presets/fr_FR/Scripts/Icons/Bold.png");

var imageBold = panelBold.add("image", undefined, imageFileBold);

imageBold.alignment = ["left", "center"];  // Aligner l'image à gauche

var titleText1 = panelBold.add("statictext", undefined, "Choisir la police pour le Bold");

titleText1.graphics.foregroundColor = titleText1.graphics.newPen(titleText1.graphics.PenType.SOLID_COLOR, [0.6, 0.745, 0.129], 1); // Vert Diadem

titleText1.alignment = "left";

var fontListForBold = getFontList();

var dropdownB = panelBold.add("dropdownlist", undefined, fontListForBold);

dropdownB.selection = 0;

// Ajouter la zone de texte pour la prévisualisation

var previewText = panelBold.add("edittext", undefined, "Font Preview");

previewText.graphics.font = ScriptUI.newFont("Helvetica", "BOLD", 16);

previewText.minimumSize.width = 200;

previewText.minimumSize.height = 30;

previewText.maximumSize.width = 200;

previewText.maximumSize.height = 30;

// Écouter les changements dans la liste déroulante

dropdownB.onChange = function () {

  var selectedFont = dropdownB.selection.text;

  previewText.graphics.font = ScriptUI.newFont(selectedFont, "BOLD", 16);

};

    // Ajouter les boutons OK et Annuler

    var buttonGroup = dialog.add("group");

    var okButton = buttonGroup.add("button", undefined, "OK");

    var cancelButton = buttonGroup.add("button", undefined, "Annuler");

    // Fonction d'événement pour le bouton OK

    okButton.onClick = function () {

        var selectedFontForBold = dropdownB.selection.text;

        var selectedFontForItalic = dropdownI.selection.text;

        var selectedFontForUnderline = dropdownU.selection.text;

        applyFontToSelection(textObj, selectedFontForBold, selectedFontForItalic, selectedFontForUnderline);

        dialog.close();

    };

    // Fonction d'événement pour le bouton Annuler

    cancelButton.onClick = function () {

        dialog.close();

    };

    // Afficher la fenêtre de dialogue

    dialog.show();

} else {

    alert("Sélectionnez un cadre texte pour utiliser ce script.");

}

// Fonction pour appliquer la police à la sélection

function applyFontToSelection(textObj, fontForBold, fontForItalic, fontForUnderline) {

    var textContent = textObj.contents;

    // Remplace <b> par le style gras

    textContent = textContent.replace(/<b>(.*?)<\/b>/g, function (match, p1, offset) {

        applyFontToRange(textObj, offset + 3, offset + p1.length + 3, fontForBold, false);

        return match;

    });

}

// Fonction pour appliquer la police à une plage de texte

function applyFontToRange(textObj, start, end, font, isUnderline) {

    for (var k = start; k <= end; k++) {

        var extractedTextRange = textObj.characters[k];

        extractedTextRange.characterAttributes.textFont = app.textFonts.getByName(font);

        if (isUnderline) {

            extractedTextRange.characterAttributes.underline = true; // Ajout du soulignement

        }

    }

}

// Fonction pour obtenir la liste des polices disponibles sur le système

function getFontList() {

    var fonts = app.textFonts;

    var fontList = [];

    for (var i = 0; i < fonts.length; i++) {

        fontList.push(fonts[i].name);

    }

    return fontList;

}

[m1b]

Hi @Jeffosaure, unfortunately in ScriptUI in Illustrator we can't set fonts. This line:

previewText.graphics.font = ScriptUI.newFont("Helvetica", "BOLD", 16);

doesn't work. It used to work, many, many years ago, but not since.

The best you could do is to generate a textFrame with your preview text and render it to the document. You can use Document.activeView which will give you a View object, which has a bounds and center property. Not sure if that's workable... just an idea.

- Mark

[Jeffosaure]

I try it but not workable

II figure if Illustrator can display previews, there's no reason why we can't.
It should even be possible to do so in the drop-down menu, since that's how Illustrator does it.

[Jeffosaure]

I show this but how do that with Illustrator and fonts sytem ?

https://www.youtube.com/watch?v=3onCZg4z-Mg

[iLLMonkey]

He is using CEP/ Extension. which is basically a website in an illustrator panel. It can do a lot more UI stuff than ScriptUI.

[Jeffosaure]

Hi iLLMonkey
Thxs for your answer

I understand that I need other things
So, what do I need?

What are all the things I need to do this ?
It's my grail quest 😛

[iLLMonkey]

I can help you get started the same way I did. I started with this video by the same guy:

https://www.youtube.com/watch?v=1MirbjuLgSI 

I can give you a few tips I wish I knew when I started. First of all, CSInterface(); is the most important thing to understand, you're using this to dive into and execute ExtendScript functions. Once you understand its method "evalScript" and its callback function you're halfway there. So, CSInterface, evalScript, and evalScript->callback. You'll need to tie it all together with javascript/html and CSS. Good luck!