0

I have created a wysiwyg text editor for my site and am trying to work with images.

So far I've got my image being uploaded and being added to my text editor where I want it using something like this:

$("#upload_wysiwyg_image").unbind("click").bind("click", function() {
    var formData = new FormData();
    var image_to_upload = document.getElementById("wysiwyg_image").files[0];
    formData.append("wysiwyg_image", image_to_upload);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
            if(this.responseText.includes('uploaded')){
                var upload_string = this.responseText;
                var image_name = upload_string.replace("uploaded ","")
                var image_path = '../media/wysiwyg_images/'+image_name;
                execCmdWithArg('insertImage', image_path);
            }
        }
    };
    xmlhttp.open("POST", "upload_wysiwyg_image.php", true);
    xmlhttp.send(formData);
});

function execCmdWithArg (command, arg){
    richTextField.document.execCommand(command, false, arg);
}

I want to be able to format the image at this point when it is being inserted. So for instance set a max-width/max-height or be able to select a float value for positioning.

Can this be done at this point while it is being inserted or will I need to insert it, and then call another function to set values for styling?

If anyone can point me in the right direction for this it would be greatly appreciated.

Bahman Parsa Manesh
  • 2,314
  • 3
  • 16
  • 32
Paddy Hallihan
  • 1,624
  • 3
  • 27
  • 76
  • Possible duplicate of [How to get the image element after insert using execCommand?](https://stackoverflow.com/questions/12507328/how-to-get-the-image-element-after-insert-using-execcommand) – Luca Kiebel Jul 17 '18 at 09:40
  • 1
    It's not completely the same, but you get the gist, use insertHTML instead of insertImage and add the styling to the HTML – Luca Kiebel Jul 17 '18 at 09:41

0 Answers0