如何使用我自己的所见即所得编辑器插入图像

Question

我正在构建我自己的所见即所得编辑器，使用 iframe，我想找到一种简单地插入图像的方法！我已经有了粗体样式，斜体样式，H1和H2，使用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');
    }

效果很好，但 我正在努力 "Insert image button" 因为我真的是编码新手，所以我尝试了这个：

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

但这不起作用。我的意图是用户可以从他们的计算机 and/or 从互联网上传图像。请，如果有人知道如何插入图像...求助！

非常感谢！

Answer 1

您是否尝试过使用相对 link 来格式化您的图像位置，其中 @ 符号位于图像位置之前。您的代码和解释也没有解释他们是从他们的机器上传图像到“我的文档”之类的位置，还是严格从 http link 上传图像。

要使用 Javascript 和 HTML 从本地计算机上传，您可以查看此代码。您的问题是在编写自定义 Javascript 函数时经常出现的问题。

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

您可以在此处查看有关使用 Javascript 和 HTML 5 上传图片的完整文章：https://thiscouldbebetter.wordpress.com/2012/12/20/uploading-and-displaying-an-image-from-a-file-using-html5-and-javascript/

Answer 2

应该是"insertimage"而不是createImage。

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

如何使用我自己的所见即所得编辑器插入图像

How to insert images with my own WYSIWYG editor

javascript

wysiwyg

image

editor

insert