Getting started with ckeditor – Get the HTML content of CKEditor

Create a file ckeditor-content.html with the following content:

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

Live Demo on JSFiddle

Explanation of code

  1. Loads the CKEditor library from the CKEditor CDN:

        <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>
    
  1. Create a new DIV element with all of the content that we want inside the Editor

    <div id="editor1" contenteditable="true">
    ALL CONTENT HERE
     </div>
    
  2. Add a click listener to the button we have, and once clicked – get the HTML content of the ckeditor.

     <script>
         document.getElementById('btn1').addEventListener('click', function() {
             content = CKEDITOR.instances.editor1.getData()
             console.log(content);
         }, false);
     </script>
    
  1. The name of the editor editor1 in CKEDITOR.instances.editor1 is the value of the id attribute of the element we used (<div id="editor1" ... >)
  2. Note the usage of console.log – the HTML content of the editor will be available in the console (you can open the console by clicking the F12 key)

For more refer to the Inline Documentation page.

if you want to reproduce, please indicate the source:
Getting started with ckeditor – Get the HTML content of CKEditor - CodeDay