Question

我有多个ckeditor 5实例，我想添加一个按钮，它将改变texteditor的高度。为此，我必须更改单个实例的高度，这是否可能，如果可以，如何？

旁注：我想像ckeditor 4一样制作最大化按钮。是否有用于该插件的插件，或者我必须自己制作？

Answer 1

最大化功能-根据我的检查，该功能尚未实现。 CKEditor有一张票：https://github.com/ckeditor/ckeditor5/issues/1235

编辑器高度-此链接说明How to set the height of CKEditor 5 (Classic Editor)解释了如何永久执行此操作。但是，如果您想通过按钮来动态更改编辑器的高度，则需要使用一个小技巧，即不将CSS类直接分配给内容区域，而是直接分配给它的容器（注意，css类中的.ck-small-editor .ck-content和{{1 }}（在JavaScript中）：

document.getElementsByClassName( 'ck-editor' )[ 0 ]

	ClassicEditor
		.create( document.querySelector( '#editor' ), {
    
		} )
		.then( editor => {
			window.editor = editor;
			
			// Assign small size to editor using CSS class in styles and button in HTML
			const editable = editor.ui.getEditableElement();
			document.getElementById( 'change-height' ).addEventListener( 'click', () => {
				document.getElementsByClassName( 'ck-editor' )[ 0 ].classList.toggle( 'ck-small-editor' );
			} );
      
		} )
		.catch( err => {
			console.error( err.stack );
		} );

.ck-small-editor .ck-content {
	min-height: 50px !important;
	height: 50px;
	overflow: scroll !important;
}

Ckeditor 5单实例高度

1 个答案: