Fermer

septembre 8, 2025

Édition de texte intelligent Kendo UI pour jQuery: nouvelle fonctionnalité d’invite d’IA

Édition de texte intelligent Kendo UI pour jQuery: nouvelle fonctionnalité d’invite d’IA


Avec la nouvelle intégration d’invite AI, l’interface utilisateur de Kendo pour l’éditeur JQuery est maintenant un assistant d’écriture intelligent qui peut aider vos utilisateurs à mieux écrire, plus rapidement et avec plus de confiance.

Les utilisateurs Web modernes se sont habitués aux interfaces intelligentes qui fournissent une assistance contextuelle. À mesure que la technologie de l’IA devient plus répandue dans les applications quotidiennes, les utilisateurs s’attendent à ce que leurs outils d’édition offrent plus que le formatage de base; Ils veulent des suggestions de grammaire, des améliorations de contenu et une aide à l’écriture construite directement dans leur flux de travail.

Le progrès Kendo UI pour l’éditeur jQuery a été un composant WYSIWYG (ce que vous voyez est ce que vous obtenez) pour l’édition de texte riche en applications Web. Avec l’ajout récent de Vous intégration, les développeurs peuvent désormais offrir aux utilisateurs une assistance d’écriture intelligente directement Dans leur interface d’édition, y compris la correction de la grammaire en temps réel, les suggestions de contenu et les améliorations de texte consciente du contexte.

Dans cet article, nous allons parcourir la configuration de l’éditeur, puis montrer comment implémenter les nouvelles fonctionnalités alimentées par l’IA qui améliorent l’expérience d’édition.

Kendo UI pour l’éditeur jQuery

Avant de plonger dans la magie de l’IA, assurons-nous que nous ayons les bases. Si vous êtes nouveau dans jqueryc’est une bibliothèque JavaScript classique qui facilite le travail avec le DOM, gérer les événements et créer des pages Web interactives. Kendo UI pour jQuery s’appuie sur cela, vous donnant une suite de composants d’interface utilisateur polis, y compris le Éditeur.

1. La structure HTML

Tout d’abord, configurons une page HTML simple. Nous utiliserons les liens CDN, nous n’avons donc pas besoin d’installer quoi que ce soit localement:

<!DOCTYPE html>
<html>
<head>
    <title>Kendo UI Editor Example</title>
    
    <link href="https://kendo.cdn.telerik.com/themes/11.0.2/default/default-main.css" rel="stylesheet" />
</head>
<body>
    <textarea id="editor" rows="10" cols="30" style="width:100%; height:300px"></textarea>

    
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    
    <script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
</body>
</html>

Nous ajoutons la feuille de styles de thème Kendo UI, la bibliothèque JQuery et le pack complet de Kendo UI JavaScript. Cela nous donne une page de base avec un <textarea> que nous allons bientôt devenir un éditeur de texte riche.

Zone de texte de l'éditeur de jQuery

2. Initialisation de l’éditeur avec jQuery

Maintenant, donnons vie à notre éditeur. Nous utiliserons jQuery pour sélectionner le TextArea et initialiser l’éditeur d’interface utilisateur de Kendo. Ajoutons ce script après que notre Kendo UI JS inclut:

<script>
$(document).ready(function() {
    $("#editor").kendoEditor({
        tools: [
            "undo", "redo",
            "formatting",
            "bold", "italic", "underline",
            "foreColor", "backColor",
            "insertUnorderedList", "insertOrderedList",
            "justifyLeft", "justifyCenter", "justifyRight",
            "createLink", "unlink",
            "insertImage",
            "tableWizard"
        ]
    });
});
</script>

Voici ce qui se passe:

  • Nous attendons que le Dom soit prêt (Classic jQuery Move!)
  • Nous sélectionnons le #editor TextArea et appel .kendoEditor()
  • Le tools Array définit les boutons de la barre d’outils disponibles

Juste avec cela seul, nous avons un éditeur de texte riche en croix entièrement fonctionnel avec des outils de formatage, des listes, des liens, des images et une prise en charge de la table!

Style de base de l'éditeur jQuery

Intégration AI: votre assistant d’écriture intelligent

Maintenant, pour la partie amusante: ajoutons des intelligences d’IA à notre éditeur! Avec la nouvelle fonctionnalité d’invite d’IA, vos utilisateurs peuvent obtenir une correction de grammaire en temps réel, des suggestions de contenu, une complétion automatique et plus encore, tous alimentés par des modèles avancés d’apprentissage automatique.

Nous allons construire l’intégration AI étape par étape afin que vous puissiez voir exactement comment chaque pièce s’intègre.

1. Ajouter un dompurify pour une sortie AI sûre

Étant donné que le contenu généré par l’IA peut inclure HTML, c’est une bonne idée de le désinfecter avant de s’afficher. Nous utiliserons Doppurifier Pour cela et ajoutez-le via CDN:

<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.5/dist/purify.min.js"></script>

2. Ajouter un bouton de barre d’outils personnalisé

Amélilons notre barre d’outils d’éditeur avec un bouton personnalisé qui bascule le volet d’invite AI. Voici comment nous pouvons l’ajouter à la configuration de votre éditeur existant:

$("#editor").kendoEditor({
    tools: [
        {
          icon: "sparkles",
          rounded: "full",
          name: "toggle-ai-toggle",
          attributes: { "class": "k-button-toggle-ai-prompt" },
          exec: function(e) {
              var editor = $("#editor").data("kendoEditor");
              let aiPromptSplitter = editor.aiPromptSplitter;
              let aiPromptPane = aiPromptSplitter.element.find(".k-prompt.k-pane");
              aiPromptSplitter.toggle(aiPromptPane);
              let iconElement = $(e.target).closest(".k-button").find(".k-icon");

              
              if (iconElement.hasClass("k-svg-i-sparkles")) {
                  kendo.ui.icon(iconElement, { icon: "chevron-left" });
              } else {
                  kendo.ui.icon(iconElement, { icon: "sparkles" });
              }
          }
      },
      
    ]
});

Avec ce code, nous verrons maintenant un bouton de la barre d’outils Sparkles dans notre éditeur. Le exec La fonction gérera le bascule du volet AI et les icônes de commutation, mais cela ne fonctionnera pas encore car nous n’avons pas configuré l’intégration AI.

3. Configurer l’intégration de base AI

Maintenant, ajoutons la configuration AI de base. Nous spécifierons le point de terminaison du service AI et configurerons le volet AI:

$("#editor").kendoEditor({
    
    ai: {
        service: {
            url: '/kendo-ui/aichatcompletion',
            headers: {
                "X-Api-Key": "YOUR_API_KEY"
            }
        },
        aiPrompt: {
            showOutputSubtitleTooltip: true,
            encodedPromptOutputs: false,
            promptResponse: function(e) {
                let output = e.output.output;
                if (window.DOMPurify) {
                    e.output.output = DOMPurify.sanitize(output, { USE_PROFILES: { html: true } });
                }
            }
        },
        pane: {
            size: "400px",
            collapsible: true,
            collapsed: true
        }
    }
});

Avec cette configuration, les utilisateurs peuvent maintenant cliquer sur le bouton Sparkles pour ouvrir le volet AI et avoir des conversations en forme libre avec l’IA sur leur contenu. Ils peuvent poser des questions, demander des améliorations ou obtenir des suggestions d’écriture en tapant directement dans l’interface de l’invite AI.

Éditeur jQuery avec panneau AI

4. Ajouter des commandes AI pour les tâches communes

Amélilons l’intégration de l’IA avec des commandes prédéfinies qui répondent aux besoins d’écriture courants. Nous ajouterons un commands tableau à notre configuration AI:

$("#editor").kendoEditor({
    
    ai: {
        
        commands: [
            {
                id: "rewrite",
                text: "Rewrite",
                icon: "arrow-rotate-cw",
                prompt: (selection) => `Rewrite the selected text while preserving its original meaning and intent.\n\nSelected Text:\n${selection}`
            }
        ],
        
    }
});

Désormais, les utilisateurs peuvent sélectionner du texte et utiliser des commandes prédéfinies pour les tâches d’édition courantes. La commande de réécriture aide les utilisateurs à actualiser leur contenu tout en maintenant la signification d’origine – parfaite pour améliorer la clarté ou trouver différentes façons d’exprimer la même idée.

AI Commands Demo

5. Activer les invites en ligne d’inhalé

Enfin, nous pouvons même ajouter une fonctionnalité d’invite AI en ligne en définissant inlineAIPrompt: true:

$("#editor").kendoEditor({
    
    ai: {
        
        inlineAIPrompt: true,
        
    }
});

Avec les invites en ligne activées, les utilisateurs peuvent simplement sélectionner n’importe quel texte dans l’éditeur et accéder instantanément aux suggestions AI sans ouvrir le volet dédié. Cela crée une expérience d’édition transparente et consciente du contexte où l’assistance IA est disponible exactement quand et où il est nécessaire.

Demo invite en ligne AI

En quelques étapes, nous avons transformé un éditeur de texte riche de base en un assistant d’écriture intelligent. L’interface utilisateur de Kendo pour l’intégration de l’IA de l’éditeur JQuery rend remarquablement simple d’ajouter des capacités AI avancées à vos applications, des conversations IA de forme libre aux commandes prédéfinies et aux invites en ligne.

Bien sûr, il y a beaucoup plus que vous pouvez configurer: commandes AI personnalisées, modèles d’invite avancés, options de tonalité supplémentaires, ajustements de longueur, fonctionnalités de traduction et paramètres de comportement AI affinés. La fondation que nous avons construite ici vous donne un point de départ simple pour explorer ces capacités avancées.

Conclure

L’interface utilisateur de Kendo pour l’éditeur de jQuery a toujours été un choix solide pour créer des expériences de texte riches. Avec la nouvelle intégration de l’invite AI, c’est maintenant un assistant d’écriture intelligent qui peut aider vos utilisateurs à écrire mieux, plus rapidement et avec plus de confiance.

Vous voulez le voir en action ou approfondir les détails? Découvrez le Demo et documentation de l’éditeur JQuery AI pour des exemples en direct et un code source. Vous pouvez également expérimenter les fonctionnalités d’IA vous-même en les essayant dans le Kendo ui dojooù vous pouvez tester et modifier les exemples de code en temps réel.

Ou essayez-le vous-même, gratuit pendant 30 jours.

Essayez Kendo UI pour jQuery

Le meilleur outil 2023 pour ta croissance Instagram !



Source link