How to insert images with my own WYSIWYG editor

Question

I'm building my own WYSIWYG editor, using an iframe, I'd like to find just a way to simply insert an image! I already got the Bold style, Italic style, H1 and H2, using JS:

    function bold(){
    editor.document.execCommand("bold", false, null)
    }

    function italic(){
    editor.document.execCommand("italic", false, null)

    }
    function h1(){
    editor.document.execCommand('formatBlock',false,'h1');
    }

    function h2(){
    editor.document.execCommand('formatBlock',false,'h2');
    }

That works very well but I'm struggling with "Insert image button" Since I'm really new with coding, I was trying this:

function image(){
var image = prompt ("Paste or type a link", "http://")
editor.document.execCommand("createImage", false, image)

But that doesn't work. My intention is that the users have the possibility to upload images from their computer and/or from internet. Please, if anyone knows how to insert an image... help!

A LOT OF THANKS IN ADVANCE!

Writing your own WYISWYG editor is one of the worst ideas that you can have. It's better to use one of the existing ones that have been developed for years and have a team behind trying to fix the infinite number of bugs that exists around this feature in the different browsers — AlfonsoML, Feb 22 '15 at 11:02

Alex · Accepted Answer · 2015-02-21T03:17:40.580

Have you tried formatting your image location using a relative link where the @ symbol precedes the image location. Your code and explanation also doesn't explain are they uploading the image from their machine in a location like My Documents or if they are uploading the image strictly from and http link.

To upload from a local machine using Javascript and HTML, you might checkout this code. Your question is one that regularly comes up when writing custom Javascript functions.

<script type='text/javascript'>

function main()
{
var inputFileToLoad = document.createElement("input");
inputFileToLoad.type = "file";
inputFileToLoad.id = "inputFileToLoad";
document.body.appendChild(inputFileToLoad);

var buttonLoadFile = document.createElement("button");
buttonLoadFile.onclick = loadImageFileAsURL;
buttonLoadFile.textContent = "Load Selected File";
document.body.appendChild(buttonLoadFile);
}

function loadImageFileAsURL()
{
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0)
{
    var fileToLoad = filesSelected[0];

    if (fileToLoad.type.match("image.*"))
    {
        var fileReader = new FileReader();
        fileReader.onload = function(fileLoadedEvent) 
        {
            var imageLoaded = document.createElement("img");
            imageLoaded.src = fileLoadedEvent.target.result;
            document.body.appendChild(imageLoaded);
        };
        fileReader.readAsDataURL(fileToLoad);
    }
}
}

main();

</script>

You can check out the full article on this issue of image uploads using Javascript and HTML 5 here: https://thiscouldbebetter.wordpress.com/2012/12/20/uploading-and-displaying-an-image-from-a-file-using-html5-and-javascript/

Johnnie, thanks for answering my question. Well, I'd like to upload an image whether from my computer or from internet. Preferably from my computer, but either can help. :) — Rafa, Feb 21 '15 at 03:05
Wow! I only understand the 50% of that code, but I tried it and it works!! Now I have to do a few modifications and it will be enough for now! **Thank you, Johnnie!** — Rafa, Feb 23 '15 at 19:17

score 0 · Answer 2 · answered Apr 24 '19 at 13:44

0

It should be "insertimage" instead of createImage.

function image(){var image = prompt ("Paste or type a link", "http://")editor.document.execCommand("insertimage", false, image)}

answered Apr 24 '19 at 13:44

Sedem Stickx

1
2

reza · Answer 3 · 2022-11-04T05:24:41.043

you can use this post

    var insertImgTag = document.createElement("div");
    insertImgTag.id = "insertImgTag";
    if (document.getSelection().anchorNode != null) {
    document.getSelection().getRangeAt(0).insertNode(insertImgTag);}
    $("#insertImgTag")
            .parent()
            .html(
                "<img src=/images/" + $("#name").val() + " width='" + imgWidth + "%' alt='" + imgAlt + "'>"
            );

that I used it in my own javascript editor according to this post

How to insert images with my own WYSIWYG editor

3 Answers3