Question

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

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

工作正常，但它改变了所有textareas。我也试过

<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

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

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

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

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

另请参阅CKEditor SDK中的Setting Editor Size示例和相关的documentation。

Answer 2

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

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

这里还有一个示例（基于 CKEditor5 ）：

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;
}

<script src="https://cdn.ckeditor.com/ckeditor5/10.0.1/classic/ckeditor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="content" id="editor">
<p>Here goes the initial content of the editor.</p>
</textarea>
<button id="getdata">Print data</button>

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

2 个答案: