Créez un éditeur de texte enrichi en utilisant PHP et CKEditor

Avec l'utilisation généralisée des applications Web, la création d'éditeurs de texte enrichi est devenue de plus en plus courante. CKEditor est largement reconnu comme l'un des meilleurs éditeurs de texte enrichi en raison de sa bonne personnalisation et de sa facilité d'utilisation. Cet article explique comment créer un éditeur de texte enrichi à l'aide de PHP et CKEditor.

Introduction à CKEditor

CKEditor est un éditeur de texte riche open source multiplateforme implémenté via JavaScript. Il fournit une barre d'outils intuitive et facile à comprendre, comprenant les styles de police, le formatage, l'insertion d'images et de tableaux, les paramètres de liens, la vérification orthographique, etc. Les principales fonctionnalités de CKEditor incluent la personnalisation, l'extensibilité facile et la compatibilité entre navigateurs, ce qui en fait l'un des meilleurs choix pour créer des éditeurs de texte enrichi.

Avant d'utiliser CKEditor

Tout d'abord, assurez-vous d'avoir un environnement PHP sur votre site Web. Sinon, configurez-le en installant le serveur Apache, PHP et MySQL. Si vous disposez déjà de ces logiciels, vous pouvez commencer à utiliser CKEditor.

Étape 1 : Téléchargez CKEditor

Tout d'abord, téléchargez la dernière version de CKEditor depuis le site officiel de CKEditor (http://ckeditor.com).

Étape 2 : Créez une page HTML

Créez un fichier nommé index.html dans le gestionnaire de fichiers, puis ajoutez le contenu suivant dans le fichier :

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
87ca51f299986147ccf2c0067ae9ef68
6c04bd5ca3fcae76e30b72ad730ca86d

<textarea id="editor1" name="editor1"></textarea>
<script>
    CKEDITOR.replace( 'editor1' );
</script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

La ligne 1 déclare le type de document HTML.
La ligne 2 est le titre de la page HTML.
La ligne 3 présente le fichier JavaScript de CKEditor.
La ligne 6 crée un élément 4750256ae76b6b9d804861d8f69e79d3, qui sera utilisé comme zone d'édition.
La ligne 7 initialise CKEditor.

Étape 3 : Téléchargez le fichier CKEditor

Extrayez le fichier CKEditor téléchargé dans le répertoire Web de votre serveur. Il est préférable de stocker le fichier CKEditor dans le même répertoire que index.html.

Étape 4 : Testez l'éditeur de texte enrichi

Ouvrez le fichier index.html dans le navigateur, vous verrez un éditeur de texte avec CKEditor, vous pouvez modifier le texte et le formater à votre guise.

Obtenez des données de CKEditor en utilisant PHP

Maintenant, vous avez créé avec succès un éditeur de texte enrichi en utilisant CKEditor. L'étape suivante consiste à voir comment obtenir des données de CKEditor en utilisant PHP. Veuillez suivre les étapes ci-dessous :

Étape 1 : Modifier la page HTML

Ajouter un formulaire de soumission dans index.html pour envoyer le contenu édité par l'éditeur de texte enrichi vers le fichier PHP. La page HTML modifiée ressemble à ceci :

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>使用PHP和CKEditor创建富文本编辑器</title>
<script src="ckeditor/ckeditor.js"></script>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<form action="submit.php" method="POST">
    <textarea id="editor1" name="editor1"></textarea>
    <input type="submit" value="提交">
</form>
<script>
    CKEDITOR.replace( 'editor1' );
</script>

36cc49f0c466276486e50c850b7e4956
< ; /html>

Les lignes 9 à 11 sont les formulaires ajoutés. Il comporte un élément 4750256ae76b6b9d804861d8f69e79d3, qui est la zone d'édition, ainsi qu'un bouton d'envoi.
La ligne 12 initialise CKEditor à l'aide de JavaScript.

Étape 2 : Créer un fichier submit.php

Créez un fichier nommé submit.php dans le gestionnaire de fichiers, puis ajoutez le contenu suivant au fichier :

51739408a43bab8f896fbda2bd66903c

Ce programme PHP simple sert simplement à montrer comment obtenir des données de CKEditor. Il vérifie le tableau $_POST pour voir si les données nommées "editor1" sont déjà définies et, si c'est le cas, les affiche.

Étape 3 : Testez le fichier PHP

À l'étape d'utilisation de CKEditor pour créer un éditeur de texte enrichi, ouvrez index.html et saisissez du texte, puis cliquez sur le bouton Soumettre. Après la soumission, vous verrez le contenu saisi dans submit.php.

Conclusion

Créer un éditeur de texte enrichi à l'aide de PHP et CKEditor est une tâche simple mais importante qui peut vous aider à créer un éditeur de texte hautement personnalisé pour répondre aux besoins de votre site Web. Au fil du temps, vous pourrez librement mettre à niveau et étendre cet éditeur en fonction de vos besoins. J'espère que cet article vous aidera à créer un éditeur de texte enrichi utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!