Adding image to WYSIWYG editor after upload

Question

I've created a WYSIWYG text editor and have separated it into sections so I can include it in different parts of my site.

On a page I want to have the editor I put the following code:

<div id="wysiwyg_controls">
<?php include_once("wysiwyg.php"); ?>
</div>
<iframe name="richTextField" id="wysiwyg"></iframe>

The wysiwyg.php file included here is as follows but not really important for this question:

<select onChange="execCmdWithArg('fontName', this.value);">
    <option value="Arial">Arial</option>
    <option value="Courier">Courier</option>
    <option value="Georgia">Georgia</option>
    <option value="Tahoma">Tahoma</option>
    <option value="Verdana">Verdana</option>
</select>
<select onChange="execCmdWithArg('fontSize', this.value);">
    <option value="1">10</option>
    <option value="2">13</option>
    <option value="3" selected>16</option>
    <option value="4">18</option>
    <option value="5">24</option>
    <option value="6">32</option>
    <option value="7">48</option>
</select>
<select onchange="execCmdWithArg('formatblock', this.value);">
    <option value="h1">&lt;h1&gt;</option>
    <option value="h2">&lt;h2&gt;</option>
    <option value="h3">&lt;h3&gt;</option>
    <option value="h4">&lt;h4&gt;</option>
    <option value="h5">&lt;h5&gt;</option>
    <option value="h6">&lt;h6&gt;</option>
    <option value="h7">&lt;h7&gt;</option>
</select>
&nbsp;
<button onClick="execCmd('bold'); return false;"><img src="../media/text_edit/bold.png" width="18px" height="18px"></button>
<button onClick="execCmd('italic'); return false;"><img src="../media/text_edit/italic.png" width="18px" height="18px"></button>
<button onClick="execCmd('underline'); return false;"><img src="../media/text_edit/underline.png" width="18px" height="18px"></button>
<button onClick="execCmd('strikeThrough'); return false;"><img src="../media/text_edit/strikethrough.png" width="18px" height="18px"></button>
&nbsp;
<button onClick="execCmd('justifyLeft'); return false;"><img src="../media/text_edit/left.png" width="18px" height="18px"></button>
<button onClick="execCmd('justifyCenter'); return false;"><img src="../media/text_edit/center.png" width="18px" height="18px"></button>
<button onClick="execCmd('justifyRight'); return false;"><img src="../media/text_edit/right.png" width="18px" height="18px"></button>
<button onClick="execCmd('justifyFull'); return false;"><img src="../media/text_edit/justify.png" width="18px" height="18px"></button>
&nbsp;
<button onClick="execCmd('subscript'); return false;"><img src="../media/text_edit/subscript.png" width="18px" height="18px"></button>
<button onClick="execCmd('superscript'); return false;"><img src="../media/text_edit/superscript.png" width="18px" height="18px"></button>
&nbsp;
<button onClick="execCmd('insertUnorderedList'); return false;"><img src="../media/text_edit/list.png" width="18px" height="18px"></button>
<button onClick="execCmd('insertOrderedList'); return false;"><img src="../media/text_edit/list_numbered.png" width="18px" height="18px"></button>
&nbsp;
<button onClick="execCmdWithArg('createLink', prompt('Enter a URL:', 'http://')); return false;"><img src="../media/text_edit/link.png" width="18px" height="18px"></button>
<button onClick="execCmd('unlink'); return false;"><img src="../media/text_edit/unlink.png" width="18px" height="18px"></button>
&nbsp;
<button onClick="add_wysiwyg_image(); return false;"><img src="../media/text_edit/image.png" width="18px" height="18px"></button>
&nbsp;
<button onClick="toggleSource(); return false;"><img src="../media/text_edit/source.png" width="18px" height="18px"></button>
<div id='wysiwyg_upload_div'>
<input type='file' id='wysiwyg_image' name='wysiwyg_image'><br /><button id="upload_wysiwyg_image" onClick="upload_wysiwyg_image(); return false;">Upload Image</button>
</div>

I also have the following script:

var showingSourceCode = false;
function enableEditMode (){
    richTextField.document.designMode = 'On';
}
function execCmd (command){
    richTextField.document.execCommand(command, false, null);
}
function execCmdWithArg (command, arg){
    richTextField.document.execCommand(command, false, arg);
}
function add_wysiwyg_image (){
    document.getElementById('wysiwyg_upload_div').style.display = "block";
}
function upload_wysiwyg_image(){
    var formData = new FormData();
    formData.append("wysiwyg_image", document.getElementById("wysiwyg_image").files[0]);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
            console.log(this.responseText);
            if(this.responseText.includes('uploaded')){
                var upload_string = this.responseText;
                var image_name = upload_string.replace("uploaded ","")
                var image_path = 'wysiwyg_images/'+image_name;
                console.log(image_path);
                execCmdWithArg('insertImage', image_path);//this is the line not working as expected
                document.getElementById('wysiwyg_upload_div').style.display = "none";
            }
        }
    };
    xmlhttp.open("POST", "upload_wysiwyg_image.php", true);
    xmlhttp.send(formData);
}
function toggleSource(){
    if(showingSourceCode){
        richTextField.document.getElementsByTagName('body')[0].innerHTML = richTextField.document.getElementsByTagName('body')[0].textContent;
        showingSourceCode = false;
    }else{
        richTextField.document.getElementsByTagName('body')[0].textContent = richTextField.document.getElementsByTagName('body')[0].innerHTML;
        showingSourceCode = true;
    }
}

And a separate php file called upload_wysiwyg_image.php:

<?php
    if(isset($_FILES['wysiwyg_image']) && $_FILES['wysiwyg_image']['name']!=""){
        $wysiwyg_image = $_FILES['wysiwyg_image']['name'];
        move_uploaded_file( $_FILES['wysiwyg_image']['tmp_name'], "../wysiwyg_images/$wysiwyg_image");
        echo 'uploaded '.$wysiwyg_image;
    }
?>

The issue is with uploading images or rather adding the uploaded images to the editor.

I used to have onClick="execCmdWithArg('insertImage', prompt('Enter a URL:', 'http://')); return false;" instead of onClick="add_wysiwyg_image(); return false;" which meant I had to add the extra upload_wysiwyg_image() function and upload_wysiwyg_image.php file.

I have changed it so instead of a URL prompt I actually do a file upload, the file is being uploaded to the correct folder and that is fine but it is not being added to the editor, the line commented in the JS is the line that is having the issue.

I think this might be due to the path and it being relevant to the different file locations although no broken image appears in the editor (which it did before if it was a bad URL). My folder structure for the above files relevant to my root folder is as follows:

/web/script.js
/admin/{file_where_wysiwyg_is_included}.php
/admin/wysiwyg.php
/admin/upload_wysiwyg_image.php
/wysiwyg_images/{image_name}.png
/{file_on_front_end_where_edited_content_is_displayed}.php

Answer 1

To resolve this issue I set a <base> tag for my <iframe> .

I added these lines to the enableEditMode() function:

var head_tag = richTextField.document.getElementsByTagName("head");
var base_tag = richTextField.document.createElement("base");
base_tag.setAttribute("href", "http://example.com/");
richTextField.document.getElementsByTagName("head")[0].appendChild(base_tag);