产品概要单词替换，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4

            
            <div class="left">
    <textarea></textarea>
</div>
<div class="right"></div>

编辑器加载中

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

            
            /* 示例代码 */
body {
    text-align: center;
    padding: 10px 100px;
}

i {
    color: #777;
}

.left textarea {
    width: 100%;
    height: 200px;
    padding: 10px;
    line-height: 1.7;
}

.right {
    text-align: left;
    font-size: 14px;
    background: transparent;
    line-height: 2;
    margin: 0;
}

编辑器加载中

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

            
            let s;
let w = "Carrier/aircraft manufacturer#Model/aircraft type#Endurance/flight hour#Maximum range/max range#Cabin altitude/Cabin height#Number of seats/passengers";
setInterval(() => {
    [document.querySelector(".left textarea").value].forEach(a => {
        if (s != a) {
            s = a;
            if (!s) return;
            let q = s.split(/\n/g);
            q = q.map(a => {
                if (a.includes(":")) {
                    a = a.split(":");
                    w.split("#").forEach(b => {
                        b = b.split("/");
                        if (a[0] == b[0]) {
                            a[0] = b[1];
                        }
                    });
                    return a;
                }
            });
            document.querySelector(".right").innerHTML = q.reduce((a, b) => a + b[0] + ": " + b[1] + "<br>", "");
        }
    });
}, 500);

编辑器加载中

预览

控制台