Tourner le TEXTAREA en éditeur (WYSIWYG | CKEditor)

Voici une aide rapide pour vous permet d’intégrer CKEditor avec vos applications Web en seulement trois étapes.

Présentation

Tournez votre Tags Zone de texte dans un éditeur de site Web n’est plus une tâche compliquée. Parmi les nombreux éditeurs que vous pouvez trouver sur Internet, Nous voyons l’utilisation de CKEditor. Voir l’éditeur en action dans ce DÉMO.

Installation

Télécharger la CKEditor dans http://ckeditor.com/download. La version utilisée dans ce Post a été 3.6.4, de 17 Juil 2012. Extraire le fichier ckeditor_3.6.4.zip avec votre demande. Un dossier CKEditor sera créé. Prêt, maintenant il suffit de faire l’appel dans votre code source!

Intégration

La CKEditor est une application JavaScript. Pour le lire, juste faire un simple appel à lui au sein de la Tags TÊTE de votre code source. Fait cela, l’API Javascript de la CKEditor sera déjà prêt à l’emploi. N’oubliez pas d’ajuster le chemin du fichier CKEditor.js dans le répertoire où vous avez décompressé.

Étape 1 – Effectuer l’appel à CKEditor
1
2
3
  <tête>
    <type de script="text/javascript" SRC="ckeditor/ckeditor.js"></script>
  </tête>
Étape 2 – Créer un champ TEXTAREA
1
2
3
  <corps>
    <Id de TextArea="editor1" nom="editor1">&Lt;p&GT;Valeur initiale.&Lt;/p&GT;</TextArea>
  </corps>
Étape 3 – État TEXTAREA (ID) sera remplacé par CKEditor
1
2
3
4
5
6
7
  <tête>
    <type de script="text/javascript">
      fenêtre de.OnLoad = fonction()  {
        CKEDITOR.remplacer( « editor1 » );
      };
    </script>    
  </tête>

Prêt, travaille déjà! Ne croyez pas? Enregistrer, quelle que soit la “F5” dans le navigateur et voyez par vous-même… le code complet ressemble à ceci:

Code complet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
  <tête>
    <titre>CKEditor</titre>
    <meta content="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <type de script="text/javascript">
      fenêtre de.OnLoad = fonction()  {
        CKEDITOR.remplacer( « editor1 » );
     };
    </script>
  </tête>
  <corps>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&Lt;p&GT;Valeur initiale.&Lt;/p&GT;</TextArea>
      <input type="submit" value="Submit" />
    </formulaire>  
  </corps>
</HTML>

Bien sûr, Maintenant, vous devez procéder aux adaptations que votre application, démarrage en définissant le action de votre formulaire, indiquant que la page permettra de récupérer et processus les données envoyées par la poste.

L’Article se termine ici, mais je vous laisse quelques perles de plus pour les curieux:

Conseils

(1) Aucun événement onload, avec la classe =”CKEditor”

Si vous assignez la classe “CKEditor” à votre TEXTAREA, Il sera automatiquement converti en un CKEditor, sans avoir besoin d’utiliser le script appelé par événement “OnLoad”, bien simple:

1
2
3
4
5
6
7
8
9
10
11
12
13
<HTML>
  <tête>
    <titre>CKEditor</titre>
    <contenu de Meta="text/html; charset = utf-8" http-EQUIV="content-type" />
    <type de script="text/javascript" SRC="ckeditor/ckeditor.js"></script>
  </tête>
  <corps>
    <action de formulaire="request.php" méthode="post">
      <TextArea Classe="ckeditor" ID="editor1" nom="editor1">&Lt;p&GT;Valeur initiale.&Lt;/p&GT;</TextArea>
      <type d’entrée.="submit" valeur="Submit" />
    </formulaire>  
  </corps>
</HTML>

(2) Saut de ligne de changement <p> par <BR />

J’ai remarqué deux moyens d’échanger P BR lorsque teclamos entrez. Le premier, a la valeur du paramètre enterMode avec la valeur 2, Depuis 1 = P, 2 = BR et 3 = DIV.

1
2
3
4
5
6
7
  <tête>  
    <type de script="text/javascript">
      fenêtre de.OnLoad = fonction() {
        CKEDITOR.remplacer( « editor1 », {enterMode: Nombre(2)} );
      };
    </script>
  </tête>

Ou alors, ouvrir le fichier config.js et définir quelque chose comme:

1
2
3
CKEDITOR.editorConfig = fonction( config ) {
  config.enterMode = CKEDITOR.ENTER_BR;
};

Dans ce cas, Lorsque vous tapez entrée, Nous avons les options:
CKEDITOR. ENTER_P – nouveau paragraphe P est créé;
CKEDITOR. Saut de ENTER_BR-ligne avec BR;
CKEDITOR. ENTER_DIV-nouveau bloc avec DIV est créé.

Vous recommandons de fermer et d’ouvrir le navigateur pour voir le résultat

Ce changement, parce qu’il peut être mis en cache! Si cela ne fonctionne toujours pas, nettoyer le cache de votre navigateur.

(3) Changer la couleur d’arrière-plan de la barre d’outils de CKEditor

Comme vous avez remarqué, Nous pouvons apporter des changements dans notre CKEditor donnant aux paramètres directement la CKEDITOR ou via le fichier config.js. Alors, Je vais démontrer qu’une des:

1
2
3
4
5
6
7
  <tête>  
    <type de script="text/javascript">
      fenêtre de.OnLoad = fonction() {
        CKEDITOR.remplacer( « editor1 », {UIColor: « #ff0000 »} );
      };
    </script>
  </tête>

(4) La combinaison de paramètres de configuration de la CKEditor

Les paramètres de configuration de la CKEditor peuvent être combinés. Pour satisfaire les possibilités, Jetez un oeil à la Configuration API. Exemple de:

1
2
3
4
5
6
7
8
9
10
11
12
  <tête>  
    <type de script="text/javascript">
      fenêtre de.OnLoad = fonction() {
        CKEDITOR.remplacer( « editor1 », {  UIColor: « #ccc »,
                                        enterMode: CKEDITOR.ENTER_P,
                                        customConfig : « ckeditor/outroConfig.js »,
                                        langue: « fr »        
                                      } 
                        );
      };
    </script>
  </tête>

(5) Langues prises en charge à CKEditor

Les supports de CKEditor 58 Traduction, y compris “fr”. Voir plus à Langues d’Interface utilisateur. L’exemple ci-dessus illustre votre utilisation.

(6) Personnalisation de la barre d’outils

– Notions de base

Vous ne pouvez pas fournir toutes les fonctionnalités de CKEditor. Alors, Pourquoi ne pas optimiser la barre d’outils selon votre besoin? Voici un exemple quitter l’éditeur très basique.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <tête>  
    <type de script="text/javascript">
      fenêtre de.OnLoad = fonction() {
        CKEDITOR.remplacer( « editor1 », {
                           barre d’outils:
                           [
                             { nom: « basicstyles », éléments : [ « "Bold »,« Italique » ] },
                             { nom: « paragraphe », éléments : [ « NumberedList »,« BulletedList » ] },
                             { nom: « outils », éléments : [ « Maximiser »,'-',« A propos » ] }
                           ]}         
                         );
      };
    </script>
  </tête>

– Toutes les

Voici un exemple complet. Supprimer les boutons qui ne veulent pas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <tête>  
    <type de script="text/javascript">
      fenêtre de.OnLoad = fonction() {
        CKEDITOR.remplacer( « editor1 », {
                           barre d’outils: [
                             { nom: « document », éléments : [ « Source »,'-',« Enregistrer »,« NewPage »,« DocProps »,« Aperçu »,« Imprimer »,'-',« Templates » ] },
                             { nom: « presse-papiers », éléments : [ « Cut »,« Copier »,« Coller »,« PasteText »,« PasteFromWord »,'-',« Annuler »,« Refaire » ] },
                             { nom: « l’édition », éléments : [ « Trouver »,« Remplacer »,'-',« SelectAll »,'-',« Correcteur orthographique », « Scayt » ] },
                             { nom: « formes », éléments : [ « Forme », « Checkbox », « Radio », « TextField », « Textarea », « Select », « Bouton », « ImageButton », « HiddenField » ] },
                             '/',
                             { nom: « basicstyles », éléments : [ « "Bold »,« Italique »,« Underline »,« Frapper »,« Indice »,« Exposant »,'-',« RemoveFormat » ] },
                             { nom: « paragraphe », éléments : [ « NumberedList »,« BulletedList »,'-',« Hausser »,« Tiret »,'-',« Blockquote »,« CreateDiv », '-',« JustifyLeft »,« JustifyCenter »,« JustifyRight »,« JustifyBlock »,'-',« BidiLtr »,« BidiRtl » ] },
                             { nom: « Liens », éléments : [ « Link »,« Unlink »,« Ancre » ] },
                             { nom: « Insérer », éléments : [ « Image »,« Flash »,« Table »,« HorizontalRule »,« Smiley »,« SpecialChar »,« PageBreak »,« Iframe » ] },
                             '/',
                             { nom: « styles », éléments : [ « Styles »,« Format »,« Police »,« FontSize » ] },
                             { nom: « couleurs », éléments : [ « TextColor »,« BGColor » ] },
                             { nom: « outils », éléments : [ « Maximiser », « ShowBlocks »,'-',« A propos » ] }                            
                           ]}         
                         );
      }; 
    </script>
  </tête>

– Animé

Il s’agit d’un exemple plus modéré, avec un outil bar seul, mais avec les principales caractéristiques. Notez que, y compris, Il est possible de combiner et de déterminer la hauteur et la largeur de l’éditeur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<tête>  
  <type de script="text/javascript">
    fenêtre de.OnLoad = fonction() {       
        CKEDITOR.remplacer( « editor1 », {
                           barre d’outils:
                           [
                             { nom: « basicstyles », éléments : [ « "Bold »,« Italique »,« Underline » ] },
                             { nom: « paragraphe », éléments : [ « NumberedList »,« BulletedList » ] },
                             { nom: « paragraphe », éléments : [ « JustifyLeft »,« JustifyCenter »,« JustifyRight »,« JustifyBlock »] },
                             { nom: « styles », éléments : [ « Police »,« FontSize » ] },
                             { nom: « couleurs », éléments : [ « TextColor »,« BGColor » ] },
                             { nom: « presse-papiers », éléments : [ « Cut »,« Copier »,« Coller »,« PasteFromWord »,'-',« Annuler »,« Refaire » ] },                             
                             { nom: « outils », éléments : [ « Maximiser »,'-',« A propos » ] }
                           ],
                           Largeur: "740px",
                           hauteur: "200px"}
                         );
    };
  </script>
</tête>

(7) TextArea (CKEditor) vide lorsque vous soumettez le formulaire

Si votre Textarea/CKeditor apparaît vide (vide) Lorsque vous soumettez le formulaire, Vous pouvez utiliser ce “Feux d’artifice” J’ai créé sous, qui sert en fait d’obtenir le contenu de la CKEditor et jouer dans la zone de texte correspondante. Cela se fait en appelant la fonction setCKEditorToTextarea() Lorsque vous cliquez sur le bouton Envoyer (soumettre ou bouton), normalement dans l’événement onclick() le bouton.

1
2
3
4
5
6
<type de script="text/javascript">
      fonction setCKEditorToTextarea() {
        est(var InstanceName dans CKEDITOR.instances)
          CKEDITOR.instances[InstanceName].updateElement();            
      }
</script>

Mots du réalisateur

CKEditor est un éditeur de texte pour être utilisé à l’intérieur de pages web. C’est un éditeur WYSIWYG, ce qui signifie que le texte modifié par l’utilisateur sera aussi proche que possible avec la publication. Il apporte les fonctionnalités d’édition web commun, trouvé dans les applications d’édition de bureau, comme Microsoft Word et OpenOffice. Une fois la CKEditor est sous licences “Open Source” matière et commerciale, vous êtes capable de l’utiliser dans tout type d’application. Il s’agit de l’éditeur idéal pour les développeurs, conçu pour fournir des solutions simple et puissantes à leurs utilisateurs.

Autres éditeurs

Fontes

En premier lieu c’est que! Voir le site Web pour plus de détails.

Totales hits: 58776

27 Commentaires sur “Tourner le TEXTAREA en éditeur (WYSIWYG | CKEditor)

  1. Post très cool, la partie à laquelle je souhaite utiliser est liée à la question 6, considérant que la CKEditor enregistre dans votre code html contenu à l’intérieur de la zone de texte doivent soumettre le texte par e-mail au format html mais besoin d’enregistrer dans la BD au format txt, même. Avez-vous des suggestions que je peux utiliser? :)

  2. Ronaldo a dit:

    Guy, Je développe un projet et un formulaire comporte deux champs textarea.
    J’utilise le CKEditor dans les deux.

    Heures de bureau – Gauche

    Remplacer CKEDITOR.( ' expedienteEsq’ );
    CKEDITOR.add

    Heures de bureau – Oui

    Remplacer CKEDITOR.( ' expedienteDir’ );
    CKEDITOR.add

    L’éditeur est appliqué correctement. Mais quand la forme traiter un fichier php il seulement reçoit les données du premier champ et entraînera la nullité de la seconde.

    Il y a un problème avec CKEditor? parce que si vous ne l’utilisez pas je reçois normalement données provenant de deux champs
    .
    J’ai utilisé la structure proposée par le site lui-même la CKeditor.

    • Bonjour Ronaldo, J’ai fait un test ici et il n’y avait pas de problème. Procédez comme suit, saisir le code ci-dessous, mettre dans un fichier “test.php” à l’intérieur de votre serveur, mais isolé de votre application qui est apparu le problème. Notez que lorsque vous soumettez le formulaire avec textarea deux (CKEditor), les données seront envoyées normalement.

      Fichier teste.php (DEUX TEXTAREAS SIMULTANÉES)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <HTML>
        <tête>
          <titre>CKEditor</titre>
          <meta content="text/html; charset = utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
          <script type="text/javascript">
            Window.OnLoad = function()  {
              Remplacer CKEDITOR.( « editor1 » );
              Remplacer CKEDITOR.( « editor2 » );
           };
          </script>
        </tête>
        <corps>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Valeur initiale 1</TextArea>
            <textarea id="editor2" name="editor2">Valeur initiale 2</TextArea>
            <input type="submit" value="Submit" />
          </formulaire>  
        </corps>
      </HTML>
      <?PHP ECHO ' Éditeur 1 ---> ».@$_ DEMANDE[« editor1 »].»<BR />»; ?>
      <?PHP ECHO ' Éditeur 2 ---> ».@$_ DEMANDE[« editor2 »].»<BR />»; ?>
  3. Ronaldo a dit:

    J’ai essayé de passer le code, mais je ne pense pas qu’il a été publié. Mais vous savez quel est le problème avec droit? CKEditor utilisation seule des textarea envoie des données à l’autre sont vides.

    • Bien, Je crois que je comprends. Comme indiqué ci-dessus, Je n’avais pas le même problème. Alors, reanalise votre code, voir si vous n’avez plus d’un champ (entrée) portant le même nom (nom). Câlins!

      • Ronaldo a dit:

        J’ai voulu avec votre propre Astuce…. (6) TextArea (CKEditor) vide lorsque vous soumettez le formulaire

        Cyril colocar a função lá e OK :) ESSA forma q vc passou é usando php né? Même les pages en php, j’ai déployé l’éditeur à l’aide de javascript.
        Merci pour les conseils

        s’appuyant sur même si q n’est pas le sujet du post, Je programme longtemps avec java et .net et php pour moins de temps et je suis ramasser avec la conversion de la date en chaîne. N’a pas de fonction directe, Comment faire pour chaîne à ce jour (strtotime) Oui? Vous pensez connaître php bien plus q j’ai. Si vous connaissez cette chose envoyer à mon email ronaldodantas2@GMAI.com

        Pas besoin de publier ce commentaire. Merci pour les conseils.

  4. Bonjour Taylor très bonne ton post.

    Déjà installé et que j’utilise fonctionne très bien. J’ai un doute, par exemple dans votre blog vous avez entré dans les cases jaunes avec des scripts. Comment avez-vous fait cela? Et une fonctionnalité de ckeditor?

    Merci

  5. Fernando a dit:

    Comment puis-je activer le caractère spécial de th(1 PREMIÈRE) et th(DEUXIÈME 2E) SAUF SI JE CLIQUE SUR L’OUTIL D’INSERTION CARACTÈRE SPÉCIAL? JE TIENS À LE FAIRE LORSQUE VOUS TAPEZ SUR LE CLAVIER SANS AVOIR À OUVRIR N’IMPORTE QUELLE FENÊTRE.

    • Guy, testé ici et il suffit de faire la forme conventionnelle qui fonctionne, ie, Maintenez la touche ALT enfoncée et tapez la séquence de nombres correspondant au symbole désiré. Exemple de: ALT + 166 = Rd et ALT + 167 = °. Spoke!

  6. James a dit:

    Bonjour, très bon ton post, Je commence à travailler maintenant avec javascript, et j’ai besoin de créer un texte éditeur, J’ai pensé que je voudrais utiliser la ckeditor, mais avec difficulté pour pouvoir manipuler, Je souhaite juste que vous taperez , Enregistrer, Nouveau, Annuler, Refaire, Pâte, copie, et un choix de langue, seulement au lieu d’être une forme d’écriture, Il aurait être langages de programmation, et puis aurait à gérer les données reçues, un peu comme un éditeur de code source normale, uniquement en ligne, Si vous pouvez m’aider.

  7. Buddy, Bon, j’ai installé, mais un petit problème que j’ai fais face, c’est qu’il transforme des caractères spéciaux en code html comme est â â et je voulais qu’ils soient quand même pour ma base de données, a comme?

    • Oups, qu’il peut y avoir quelque chose avec l’éditeur que vous utilisez pour écrire du code. Essayez d’utiliser un bloc-notes et entrez l’exemple de code HTML complet, et voir si le problème demeure.

      Essayez également définir des stratégies qui disent à votre page qui défini le jeu de caractères à utiliser (ISO-8859-1 ou UTF-8).

      1
      2
      3
      4
      5
      
      <corps>
        <tête>
            <méta charset="UTF-8">
        </tête> 
      ...

      Si vous utilisez PHP, définir le jeu de caractères au début du code, avant toute chose:

      1
      
        <?PHP en-tête("Content-Type: texte/html;  charset = ISO-8859-1",true) ?>

      Ou, essayer de traiter le contenu des demandes à l’aide du jeu de caractères correct:

      1
      
        htmlentities( utf8_decode($_ POSTE[« variable »]) );

      Le fait est que le problème que vous avez cité ne semble pas la CKEditor, Pourquoi n’utiliser dans diverses applications et j’ai aucun problème avec les caractères spéciaux. Testé aussi la démo sur le site Web, et je ne voyait aucun problème. Voir là: http://ckeditor.com/demo

  8. Marcio a dit:

    Bonjour, j’essaie d’obtenir le texte dans la zone de texte par l’intermédiaire de javascript pour envoyer à la base de données, mais je ne peux pas, y a-t-il une méthode pour obtenir le texte?
    Merci

  9. Bonne après-midi.
    Je pense utiliser ce dispositif pour le médecin de prescription – quelque chose de si simple même.
    – Vous voulez savoir comment faire pour configurer la barre du haut (où est la fonctionnalité) masquer (comme un petit bouton pour lui faire disparaître après l’édition du texte)
    – Aussi comment puis-je me débarrasser de la barre inférieure (lorsqu’il apparaît “corps” et d’autres étiquettes) ?
    – Comment faire pour que la zone de texte avec une “hauteur” Automatique: type de, Si je prescris 10 la boîte sera encompridando médicaments alors que je tape… Si je tape seulement 1 le médicament est à la hauteur de la boîte que je tape…

    • Salut, Désolé, Il y avait quelques coupures (échecs) dans votre code, J’ai donc fini par retirer.

      Tout ce dont vous avez besoin, Il est parfaitement possible, mais je suggérerais à la recherche d’un professionnel qui comprend JavaScript pour vous aider.

      Je vais juste dire le chemin de pierres:

      – Masquer la barre d’outils (barre d’outils):

      1
      2
      3
      
      var Rédacteur en chef = CKEDITOR.Inline( « editor1 », {
          removePlugins: « toolbar »
      } );

      – Cacher le pied de page (elementspath):
      http://ckeditor.com/forums/CKEditor-3.x/Disabling-Elements-Path-Display

      – Augmenter la hauteur automatiquement (autoGrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (démonstration)

      Exemple de:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      
      <HTML>
        <tête>
          <titre>CKEditor</titre>
          <contenu de Meta="text/html; charset = utf-8" http-EQUIV="content-type" />
          <script src="http:////CDN.CKEditor.com/4.5.3/Basic/CKEditor.js"></script>
          <script src="plugin.js"></script>  <!-- Téléchargez le plugin.JS à http://CKEditor.com/addon/autoGrow-->  
          <type de script="text/javascript">
           fenêtre de.OnLoad = fonction()  {
              CKEDITOR.remplacer( « editor1 », {             
                  removePlugins: « elementspath », 
                  removePlugins: « toolbar »,
                  extraPlugins: « automatique »,
                  autoGrow_minHeight: 70,
                  hauteur: « 70px »
              });
           };
          </script>
        </tête>
        <corps>
          <action de formulaire="request.php" méthode="post">
            <Id de TextArea="editor1" nom="editor1">Texte initial.</TextArea>
            <type d’entrée.="submit" valeur="Submit" />
          </formulaire>  
        </corps>
      </HTML>
  10. Odilon a dit:

    Je ne peux pas entrer le texte dans la base de données correctement, Eh bien tout bizarre

    ex:
    <p>&aacute; &est; &iacute;ASD</p>
    à l’est

  11. Claudio a dit:

    Bonjour Taylor, Félicitations pour le poste très bien expliqué. Je veux utiliser cet éditeur dans une application PHP et voudrais savoir comment créer une liste déroulante (ou le bouton) la barre d’outils pour apporter des données de BD à insérer dans le texte? IE, Lorsque vous cliquez sur un bouton ouvrirait une boîte de dialogue avec le résultat d’une requête pour sélectionner un enregistrement.
    Vous pouvez?

  12. Glaydison Silva a dit:

    Salut, otimo post. Poderia Organizations um novo post? Besoin d’aide pour implémenter un bouton pour télécharger des images, égale à la démo où vous pouvez vous déplacer vers le serveur et ces. Je ne peux pas de toute façon.

Laisser une réponse

Votre adresse email ne sera pas publié. Les champs obligatoires sont marqués avec *