我正在构建自己的 WYSIWYG 编辑器,使用 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');
}
效果很好,但我在“插入图片按钮”方面遇到困难 由于我对编码真的很陌生,所以我正在尝试这样做:
function image(){
var image = prompt ("Paste or type a link", "http://")
editor.document.execCommand("createImage", false, image)
但这行不通。我的意图是用户可以从他们的计算机和/或互联网上传图像。请,如果有人知道如何插入图像...帮助!
提前致谢!
最佳答案
您是否尝试过使用相对链接来格式化图像位置,其中 @ 符号位于图像位置之前。您的代码和解释也没有解释他们是从他们的机器上传图像到“我的文档”之类的位置,还是严格从 http 链接上传图像。
要使用 Javascript 和 HTML 从本地计算机上传,您可以 checkout 此代码。您的问题是在编写自定义 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/
关于javascript - 如何使用我自己的所见即所得编辑器插入图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28637780/