Primeros pasos con ckeditor

Empezando

Cree un archivo ckeditor.html con el siguiente contenido:

<!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>

Demostración en vivo en JSFiddle

Explicación del código

  1. Carga la biblioteca CKEditor desde CKEditor CDN:

        <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>

  2. Crear un nuevo elemento DIV con todo el contenido que queramos dentro del Editor

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

  3. Dígale al objeto CKEDITOR que reemplace el elemento con el id editor1 con un editor WYSIWYG (el CKEditor).

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

Para obtener más información, consulte la página Documentación de CKEditor.

CKEditor - Ejemplo de editor en línea

Cree un archivo ckeditor-inline.html con el siguiente contenido:

<!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>

Demostración en vivo en JSFiddle

Explicación del código

  1. Carga la biblioteca de CKEditor desde el CDN de CKEditor:

        <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>

  2. Crear un nuevo elemento DIV con todo el contenido que queramos dentro del Editor

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

Lo importante a tener en cuenta aquí es contenteditable="true" dentro del elemento DIV. El CKEditor reemplazará automáticamente cada elemento que tenga el atributo contenteditable con un editor en línea.

Para obtener más información, consulte la Documentación.

Obtener el contenido HTML de CKEditor

Cree un archivo ckeditor-content.html con el siguiente contenido:

<!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>

Demostración en vivo en JSFiddle

Explicación del código

  1. Carga la biblioteca de CKEditor desde el CDN de CKEditor:

        <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>

  2. Crear un nuevo elemento DIV con todo el contenido que queramos dentro del Editor

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

  3. Agregue un oyente clic al botón que tenemos, y una vez hecho clic, obtenga el contenido HTML del ckeditor.

     <script>
     document.getElementById('btn1').addEventListener('click', function() {
         content = CKEDITOR.instances.editor1.getData()
         console.log(content);
     }, false);
 </script>
  1. El nombre del editor editor1 en CKEDITOR.instances.editor1 es el valor del atributo id del elemento que usamos (<div id="editor1" ... >)
  2. Tenga en cuenta el uso de console.log: el contenido HTML del editor estará disponible en la consola (puede abrir la consola haciendo clic en la tecla F12)

Para obtener más información, consulte la página Documentación en línea.