Premiers pas avec ckeditor

Commencer

Créez un fichier ckeditor.html avec le contenu suivant :

<!DOCTYPE html>
<html>
<head>
    <title>CKEditor Demo!</title>
</head>
<body>
    <script src="//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"></script>
    <div id="editor1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    </div>
    
    <script>
    CKEDITOR.replace( 'editor1' );
    </script>
</body>
</html>

Démo en direct sur JSFiddle

Explication du code

  1. Charge la bibliothèque CKEditor depuis CKEditor [CDN][1] :

        <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>
    
  2. Créez un nouvel élément DIV avec tout le contenu que nous voulons dans l’éditeur

    <div id="editor1">
    ALL CONTENT HERE
     </div>
    
  3. Dites à l’objet CKEDITOR de remplacer l’élément avec l’id editor1 par un éditeur WYSIWYG (le CKEditor).

     <script>
     CKEDITOR.replace( 'editor1' );
     </script>
    

Pour plus d’informations, reportez-vous à la page [Documentation CKEditor][2].

[1] : https://en.wikipedia.org/wiki/Content_delivery_network [2] : http://docs.ckeditor.com/

CKEditor - Exemple d’éditeur en ligne

Créez un fichier ckeditor-inline.html avec le contenu suivant :

<!DOCTYPE html>
<html>
<head>
    <title>CKEditor Inline Demo!</title>
</head>
<body>
    <script src="//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"></script>
    <div id="editor1" contenteditable="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    </div>
</body>
</html>

Démo en direct sur JSFiddle

Explication du code

  1. Charge la bibliothèque CKEditor depuis le CDN CKEditor :

        <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>
    
  2. Créez un nouvel élément DIV avec tout le contenu que nous voulons dans l’éditeur

    <div id="editor1" contenteditable="true">
    ALL CONTENT HERE
     </div>
    

La chose importante à noter ici est le contenteditable="true" à l’intérieur de l’élément DIV. Le CKEditor remplacera automatiquement chaque élément qui a l’attribut contenteditable par un éditeur inline.

Pour plus d’informations, reportez-vous à la [Documentation][1].

[1] : http://docs.ckeditor.com/#!/guide/dev_savedata

Récupère le contenu HTML de CKEditor

Créez un fichier ckeditor-content.html avec le contenu suivant :

<!DOCTYPE html>
<html>
<head>
    <title>CKEditor Get Content Demo!</title>
</head>
<body>
    <script src="//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"></script>
    <div id="editor1" contenteditable="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    </div>
    <button id="btn1">Click to get the content</button>
    <script>
        document.getElementById('btn1').addEventListener('click', function() {
            content = CKEDITOR.instances.editor1.getData()
            console.log(content);
        }, false);
    </script>
</body>
</html>

Démo en direct sur JSFiddle

Explication du code

  1. Charge la bibliothèque CKEditor depuis le CDN CKEditor :

        <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>
    
  2. Créez un nouvel élément DIV avec tout le contenu que nous voulons dans l’éditeur

    <div id="editor1" contenteditable="true">
    ALL CONTENT HERE
     </div>
    
  3. Ajoutez un écouteur click au bouton que nous avons, et une fois cliqué - obtenez le contenu HTML du ckeditor.

     <script>
         document.getElementById('btn1').addEventListener('click', function() {
             content = CKEDITOR.instances.editor1.getData()
             console.log(content);
         }, false);
     </script>
    
  1. Le nom de l’éditeur editor1 dans CKEDITOR.instances.editor1 est la valeur de l’attribut id de l’élément que nous avons utilisé (<div id="editor1" ... >)
  2. Notez l’utilisation de console.log - le contenu HTML de l’éditeur sera disponible dans la console (vous pouvez ouvrir la console en cliquant sur la touche F12)

Pour plus d’informations, reportez-vous à la page [Documentation en ligne][1].

[1] : http://docs.ckeditor.com/#!/guide/dev_inline