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

最新推荐文章于 2022-10-13 10:29:56 发布

BlissKid

最新推荐文章于 2022-10-13 10:29:56 发布

阅读量2.7k

点赞数

分类专栏： javascript 文章标签： input button function javascript iframe border

本文链接：https://blog.csdn.net/BlissKid/article/details/2802736

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简单的实现插入图片的在线编辑器，如果要测试，需要更改函数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" οnclick="insImg()"><input type="button" value="getDate" οnclick="getData()">
            </form>
        </body>
    </html>

BlissKid

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单插入图片在线编辑器代码

简单的实现插入图片的在线编辑器，如果要测试，需要更改函数insImg()中的变量imgPath的值，上传文件的控件只起到获取文件名的作用，具体路径由自己来设置。当然，在插入图片之前需要上传本地文件到服务器～ editer body { font-size: 12px;
复制链接

扫一扫

专栏目录