在CKEditor 4中更改编辑器高度时，有一个配置选项：config.height。
如何更改CKEditor 5的高度？ （经典编辑）
答案 0 :(得分：60)
回答我自己的问题，因为它可能有助于其他人。
CKEditor 5不再提供配置设置来更改其高度。 使用CSS可以轻松控制高度。
如果使用Classic Editor：
，有一件棘手的事情<div id="editor1"></div>
ClassicEditor
.create( document.querySelector( '#editor1' ) )
.then( editor => {
// console.log( editor );
} )
.catch( error => {
console.error( error );
} );
然后经典编辑器将隐藏原始元素（标识为editor1）并在其旁边渲染。这就是为什么通过CSS更改#editor1的高度将无效。
在CKEditor 5（经典编辑器）渲染之后，简化的HTML结构如下所示：
<!-- This one gets hidden -->
<div id="editor1" style="display:none"></div>
<div class="ck-reset ck-editor..." ...>
<div ...>
<!-- This is the editable element -->
<div class="ck-blurred ck-editor__editable ck-rounded-corners ck-editor__editable_inline" role="textbox" aria-label="Rich Text Editor, main" contenteditable="true">
...
</div>
</div>
</div>
实际上HTML要复杂得多，因为渲染了整个CKEditor UI。然而，最重要的元素是标有ck-editor__editable_inline类的“编辑区域”（或“编辑框”）：
<div class="... ck-editor__editable ck-editor__editable_inline ..."> ... </div>
“编辑区域”是可以输入文本的白色矩形。因此，要设置/更改编辑区域的高度，使用CSS定位可编辑元素就足够了：
<style>
.ck-editor__editable_inline {
min-height: 400px;
}
</style>
答案 1 :(得分：8)
import React, {Component} from 'react';
import { DropTarget } from 'react-dnd';
function collect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget,
isOver: monitor.isOver,
item: monitor.getItem,
}
}
class DropCells extends Component {
state = {
tdValue: ""
};
render() {
const { connectDropTarget, isOver, item} = this.props;
const backgroundColor = isOver ? 'lightgreen' : 'white';
const dropped = isOver? this.setState({tdValue: this.props.item}): this.state.tdValue;
return connectDropTarget(
<td className="target" style={{ background: backgroundColor }}>
{dropped}
</td>
);
}
}
export default DropTarget('item', {}, collect)(DropCells);
答案 2 :(得分：6)
对于ReactJS。
<CKEditor
editor={ClassicEditor}
data="<p>Hello from CKEditor 5!</p>"
onInit={editor => {
// You can store the "editor" and use when it is needed.
// console.log("Editor is ready to use!", editor);
editor.editing.view.change(writer => {
writer.setStyle(
"height",
"200px",
editor.editing.view.document.getRoot()
);
});
}}
/>
答案 3 :(得分：4)
从CKEditor 5版本22开始，建议的编程解决方案不起作用。这是我完成工作的方式：
ClassicEditor.create( document.querySelector( '#editor' ) )
.then( editor => {
editor.ui.view.editable.element.style.height = '500px';
} )
.catch( error => {
console.error( error );
} );.ck-editor__editable {min-height: 500px;}<div>
<textarea id="editor">Hi world!</textarea>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>
答案 4 :(得分：3)
使用CSS：
.ck.ck-editor__main .ck-content {
height: 239px;
}
答案 5 :(得分：2)
只需将其添加到style标记中即可。
<style>
.ck-editor__editable
{
min-height: 150px !important;
max-height: 400px !important;
}
</style>
答案 6 :(得分：1)
我试图在配置中设置高度和宽度，但是在classic Editor上却不起作用。
通过执行此操作，我可以在Vue上以编程方式更改编辑器的高度。
mounted() {
const root = document.querySelector('#customer_notes');
ClassicEditor.create(root, config).then(editor=>{
// After mounting the application change the height
editor.editing.view.change(writer=>{
writer.setStyle('height', '400px', editor.editing.view.document.getRoot());
});
});
}
答案 7 :(得分：1)
将这个 CSS 放入您的全局 CSS 文件，奇迹就会发生。 CkEditor 充满了未解之谜。
.ck-editor__editable_inline {
min-height: 400px;
}
答案 8 :(得分：1)
如果您希望通过编程方式执行此操作，则最好的方法是使用插件。您可以按照以下步骤轻松进行操作。以下适用于CKEditor 5版本12.x
function MinHeightPlugin(editor) {
this.editor = editor;
}
MinHeightPlugin.prototype.init = function() {
this.editor.ui.view.editable.extendTemplate({
attributes: {
style: {
minHeight: '300px'
}
}
});
};
ClassicEditor.builtinPlugins.push(MinHeightPlugin);
ClassicEditor
.create( document.querySelector( '#editor1' ) )
.then( editor => {
// console.log( editor );
})
.catch( error => {
console.error( error );
});
或者，如果您希望将其添加到自定义版本中，则可以使用以下插件。
class MinHeightPlugin extends Plugin {
init() {
const minHeight = this.editor.config.get('minHeight');
if (minHeight) {
this.editor.ui.view.editable.extendTemplate({
attributes: {
style: {
minHeight: minHeight
}
}
});
}
}
}
这将向CKEditor添加一个名为“ minHeight”的新配置，该配置将设置编辑器的最小高度，可以像这样使用。
ClassicEditor
.create(document.querySelector( '#editor1' ), {
minHeight: '300px'
})
.then( editor => {
// console.log( editor );
} )
.catch( error => {
console.error( error );
} );
答案 9 :(得分：1)
Setting the height via a global stylesheet. 只需添加到常见的.css文件（如style.css）：
.ck-editor__editable {
min-height: 500px;
}
答案 10 :(得分：0)
如果使用jQuery，并且必须将CKEditor 5应用于文本区域，则存在“快速而肮脏”的解决方案。
条件：
<textarea name='my-area' id='my_textarea_id'>
如果您使用jQuery，则编辑器调用可能是：
var $ref=$('#my_textarea_id');
ClassicEditor
.create( $ref[0] ,{
// your options
} )
.then( editor => {
// Set custom height via jQuery by appending a scoped style
$('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: 200px !important;}</style>').insertAfter($ref);
} )
.catch( error => {
console.error( error );
} );
换句话说，渲染后，您可以处理用于构建编辑器的相同元素，并在包含自定义高度的范围化样式标签后追加。
$('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: 200px !important;}</style>').insertAfter($ref);
如果您想使用函数（或某些类方法）来执行此操作，则需要以下内容：
var editorBuildTo = function(id,options){
var options=options || {};
//Height represents the full widget height including toolbar
var h = options.height || 250; //Default height if not set
var $ref = $('#'+id);
h=(h>40?h-40:h);//Fix the editor height if the toolbar is simple
ClassicEditor
.create( $ref[0] ,{
// your options
} )
.then( editor => {
// Set custom height via jQuery
$('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: '+h+'px !important;}</style>').insertAfter($ref);
} )
.catch( error => {
console.error( error );
} );
}
editorBuildTo('my_textarea_id',{
height:175,
// other options as you need
});
这对我来说很好
答案 11 :(得分：0)
1.resource/assets/js/app.js
=================================
2.paste this code
=================================
require('./bootstrap');
//integrate
window.ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
============================================
3.write on terminal
============================================
npm install --save @ckeditor/ckeditor5-build-classic
npm run watch
=======================================
4.in blade file
=======================================
<!DOCTYPE html>
<html lang="en">
<title></title>
<body>
<form action="{{route('admin.category.store')}}" method="post" accept-charset="utf-8">
@csrf
<div class="form-group row">
<div class="col-sm-12">
<label class="form-control-label">Description:</label>
<textarea name="description" id="editor" class="form-control" row="10" cols="80"></textarea>
</div>
</div>
</form>
<script>
$(function () {
ClassicEditor
.create( document.querySelector( '#editor' ), {
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
]
}
} )
.catch( error => {
console.log( error );
} );
})
</script>
</body>
</html>
答案 12 :(得分：0)
同时使用max-height和min-height。因为max-height在达到最大提及高度后才提供滚动条选项。 min-height为<textarea>赋予静态高度。
.ck-editor__editable { 最大高度：400像素； min-height：400px;}
答案 13 :(得分：0)
基于@Jaskaran Singh React解决方案。我还需要确保它是其父代的100％高度。我通过分配一个名为“ modalComponent”的ref并进一步添加以下代码来实现这一点：
editor.editing.view.change(writer => {
let reactRefComponentHeight = this.modalComponent.current.offsetHeight
let editorToolbarHeight = editor.ui.view.toolbar.element.offsetHeight
let gapForgiveness = 5
let maximizingHeight = reactRefComponentHeight - editorToolbarHeight - gapForgiveness
writer.setStyle(
'height',
`${maximizingHeight}px`,
editor.editing.view.document.getRoot()
)
})
答案 14 :(得分：0)
此CSS方法对我有用：
.ck-editor__editable {
min-height: 400px;
}
答案 15 :(得分：0)
只需将其添加到CSS文件中
.ck-editor__editable {min-height: 150px;}
答案 16 :(得分：0)
将其添加到样式表：
.ck-editor__editable
{
min-height: 200px !important;
}
答案 17 :(得分：0)
关于配置CKEditor 5的宽度：
CKEditor 5不再具有更改宽度的配置设置，但是可以使用CSS轻松控制其宽度。
要设置编辑器的宽度（包括工具栏和编辑区域），就足以设置编辑器主容器的宽度（使用const { WebhookClient } = require('dialogflow-fulfillment');
server.post('/', function (request, response, next) {
const agent = new WebhookClient({ request, response });
const welcome = () => {
agent.add('Hello Welcome To My bot');
}
let intentMap = new Map();
intentMap.set('Default Welcome Intent', welcome);
agent.handleRequest(intentMap);
}
类）：
.ck-editor答案 18 :(得分：-1)
只需测试一下即可。希望能帮到您
var editor_ = CKEDITOR.replace（'content'，{height：250}）;
答案 19 :(得分：-1)
我只是在我的布局页面中添加了这个问题
<style>
.ck-content{
height: 250px;
}
</style>
希望我能帮助某人 :D