上传后将图像添加到所见即所得编辑器

Question

我创建了一个 WYSIWYG 文本编辑器，并将其分成多个部分，以便我可以将其包含在我网站的不同部分。

在我想让编辑器出现的页面上，我输入了以下代码：

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

此处包含的 wysiwyg.php 文件如下，但对于这个问题并不重要：

<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>

我还有以下脚本：

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;
    }
}

还有一个名为 upload_wysiwyg_image.php 的单独 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;
    }
?>

问题在于上传图片或将上传的图片添加到编辑器。

我曾经使用 onClick="execCmdWithArg('insertImage', prompt('Enter a URL:', 'http://')); return false;" 而不是 onClick="add_wysiwyg_image(); return false;"，这意味着我必须添加额外的 upload_wysiwyg_image() 函数和 upload_wysiwyg_image.php 文件。

我已经更改了它，所以我实际上进行了文件上传，而不是 URL 提示，文件正在上传到正确的文件夹，这很好，但它没有被添加到编辑器中， JS 中注释的行是有问题的行。

我认为这可能是由于路径和它与不同的文件位置相关，尽管编辑器中没有出现损坏的图像（如果它是坏的 URL 之前它会出现）。我的根文件夹相关的上述文件的文件夹结构如下：

/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

为了解决这个问题，我为我的<iframe>设置了一个<base>标签。

我将这些行添加到 enableEditMode() 函数中：

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);

上传后将图像添加到所见即所得编辑器

Adding image to WYSIWYG editor after upload

javascript

php

wysiwyg

image