JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.ckeditor.com/4.5.4/standard-all/ckeditor.js"></script>
<div contentEditable="true">
<div class="container">
<p>editable</p>
<p><img src="http://placehold.it/500x150" width="500" height="150">
some editable content with Image2. The img element overflows the container due to the widget</p>
</div>
</div>
<div class="container">
<p>Non editable, reference</p>
<p><img src="http://placehold.it/500x150" width="500" height="150">
some content</p>
</div>
CSS
body {
background-color:white;
font-family:Arial,Sans-Serif;
}
img {
max-width:100%;
height:auto;
}
.container {
width:300px;
background-color:#0A0;
}
JavaScript
CKEDITOR.config.allowedContent = true;
CKEDITOR.config.extraPlugins = "image2";