我的JS富文本编辑器（1）

孟建行

于 2020-02-28 16:24:39 发布

阅读量209

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/u011711997/article/details/104558633

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

近来，无事，学习js，感觉很有意思，于是乎想写个自己的富文本编辑器，重在明白它的原理，于是，自己写了一个可以改变文本和插入图片的富文本编辑器的雏形，由于我本人不是前端工程师，所以，错误之处，在所难免，以下是这个富文本编辑器的雏形，喜欢的小伙伴可以看看。

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试MyEditor</title>
    <style>
        .MyEditor{
            border:1px solid gray;
            overflow:auto;
        }

        .MyEditor #content{
            border:1px solid gray;
            overflow:auto;
        }

    </style>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script>
        let selection=null;
        $(function () {

            let w=0;
            let h=0;

            if($("#InputText").width() == 0)
            {
                w = 200;
            }
            else
            {
                w= $("#InputText").width();
            }

            if($("#InputText").height() == 0)
            {
                h = 150;
            }
            else
            {
                h= $("#InputText").height();
            }

            $("#InputText").hide();

            $("#InputText").replaceWith(
                "<div class='MyEditor'>" +
                "<div>" +
                "<button id='h1'>h1</button>" +
                "<button id='insertImgBtn'>Img</button>"+
                "</div>" +
                "<div id='content' contenteditable='true'>" +
                "</div>" +
                "</div>");

            $(".MyEditor").width(w);

            $(".MyEditor #content").height(h);

            $(".MyEditor #h1").click(function () {

                if(selection === null)
                {
                    alert("请选择操作文本");
                    return ;
                }

                let selRange = selection.getRangeAt(0);
                let h1 = document.createElement("h1");
                h1.innerHTML = selection;
                selection.deleteFromDocument();
                selRange.insertNode(h1);
           });

            $(".MyEditor #insertImgBtn").click(function () {

                if(selection === null)
                {
                    alert("请选择插入位置");
                    return ;
                }

                let src = prompt("请输入图片的url");

                if(src === null)
                    return ;

                let imgw = prompt("请输入图像的显示宽度");
                let imgh = prompt("请输入图像的显示高度");

                let selRange = selection.getRangeAt(0);
                let img = document.createElement("img");
                img.setAttribute("src",src);
                img.setAttribute("width",imgw);
                img.setAttribute("height",imgh);
                selection.deleteFromDocument();
                selRange.insertNode(img);
             });

            $(".MyEditor #content").click(function () {
                selection = window .getSelection();
            });
        })
    </script>
</head>
<body>
    <div id="InputText" style="width: 400px;height: 200px;"></div>
</body>
</html>