使用ckeditor仅更改一个textarea的高度

Question

我在一页中得到 3 个 ckeditor textareas。问题是我希望其中一个文本区域的大小与其他文本区域的两倍相同。我找不到如何仅调整一个 textarea 的大小。

<script type="text/javascript">
        CKEDITOR.config.height='600px';
</script>

工作正常，但它改变了所有的文本区域。我也试过

<script type="text/javascript">            
     CKEDITOR.replace('Resolution',{
                height  : '400px',
   });
</script>

但这不起作用......我试图更改我的 config.js 文件，但仍然没有。如果我输入我的 config.js

CKEDITOR.editorConfig = function( config ) {

        config.width = '1000px';
        config.height = '700px'; 
};

它不起作用。

总结一下：如何使用 ID 调整 textarea 的大小？

Answer 1

这应该适用于 a <textarea id="Resolution">：

    <script>
    CKEDITOR.replace( 'Resolution', {
        height: 400
    } );
    </script>

更改配置后请记住清除浏览器缓存！

请注意，config.height它接受一个整数来表示以像素为单位的值或带有单位的 CSS 值。

另请参阅CKEditor SDK 中的设置编辑器大小示例和相关文档。

Answer 2

使用 CSS 更改编辑器的高度：

.ck-editor__editable {
  min-height: 200px;
}

这是另一个示例（基于CKEditor5）：

.ck-editor__editable {
  min-height: 200px;
}

let theEditor;

ClassicEditor
  .create(document.querySelector('#editor'), {

    toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote']
  })
  .then(editor => {
    theEditor = editor;

  })
  .catch(error => {
    console.error(error);
  });


function getDataFromTheEditor() {
  return theEditor.getData();
}

document.getElementById('getdata').addEventListener('click', () => {
  alert(getDataFromTheEditor());
});

.ck-editor__editable {
  min-height: 200px;
}