JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.ckeditor.com/4.4.7/full-all/ckeditor.js"></script>
<div class="content">
<div class="spacer">
Paste something in the editor while this line of text is still visible. The editor will jump putting the pasted content on top of the editor. This will not happen when you scroll down before pasting.
</div>
<div class="editor">
<textarea id="editor1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue sagittis lorem ac vehicula. Duis varius ex ac nibh dictum laoreet. Nunc quis mi et purus aliquet molestie. Cras sit amet sem gravida, maximus tellus ut, scelerisque dolor. Ut consectetur ligula egestas leo ultrices, ut fermentum ante vehicula. Nulla dignissim pharetra elit, quis tincidunt nisl bibendum in. Nullam ut elit tristique, congue purus non, bibendum eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis aliquam congue mauris eu consectetur. Suspendisse eget leo quis sapien tincidunt suscipit vitae in dui.</p>
<p>Pellentesque dapibus nulla diam, non dictum felis dignissim et. Donec purus ligula, venenatis faucibus tincidunt eget, facilisis eu mi. Morbi porttitor facilisis justo, sed volutpat odio facilisis in. Mauris eu magna vel lacus pharetra elementum sagittis pretium odio. Sed ac ex non diam viverra fermentum a a ipsum. Quisque semper lorem at hendrerit aliquam. Quisque leo enim, sagittis ut ante vel, malesuada facilisis lectus. Etiam mi est, vulputate ac pretium dictum, semper sed nisi. Phasellus sed nibh aliquet, tincidunt mi et, elementum odio. Phasellus posuere sagittis cursus. Aliquam semper sem non maximus rhoncus.</p>
<p>In hac habitasse platea dictumst. Nulla facilisi. Nunc luctus consequat ligula ut euismod. Phasellus ut sapien volutpat sapien blandit ullamcorper. Nullam ultricies tortor velit, ut pharetra libero laoreet eu. Etiam tincidunt vestibulum dolor ac convallis. In hac habitasse platea dictumst. Nunc nec viverra...
CSS
.content{
background-color: #eee;
position: absolute;
top: 0px;
right: 100px;
bottom: 0;
left: 100px;
overflow: scroll
}
.spacer{
margin: 50px;
}
.editor {
margin: 50px;
}
JavaScript
CKEDITOR.replace( 'editor1', {
sharedSpaces: {
top: $('.toolbar')
},
extraPlugins: 'autogrow',
autoGrow_onStartup : true,
toolbar: [
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'FontSize', 'TextColor', 'BGColor' ]
]
});