论坛 › 马黑黑教程专版 › pencil code

马黑黑 发表于 2023-1-3 19:19

pencil code

<style>
#mnbox { margin: -40px 0 0 0; padding: 0px; width: 95%; height: 95%; display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: repeat(3,1fr); grid-template-areas: 'css stage' 'html stage' 'js stage'; gap: 10px 10px; background: linear-gradient(to right top, hsl(60,45%,40%),hsl(30,50%,45%)); box-shadow: 4px 4px 12px #000; border-radius: 6px; position: relative; z-index: 1; }
#csswrap, #htmlwrap, #jswrap {margin: 0;padding: 8px;display: grid;grid-template-rows: 30px auto;box-shadow: 4px 2px 8px #000;border: 1px solid #ccc;border-radius: 6px;}
#csswrap { grid-area: css; }
#htmlwrap { grid-area: html; }
#jswrap { grid-area: js; }
#cssbox, #htmlbox, #jsbox { padding: 6px; resize: none; font: normal 14px sans-serif; background: hsl(223,43%,90%); outline: 2px solid tan; }
#cssbox:focus, #htmlbox:focus, #jsbox:focus { outline: 2px solid orange; }
.toolbar { display: grid; grid-auto-flow: column; place-content: start space-between; }
#stage { grid-area: stage; position: relative; background: #eee; border-radius: 6px; padding: 10px; overflow: auto; box-shadow: 4px 2px 8px #000; opacity: .9; }
.tbar { grid-area: bar; padding: 6px; margin-bottom: 8px; }
#runjs { outline: none; border: 3px solid snow; background: #9a8d39; border-radius: 6px; box-shadow: 1px 2px 2px gray; cursor: pointer; }
#runjs:hover { background: #808000; }
</style>

<div id="mnbox">
        <div id="csswrap">
                <div class="toolbar"><span>css</span></div>
                <textarea id="cssbox" placeholder="css代码（不要&lt;style&gt;&lt;/style&gt;）"></textarea>
        </div>
        <div id="htmlwrap">
                <div class="toolbar"><span>html</span></div>
                <textarea id="htmlbox" placeholder="HTML代码"></textarea>
        </div>
        <div id="jswrap">
                <div class="toolbar">
                        <span>js</span>
                        <span>
                                <input id="runnow" type="checkbox" /><label for="runnow">同步</label>
                                <input id="runjs" type="button" value="运行JS代码" />
                        </span>
                </div>
                <textarea id="jsbox" placeholder="js代码（不要&lt;script&gt;&lt;/script&gt;）"></textarea>
        </div>
        <div id="stage"></div>
</div>

<script>

let editbox = ;

/* for discuz! */
(function() {
        let w = 0.8 * window.screen.width, h = 0.7 * window.screen.height;
        mnbox.style.cssText = `width: ${w}px; height: ${h}px; left: calc(50% - 81px); transform: translateX(-50%);`;
})();

let insetIndent = (ele,e) => {
        e.preventDefault();
        let indent = '';
        let start = ele.selectionStart, end = ele.selectionEnd, selected = ele.value.substring(start,end);
        let str1 = ele.value.substring(0, start), str2 = ele.value.substring(end);
        if (e.keyCode === 13) {
                let strAr = str1.split('\n');
                let targetLine = strAr;
                let tmpAr = targetLine.match(/^[\s]+/g);
                if (tmpAr !== null) {
                        console.log(tmpAr.length,tmpAr);
                        indent += tmpAr;
                }
                indent = '\n' + indent;
        } else if (e.keyCode === 9) {
                indent = '\t';
        }
        ele.value = str1 + indent + str2;
        ele.setSelectionRange(start + indent.length, start + indent.length);
}

let updateHTML = () => stage.innerHTML = `<style>${cssbox.value}</style>${htmlbox.value}`;

let updateJS = () => {
        let jscode = `${jsbox.value}`;
        let func = new Function(jscode);
        func();
}

editbox.forEach( (item,key) => {
        if (key < 2) {
                item.oninput = () => {
                       updateHTML();
                        if (runnow.checked) updateJS();
                }
        }
        item.onkeydown = (e) => { if (e.keyCode === 9 || e.keyCode === 13) insetIndent(item,e); };
});

runjs.onclick = () => {
        updateHTML();
        updateJS();
}

</script>

马黑黑 发表于 2023-1-3 19:26

本帖最后由 马黑黑 于 2023-1-3 19:33 编辑

极简HTML在线编辑器更名为：pencil code

更新记录：

    2023年1月3日 ：界面美化；支持Tab键缩进；支持回车键智能缩进；支持JS代码同步运行（编写好JS代码且勾选“同步”单选项卡后，CSS或HTML代码的更新会自动运行JS代码，若不启用同步运行，每次更新CSS或HTML后需要点击”运行JS代码“按钮）。

下载地址：马黑网盘 (ysepan.com) [ 网络相关目录]

樵歌 发表于 2023-1-3 19:39

又放新招大招了{:4_199:}

红影 发表于 2023-1-3 19:58

原来回车键智能缩进是用这里的，还增加了同步功能。黑黑的这个工具越发完美了{:4_199:}

红影 发表于 2023-1-3 19:59

pencil code 这个是什么意思？

红影 发表于 2023-1-3 20:00

还是原来的叫法更直观点{:4_173:}

马黑黑 发表于 2023-1-3 20:09

樵歌 发表于 2023-1-3 19:39
又放新招大招了

玩玩，没啥大小

马黑黑 发表于 2023-1-3 20:11

红影 发表于 2023-1-3 19:59
pencil code 这个是什么意思？

pencil，铅笔，code，代码。仿 Code Pen 而来，咱这是小巫，见不了大巫，所以钢笔换铅笔，还低调小写{:4_170:}

马黑黑 发表于 2023-1-3 20:12

红影 发表于 2023-1-3 20:00
还是原来的叫法更直观点

命名嘛，前面的没想好，现在想好了

马黑黑 发表于 2023-1-3 20:12

红影 发表于 2023-1-3 19:58
原来回车键智能缩进是用这里的，还增加了同步功能。黑黑的这个工具越发完美了

现在与完美无关，都是基本功能一一加入。

红影 发表于 2023-1-3 23:03

马黑黑 发表于 2023-1-3 20:11
pencil，铅笔，code，代码。仿 Code Pen 而来，咱这是小巫，见不了大巫，所以钢笔换铅笔，还低调小写{:4_ ...

原来是黑黑的原创叫法{:4_199:}

红影 发表于 2023-1-3 23:04

马黑黑 发表于 2023-1-3 20:12
命名嘛，前面的没想好，现在想好了

我外语不好，还是习惯看中文的{:4_173:}

红影 发表于 2023-1-3 23:04

马黑黑 发表于 2023-1-3 20:12
现在与完美无关，都是基本功能一一加入。

黑黑辛苦了{:4_190:}

马黑黑 发表于 2023-1-3 23:34

红影 发表于 2023-1-3 23:04
黑黑辛苦了

这个是为自己做的{:5_117:}

马黑黑 发表于 2023-1-3 23:35

红影 发表于 2023-1-3 23:04
我外语不好，还是习惯看中文的

软件名字吗，无所谓了

马黑黑 发表于 2023-1-3 23:35

红影 发表于 2023-1-3 23:03
原来是黑黑的原创叫法

是的

红影 发表于 2023-1-4 21:28

马黑黑 发表于 2023-1-3 23:34
这个是为自己做的

会代码真方便{:4_187:}

红影 发表于 2023-1-4 21:29

马黑黑 发表于 2023-1-3 23:35
软件名字吗，无所谓了

嗯，尤其你为自己做的工具，完全可以起自己喜欢的名字{:4_173:}

红影 发表于 2023-1-4 21:30

马黑黑 发表于 2023-1-3 23:35
是的

我还去搜了一下，原来是你原创的{:4_173:}

马黑黑 发表于 2023-1-4 22:25

红影 发表于 2023-1-4 21:30
我还去搜了一下，原来是你原创的

你是说这个 pencil code 吧？刚刚出炉，还没完善。

查看完整版本: pencil code