How to use CKEditor 4
Basic usage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Edit Template</title>
<script src="//cdn.ckeditor.com/4.21.0/full/ckeditor.js"></script>
</head>
<body>
<form action="template-save.php" method="post">
<input type="text" name="title" value="<?php echo $title; ?>">
<input type="hidden" name="id" value="<?php echo $id; ?>">
<textarea id="myeditor" name="myeditor" cols="80" rows="10">
<?php
echo htmlspecialchars($content); // htmlspecialchars is needed to preserve code snippets
?>
</textarea>
<script>
CKEDITOR.config.allowedContent = true;
CKEDITOR.config.autoParagraph = false;
CKEDITOR.replace('myeditor',{width: "100%", height: "400px"});
</script>
<input type="submit" class="button"/>
</form>
</body>
</html>
Tutorial for config parameters: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
CKEditor by default adds paragraph tags <p></p> around a line of text after the user presses the Enter key. autoParagraph = false configuration changes this behavior to add a line break <br/> instead.
Engineer Tips 