Line-height tinyMCE

Question

I am having a problem on designing an editor textarea TinyMCE, the gap between lines is too big when pressing enter key

I tried content_height and line-height but nothing happens

tinymce.init({
  selector: 'textarea',
  content_height: "body { line-height: 1; }"
  contextmenu: 'copy paste',
  plugins: 'link media image table',
  toolbar: 'undo redo | bold italic underline | link media image table ',
});

.post-page-general-section {
  margin-top: 110px;
  display: flex;
}

.post-page-general-section img {
  width: 300px;
  height: 300px;
}

.edit-area {
  width: 1000px;
  min-height: 800px;
}

.edit-area textarea{
  min-height: 400px;
}

.post-page-general-section button {
  border: none;
  background: transparent;
  padding: 10px;
  border-radius: 10px;
}

.post-page-general-section button:hover {
  background: #f1f1f1;
  padding: 10px;
}

.tox-sidebar-wrap, .tox-edit-area, .tox-sidebar {
  line-height: 0.5;
}

Answer 1

Your problem arises due to the default behavior of TinyMCE. When you press 'enter' it creates a new paragraph <p>, which has default margin.

Change the behavior of the 'enter' key to insert a 'line break' <br> instead of a new paragraph <p>.

You can do it by setting forced_root_block option to false in the TinyMCE configuration:

tinymce.init){
  selector: 'textarea',
  forced_root_block: false,
  contextmenu: 'copy paste',
  plugins: 'link media image table',
  toolbar: 'undo redo | bold italic underline | link media image table ',
});