I'm encountering some challenges with integrating TinyMCE and Bootstrap into a CMS I built.
On a particular page, there's a div outlined where users can select images from a modal by clicking on it. The selected image is then inserted into a TinyMCE instance, saved in HTML format to the database, and also displayed within the div for preview.
I'm seeking assistance to ensure that even if the user adds a large image via TinyMCE, it remains contained within the bootstrap column without breaking the layout.
The empty div:
https://i.sstatic.net/Nj3AY.png and after adding a large image
https://i.sstatic.net/QE5w3.png
Is there a specific element or attribute I can incorporate in the HTML code to prevent any oversized images placed in TinyMCE from disrupting the div layout?
<html>
<head>
<title>Template One</title>;
<style type="text/css">
@import "style.css";
html,
body {
height: 100%;
overflow: hidden;
}
.modal-lg {
max-width: 80% !important;
}
.my-container {
display: flex;
flex-direction: column;
height: 100%;
}
(Remaining CSS styles omitted for brevity)
</style>
(External stylesheet links and JavaScript libraries excluded for clarity)
</head>
<body>
<div class="container-fluid my-container">
<div class="row middle">
<div class="col-lg-6 leftFifty" id="leftFifty">
<div class="leftContent" style="background-color: white; height: 100%; border: dotted 1px black;">
<!-- This is the clickable div to select an image -->
</div>
</div>
<div class="col-lg-6 rightFifty" id="rightFifty">
<div class="rightContent" style="background-color: white; height: 100%; border: dotted 1px black; ">
<!-- This is the clickable div to select an image -->
</div>
</div>
</div>
</div>
</body>
</html>