将图像上传到所见即所得编辑器并应用默认样式

时间:2018-07-17 09:38:11

标签: javascript jquery css wysiwyg

我为我的网站创建了一个所见即所得的文本编辑器,并且正在尝试处理图像。

到目前为止,我已经将我的图片上传并添加到我的文本编辑器中,我希望使用类似这样的图片:

$("#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);
}

我希望能够在插入图像时对此图像进行格式化。因此,例如设置max-width/max-height或能够选择float进行定位。

可以在插入时在这一点上完成此操作,还是需要将其插入,然后调用另一个函数来设置样式值?

如果有人可以为此指出正确的方向,

0 个答案:

没有答案