CodeMirror带底部拖拽块代码 - 李清灿的开发笔记

<html lang="zh">
<head>
    <meta charSet="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CodeMirror</title>
    <script src="http://lf3-cdn-tos.bytecdntp.com/cdn/jquery/3.2.1/jquery.min.js"></script>
    <link href="http://lf3-cdn-tos.bytecdntp.com/cdn/codemirror/5.60.0/codemirror.min.css" rel="stylesheet">
    <script src="http://lf3-cdn-tos.bytecdntp.com/cdn/codemirror/5.60.0/codemirror.min.js"></script>
    <style>
        .grippie {
            background: #EEEEEE url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAFCAMAAACD1meMAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURbu7u////3iwjPUAAAACdFJOU/8A5bcwSgAAABRJREFUeNpiYMADGHEDBhroAwgwAA9QADeT0qnSAAAAAElFTkSuQmCC) no-repeat scroll center 4px;
            border-color: #DDDDDD;
            border-style: solid;
            border-width: 0pt 1px 1px;
            cursor: row-resize;
            height: 15px;
            overflow: hidden;
            margin-bottom: 10px;
            user-select: none;
        }
    </style>
</head>
<body>
<textarea id="cm" style="display: none"></textarea>
<textarea id="cm2" style="display: none"></textarea>
</body>
<script>
    $(function () {
        let cm = createCodeMirror("cm", {
            autofocus: true,
            width: 300,
            height: 200
        });

        let cm2 = createCodeMirror("cm2", {
            autofocus: false
        });
    });

    function createCodeMirror(id, options) {
        var win = $(window);
        //配置
        let defaultOptions = {
            lineNumbers: true,
            lineWrapping: false,
            indentUnit: 4,
            tabSize: 4
        };
        for (let key in options) {
            defaultOptions[key] = options[key];
        }
        //创建编辑器
        let cm = CodeMirror.fromTextArea(document.getElementById(id), defaultOptions);
        let wrapper = $(cm.getWrapperElement());
        wrapper.css("border", "1px solid silver");
        wrapper.css("border-radius", "3px 3px 0 0");
        let width = defaultOptions.width ? defaultOptions.width : wrapper.width();
        let height = defaultOptions.height ? defaultOptions.height : wrapper.height();
        cm.setSize(width, height);
        //增加拖拽块
        let grippie = $("<div class=\"grippie\"></div>")
        grippie.css("border-radius", "0 0 3px 3px");
        grippie.width(width);
        wrapper.after(grippie);
        //绑定拖拽事件
        let beforeY = 0;
        let beforeHeight = 0;
        function mousemove(e){
            console.log(id + "(width=" + wrapper.width() + ",height=" + wrapper.height() + ")");
            cm.setSize(wrapper.width(), beforeHeight + (e.clientY - beforeY));
        }
        grippie.on("mousedown", function (e) {
            beforeY = e.clientY;
            beforeHeight = wrapper.height();
            win.on("mousemove", mousemove);
            e.stopPropagation();
        });
        win.on("mouseup", function (e) {
            win.off("mousemove", mousemove);
        });
        return cm;
    }
</script>
</html>
注：如果有引入bootstrap样式的话，wrapper.width()可能要替换为wrapper.outerWidth()，否则获取到的宽度会偏小一点，变成宽度跟着缩小。即：原始样式（width值是原来宽度）；bootstrap样式（outerWidth值才是原来宽度），具体原因未知。