简单插入图片在线编辑器代码

最新推荐文章于 2025-02-28 18:26:24 发布

原创最新推荐文章于 2025-02-28 18:26:24 发布 · 2.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#input #button #function #javascript #iframe

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种简单的在线编辑器实现方法，该编辑器支持直接从本地选择图片并将其插入到编辑区域。通过修改示例代码中的图片路径，可以轻松地将此功能部署到自己的服务器上。

简单的实现插入图片的在线编辑器，如果要测试，需要更改函数insImg()中的变量imgPath的值，上传文件的控件只起到获取文件名的作用，具体路径由自己来设置。

当然，在插入图片之前需要上传本地文件到服务器～

<html>
    <head>
        <title>editer </title>
        <style>
            body {
                font-size: 12px;
            }

            #edit, #view {
                border: 1px solid red;
                width: 100%;
                height: 200px;
                overflow-y: auto;
                margin-bottom: 10px;
            }

            #view {
                border-color: #ddd;
            }
        </style>
    </head>
    <body>
        <form name="myForm" enctype="mulitipart/form-data" method="post" action="#">
            <IFRAME id="edit">
            </IFRAME>
            <Script Language="JavaScript">

            var editor;
            editor = document.getElementById("edit").contentWindow;

            editor.document.designMode = 'On';
            editor.document.contentEditable = true;

            editor.document.open();
            editor.document.writeln('<html><body></body></html>');
            editor.document.close();

            function getData(){
                alert("getting data");
                var value = editor.document.body.innerHTML;
                alert("the value is " + value);
                document.getElementById("view").value = value;
            }

            function insImg(){
                var file = document.getElementById('myFile');
                var fileURL = file.value;

                fileURLSplit = fileURL.split(".");

                fileExt = fileURLSplit[fileURLSplit.length - 1].toLowerCase();

                if (fileExt == "jpg" || fileExt == "gif" || fileExt == "bmp") {
                    var imgPath = 'http://192.168.0.3/test/img/' + fileURL;
                    var obj = document.getElementById("edit").contentWindow
                    obj.document.execCommand('InsertImage', false, imgPath);
                }
                else {
                    alert("the format is not correct!" + fileURL);
                }

            }
            </script>
            <input type="hidden" id="view" name="desc">
            </input>
            <br>
            <input type="file" id="myFile">
            <br>
            <input type="button" value="insPic" onclick="insImg()"><input type="button" value="getDate" onclick="getData()">
            </form>
        </body>
    </html>