CkEditor

by Stephen Lujan

HTML

<div>
  <div id="editor">
    <p><strong>Pre-existing html here.</strong></p>
    <ul>
      <li>Test<ul>
          <li>nest</li>
        </ul>
      </li>
    </ul>
  </div>

  <button id="save">
    Save
  </button>
</div>

<textarea id="output" readonly>
  The html output will show here on "save"
</textarea>

<textarea id="input">
  <h2>
  drop html and click load to test loading
  </h2>
</textarea>

<button id="load">
    Load
</button>

<div id="normal">
  The normal web view will display here on either save or load.
</div>


<script src="https://cdn.ckeditor.com/ckeditor5/19.0.0/classic/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

CSS

textarea {
  width: 100%;
}

div {
  margin-bottom: 0.5em;
}
#normal {
  border: 1px solid black;
  padding: 2px;
  margin-top: 0.5em;
  
}

JavaScript

var editor = null;

ClassicEditor
  .create(document.querySelector('#editor'))
  .then(newEditor => {
    editor = newEditor;
  })
  .catch(error => {
    console.error(error);
  });
$("#save").click(function() {
	var s = editor.getData();
	console.log(s );
  $("#output").text(s);
  $("#normal").html(s);
});
$("#load").click(function() {
	var s = $("#input").val();
  console.log(s);
	editor.setData(s);
	$("#normal").html(s);
});