How to set CKEditor 5 height

  • Tech Area
  • April 24, 2023


I am using CKEditor 5 in one of my project. I already implemented this but I want to increase the height of ckeditor 5. How do I change the height of CKEditor 5?

<html>  
<head>  
<title>Ckeditor5</title>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<style>
 .box
 {
  width:100%;
  max-width:600px;
  background-color:#f9f9f9;
  border:1px solid #ccc;
  border-radius:5px;
  padding:16px;
  margin:0 auto;
 }
</style>
<body>
<div class="container">
  <h3 align="center">CKEditor5</h3>
  <div class="box">
  <form method="post">
  <div class="form-group">
  <textarea id="content" name="content" class="form-control"></textarea>
  </div>
  <div class="form-group">
  <input type="submit" name="submit" value="Save" class="btn btn-primary">
  </div>
  </form>
 </div>
</div> 
</body>  
</html>  

<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create( document.querySelector( '#content' ))
        .then(editor => {
          console.log(editor);
        })
        .catch( error => {
            console.error( error );
        });
</script>

Solution

CKEditor 5 height can be easily controlled with CSS.

.ck-editor__editable[role="textbox"] {
               min-height: 300px;
            }


Subscribe us via Email

Join 10,000+ subscriber

Subscribe on YouTube

PHP Projects
Student record system project in PHP and MySQL Last Updated: July 3, 2024
Food ordering system project in PHP and MySQL Last Updated: June 27, 2024
Tourism management system project in PHP and MySQL Last Updated: June 24, 2024
Restaurant table booking system project in PHP and MySQL Last Updated: February 22, 2024
Hostel management system project in PHP and MySQL Last Updated: February 14, 2024
Online Pizza Delivery project in PHP Last Updated: February 4, 2024
Parking Management System project in PHP Last Updated: November 5, 2023
Employee Attendance Management System project in PHP MySQL Last Updated: October 3, 2023
Visitors Management System project in PHP Last Updated: August 28, 2023
Library Management System project in PHP and MySQL Last Updated: May 29, 2023
Expense Management System project in PHP and MySQL Last Updated: May 22, 2023
Hospital Management System project in PHP and MySQL Last Updated: May 5, 2023
Online quiz with e-certificate in PHP CodeIgniter with MySQL Last Updated: April 29, 2023
SNIPE – IT Asset management system v6.1.0 Last Updated: April 21, 2023
Online Quiz System project in PHP CodeIgniter with MySQL Last Updated: February 8, 2023
Employee Management System project in PHP Last Updated: January 21, 2023