<div contenteditable="true" id="ctlEditor_HTML" style="resize:vertical" >
</div>
<button type="button" title="optimize" onclick="add_Events_in_Editor();">Test</button>
@*------------< script:
Image-Tools >------------*@
<script>
//----<
events >----
function add_Events_in_Editor() {
//------<
add_Events_in_Editor() >------
//< add
>
//*add
when click on image
set_Event_on_Children("ctlEditor_HTML", "img", "click");
//</
add >
//<
remove >
//*remove
all divResize when leaving
var divEditorHTML =
document.getElementById("ctlEditor_HTML");
divEditorHTML.addEventListener("mouseleave", remove_all_ImageResize_Divs);
//</
remove >
//------</
add_Events_in_Editor() >------
}
function
set_Event_on_Children(sElementID, sChildren_Tagname, sEventname) {
//----<
set_Event_on_Children() >----
//*sets an
event to all children with match type
var div =
document.getElementById(sElementID);
var elements =
div.getElementsByTagName(sChildren_Tagname);
//<
loop: children >
for (var i = 0; i < elements.length; i++) {
//< attach event >
elements[i].addEventListener(sEventname, add_Sizeable_Div, { once: true });
//</ attach event >
}
//</
loop: children >
//----</
set_Event_on_Children() >----
}
function add_Sizeable_Div() {
//------<
add_Sizeable_Div() >------
//*adds a
sizable div-around the image
//<
adapt image >
var img = this;
var intWidth = img.width;
img.style.width = "100%";
//</
adapt image >
//<
create div >
var div = document.createElement("div");
div.setAttribute("contenteditable", "true");
div.setAttribute("class", "divResizeImage");
div.style.resize = "both";
div.style.overflow = "auto";
div.style.width = intWidth + "px";
div.style.paddingRight = "6px";
div.style.paddingBottom = "6px";
div.style.border = "1px solid red";
//</
create div >
//<
move img into div >
//*jquery
wrap
this.parentNode.append(div);
div.appendChild(this);
//</
move img into div >
//------</
add_Sizeable_Div() >------
}
function remove_all_ImageResize_Divs()
{
//----<
remove_all_ImageResize_Divs() >----
//*removes
all resize-Divs
//< get
divResize >
var divContainer =
document.getElementById("ctlEditor_HTML");
var divElements =
divContainer.getElementsByClassName("divResizeImage");
//</
get divResize >
//<
loop: children >
var i = 0;
while (divElements.length > 0) {
//< check: loop >
i++;
if (i > 100) break;
//</ check: loop >
//< attach event >
var divResizeImage = divElements[0]
//< get image >
var img = divResizeImage.firstChild;
img.style.width =
divResizeImage.style.width;
//</ get image >
divResizeImage.parentNode.append(img);
divResizeImage.parentNode.removeChild(divResizeImage);
//</ attach event >
}
//</
loop: children >
//<
reactivate click >
set_Event_on_Children("ctlEditor_HTML", "img", "click");
//</
reactivate click >
//----</
remove_all_ImageResize_Divs() >----
}
</script>
@*------------</
script: Image-Tools >------------*@
|