js实现简单富文本编辑器二-网页编程网

当前位置：主页 >> 网页特效 >> 正文

js实现简单富文本编辑器二

阅读：2826 输入：2021-04-21 15:24:14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生JS实现简单富文本编辑器</title>
</head>
<body>

<center>
        <h2 style="margin:auto;">原生JS实现简单富文本编辑器</h2>
    </center>
    <hr>

<div id="toolbar"
        style="width:700px;margin:auto;border:2px solid gray;padding: 5px;overflow: auto;font-family: 'Courier New', Courier, monospace;">
        <input type="button" name="bold" value='加粗' class="bold">
        <input type="button" name="italic" value='斜体' class="italic">
        <input type="button" name="underline" value='下划线' class="decotation">
        大小
        <select name="fontSize" class="font">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>
        
        <input type="button" name="insertImage" value='插入图片(未完成,可粘贴)' class="insImg">
        <input type="button" name="selectAll" value='全选' class="selectAll">
        <input type="button" name="undo" value='撤销' class="undo">
        <input type="button" name="justifyLeft" value='居左' class="justifyLeft">
        <input type="button" name="justifyCenter" value='居中' class="justifyCenter">
        <input type="button" name="justifyRight" value='居右' class="justifyRight">
    </div>

bindElem() {

}

action(obj, attr) {
                    obj.onclick = function () {
                        document.execCommand(attr, true);
                    }
                }

}

new Editor();

})();

// 监听粘贴事件
        document.querySelector('#edit').addEventListener('paste', function (e) {
            // 判断剪切板是否有内容
            if (!(e.clipboardData && e.clipboardData.items)) {
                return;
            }

for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
                var item = e.clipboardData.items[i];
                if (item.kind == "file") {
                    var blob = item.getAsFile();
                    var reader = new FileReader();
                    var imgs = new Image();
                    imgs.file = blob;
                    reader.onload = (function (aImg) {
                        return function (e) {
                            aImg.src = e.target.result;
                        }
                    })(imgs)
                    reader.readAsDataURL(blob);
                    document.querySelector('#edit').appendChild(imgs);
                }
            }
        });

document.getElementById("save").onclick = function () {
            alert(document.getElementById("edit").innerHTML);
        }

document.querySelector('.insImg').onclick = function(){
            document.getElementById("shade").style.display = "block";
            var div = document.createElement("div");  
            div.style.cssText=
                "width:300px;height:50px;border:1px solid #000;background-color:white;" + 
                "text-align:center;line-height:50px;" + 
                "position:absolute;z-index:9;left:0; top:0;right:0;bottom:0;margin:auto;"; 
            var input = document.createElement("input");
            input.type = "file";
            div.appendChild(input);
            document.body.appendChild(div);
        }
    </script>
</body>
</html>

相关阅读: 简易富文本，键盘按回车键时自动添加p标签; CSS实现代码高亮显示行数原理解析，设计自己代码高亮; js实现富文本编辑器，支持上传图片base64