Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Contribuez à ce guideSignaler un problème

Le but de cet article est de vous familiariser avec CKEditor 4 en deux minutes.

Installation à partir du registre npm

À installer le package officiel de CKEditor 4 npm Cours:

npm install ckeditor4

Pour plus d’informations, consultez les instructions ci-dessous Installez CKEditor 4 avec les gestionnaires de packages.

Télécharger depuis le site officiel

Télécharger

Visiter l’officier Télécharger CKEditor 4 Page? ˅. Pour une installation de production, nous vous recommandons de choisir le réglage standard Paquet standard et cliquez sur Télécharger Bouton pour l’obtenir .zip Fichier d’installation. Si vous souhaitez essayer d’autres fonctions de l’éditeur, vous pouvez les télécharger package complet plutôt.

Site de téléchargement de CKEditor 4

déballage

Décompressez (extrayez) le fichier téléchargé .zip Une archive pour ckeditor4 Répertoire à la racine de votre site Web.

Utilisation du CDN

Au lieu de télécharger et d’héberger CKEditor 4 sur votre serveur, vous pouvez également utiliser la version CDN. Aller à CDN officiel de CKEditor Page pour plus de détails.

Intégration d’angle CKEditor 4

Pour installer le composant officiel CKEditor 4 Angular, procédez comme suit:

npm install ckeditor4-angular

Par défaut, le dernier CKEditor 4 est récupéré automatiquement Standard tout préréglé via CDN. Vérifier la Manuel d’intégration d’angle comment il peut être modifié et comment configurer le composant en fonction de vos besoins.

Intégration CKEditor 4 React

Pour installer le composant officiel CKEditor 4 React, procédez comme suit:

npm install ckeditor4-react

Par défaut, le dernier CKEditor 4 est récupéré automatiquement Standard tout préréglé via CDN. Vérifier la Réponse manuelle d’intégration comment il peut être modifié et comment configurer le composant en fonction de vos besoins.

Intégration CKEditor 4 Vue

Pour installer le composant officiel CKEditor 4 Vue, procédez comme suit:

npm install ckeditor4-vue

Par défaut, le dernier CKEditor 4 est récupéré automatiquement Standard tout préréglé via CDN. Vérifier la Afficher le manuel d’intégration comment il peut être modifié et comment configurer le composant en fonction de vos besoins.

Essaie

CKEditor 4 comprend un exemple que vous pouvez utiliser pour vérifier que l’installation a réussi, ainsi que des idées et des références à d’autres ressources.

Ouvrez la page suivante dans le navigateur pour voir l’exemple:
http://<your site="">/ckeditor4/samples/index.html

Si vous utilisez le package npm, ouvrez ce qui suit:
http://<your site="">/node_modules/ckeditor4/samples/index.html

Exemple de CKEditor 4 disponible dans chaque package d'installation

De plus, sur la page d’exemple de l’éditeur, vous pouvez cliquer sur le bouton Configurateur de la barre d’outils pour ouvrir un outil pratique qui vous permet Personnalisez la barre d’outils à vos besoins.

Ajouter CKEditor 4 à votre page

Si l’exemple fonctionne correctement, vous pouvez créer votre propre site à l’aide de CKEditor 4.

Commencez par créer une page HTML simple avec un <textarea> Élément dedans. Vous devez alors faire deux choses:

  1. Inclure le <script> Élément que CKEditor 4 charge sur votre page.
  2. Utilisez le CKEDITOR.replace() Méthode pour remplacer l’existant <textarea> Élément avec CKEditor 4.

Consultez l’exemple suivant:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor 4</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="../ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor 4.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor 4
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>

Lorsque vous avez terminé, ouvrez votre page de test dans le navigateur.

Toutes nos félicitations! Vous avez installé et utilisé CKEditor 4 sur votre propre site en un rien de temps!

CKEditor 4 a été ajouté à votre page d'exemple

Prochaines étapes

Jouez un peu plus avec l’échantillon. Essayez de modifier votre configuration comme suggéré pour l’adapter. Et lorsque vous êtes prêt à plonger un peu plus dans CKEditor 4, voici quelques choses que vous pouvez essayer:

  1. Vérifier la Définir la configuration Articles pour voir comment personnaliser l’éditeur en fonction de vos besoins.
  2. Se familiariser avec Filtre de contenu avancé. C’est un outil utile qui adapte le contenu inséré dans CKEditor 4 aux fonctions activées et filtre le contenu non autorisé.
  3. Changez votre barre d’outils pour n’inclure que les fonctionnalités dont vous avez besoin. Le configurateur de barre d’outils visuelle utile se trouve directement dans votre exemple d’éditeur.
  4. En savoir plus sur les fonctionnalités de CKEditor 4 dans le Aperçu des fonctions Section.
  5. Visiter le CKEditor 4 exemples à voir énorme collection d’exemples d’éditeurs fonctionnels Présente ses fonctionnalités avec le code source disponible pour visualisation et téléchargement.
  6. Cherche le Dépôt de modules complémentaires pour certains plugins ou skins supplémentaires.
  7. Utiliser Constructeur en ligne pour créer votre build CKEditor 4 personnalisé.
  8. Cherche le Guide du développeur Plus d’idées pour CKEditor 4 et rejoindre la communauté CKEditor sur Débordement de paquets pour discuter de tout ce qui concerne CKEditor avec d’autres développeurs!



Source link

Recent Posts