整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天給大家推薦幾個(gè)可以在線編程的網(wǎng)站。對(duì)于大部分開(kāi)發(fā)者可能會(huì)不屑使用在線的網(wǎng)站，認(rèn)為在自己電腦安裝環(huán)境不是很簡(jiǎn)單的事情么。但是你很有可能臨時(shí)需要一臺(tái)電腦去測(cè)試一段簡(jiǎn)單的代碼，也有可能想要分享一段代碼給別人，也有可能你想要學(xué)習(xí)很多語(yǔ)言，又不想一一安裝編程環(huán)境。那么今天推薦的網(wǎng)站肯定能滿足你的需求。
網(wǎng)址：https://ideone.com/SExhrM
這個(gè)網(wǎng)站不錯(cuò)，支持Java，但是頁(yè)面有廣告。除了支持Java語(yǔ)言，還支持其他語(yǔ)言。
https://dabblet.com/
這個(gè)網(wǎng)站適合前端測(cè)試使用，該網(wǎng)站可以用來(lái)測(cè)試Html，Css，Js等功能。
網(wǎng)址：http://www.fenby.com/
這個(gè)網(wǎng)站不只支持后端語(yǔ)言編碼，也支持前端編碼，使用體驗(yàn)很不錯(cuò)。支持的語(yǔ)言也很豐富。
前端的支持也很OK。
https://www.w3school.com.cn/tiy/t.asp?f=js_use
當(dāng)然對(duì)于想系統(tǒng)學(xué)習(xí)前端知識(shí)的童鞋可以使用W3School，這個(gè)網(wǎng)站很適合，不僅有大量的案列，還有可以實(shí)戰(zhàn)編碼。
https://www.bccn.net/run/
該網(wǎng)站支持的語(yǔ)言也挺多，比較推薦。
今天的介紹就到這里了，如果你打算系統(tǒng)學(xué)習(xí)編程，那我還是建議你老老實(shí)實(shí)的安裝編譯環(huán)境，安裝編輯器。
得以前剛開(kāi)始接觸網(wǎng)頁(yè)制作時(shí)都是使用Microsoft FrontPage編輯器，也正因?yàn)橛兴?jiàn)即得編輯器，才能讓原本復(fù)雜難懂的HTML原始碼變得更簡(jiǎn)單易懂，它將原始碼轉(zhuǎn)換成可視化內(nèi)容，只要直接輸入文字、圖片、超連接后修改樣式即可將網(wǎng)頁(yè)制作出來(lái)，當(dāng)然這些頁(yè)面背后仍是有所謂的HTML代碼存在，只在需要時(shí)才會(huì)切換原始碼模式。
我后來(lái)還是很習(xí)慣通過(guò)所見(jiàn)即所得（What You See Is What You Get，縮寫WYSIWYG）編輯器寫文章，WordPress內(nèi)置文章編輯功能就是此形式，有時(shí)候遇到要編輯網(wǎng)頁(yè)也會(huì)使用這個(gè)工具來(lái)產(chǎn)生HTML代碼，畢竟以看得到的方式編輯比較容易得到自己需要的東西，大概就是這么一回事。
現(xiàn)在網(wǎng)頁(yè)編輯器已沒(méi)有像十幾年前那么盛行了，可能很多人的電腦里早已沒(méi)有類似的應(yīng)用程序，如果你還是需要這功能，HTML Editor或許可以應(yīng)急，這是一款在線免費(fèi)HTML可視化編輯器，直接打開(kāi)瀏覽器就能使用，它就像一般的網(wǎng)頁(yè)編輯器，使用者可以直接在編輯器里建立圖文內(nèi)容，HTML Editor會(huì)在另一畫面顯示HTML原始碼，編輯時(shí)就能直接取得對(duì)應(yīng)的原始碼以便使用于博客文章或網(wǎng)頁(yè)制作。
這功能看起來(lái)雖然好像微不足道，事實(shí)上當(dāng)你需要時(shí)就會(huì)非常方便，HTML Editor不限于Windows或Mac使用，而且更重要的是不用額外下載安裝軟件；對(duì)于不熟悉HTML編寫的使用者來(lái)說(shuō)，它也能快速制作出帶有樣式的原始碼，尤其是拿來(lái)撰寫網(wǎng)頁(yè)表格，直接使用可視化編輯器會(huì)更簡(jiǎn)單。
印象中舊版Microsoft Office也有類似功能，不過(guò)很可惜現(xiàn)在新版好像已經(jīng)沒(méi)有了。
站點(diǎn)名稱：HTML Editor
網(wǎng)站連接：https://htmleditor.io/
使用教學(xué)
STEP 1
開(kāi)啟HTML Editor網(wǎng)站后，畫面被切割成左右兩個(gè)部分，左邊為所見(jiàn)即所得編輯器，右邊是顯示原始碼的字段，一開(kāi)始已經(jīng)有示例內(nèi)容，可以看到編輯器里樣式文字已經(jīng)被轉(zhuǎn)為我們熟悉的HTML程序碼并顯示于網(wǎng)站右側(cè)。
STEP 2
使用方法很簡(jiǎn)單，我就不通盤介紹所有編輯器的功能，大致上比較會(huì)用到的例如格式，可以調(diào)整H1、H2、H3等不同層級(jí)的標(biāo)題，亦能加入粗體、斜體、項(xiàng)目符號(hào)、縮排或設(shè)定對(duì)齊方向等等，其它例如插入超連接、圖片或視頻也都能從編輯器上方的功能按鈕來(lái)做到。
我認(rèn)為HTML Editor最方便的是可以拿來(lái)做網(wǎng)頁(yè)表格，從「Table」以鼠標(biāo)光標(biāo)快速設(shè)定要多少字段，即可在編輯器里插入表格，同時(shí)設(shè)定每個(gè)字段要顯示那些內(nèi)容。如果要直接以代碼來(lái)撰寫表格可能稍嫌復(fù)雜，以所見(jiàn)即所得編輯器會(huì)簡(jiǎn)單許多。
STEP 3
當(dāng)你一邊在使用編輯器時(shí)，右側(cè)就會(huì)同步顯示對(duì)應(yīng)的HTML代碼，跟早期網(wǎng)頁(yè)編輯器功能差不多，最后直接復(fù)制代碼，就能將它復(fù)制、使用到其它地方，可以說(shuō)非常好用！也不用再因?yàn)樾枰a(chǎn)生原始碼而去找網(wǎng)頁(yè)編輯器，從瀏覽器開(kāi)啟HTML Editor即可。
多人可能都用過(guò)Web編輯器，比如Ckedit等，除了Word等本地編輯器外Web編輯器也是最常用最方便Web內(nèi)容來(lái)源。這些在線編輯器的一個(gè)短板限制很多，不能實(shí)時(shí)反饋在線效果。本文蟲蟲給大家介紹一種很簡(jiǎn)單的無(wú)限制在線Html編輯器，實(shí)現(xiàn)所寫即所得UI和樣式實(shí)時(shí)刷新，JS代碼也能進(jìn)行熱加載執(zhí)行重新渲染，而且這些實(shí)現(xiàn)都非常簡(jiǎn)單，只用到了很少的html和css代碼。
要使Html可以編輯實(shí)際上很簡(jiǎn)單只要一個(gè)body標(biāo)簽就足矣。contenteditable這個(gè)body屬性可能鮮為人知，實(shí)際上它的功能就是實(shí)現(xiàn)Html文檔可編輯。我們新建一個(gè)Html文檔（Cc.html），然后將如下代碼復(fù)制粘貼到文檔中：
<body contenteditable="true"></body>
通過(guò)瀏覽器打開(kāi)這個(gè)文檔，怎么樣，神奇的事情發(fā)生了把？
你可以在這個(gè)頁(yè)面任意輸入文本甚至還可以粘貼圖片。（兼容基本上所有的瀏覽器，IE也可以）。還可以支持Ctr+Z撤銷和重做。
我們知道<div>…</div>和<p>…</p>標(biāo)簽內(nèi)的文字都會(huì)在頁(yè)面顯示，而<script>…</script>和<style>…</style>中的都是引用的前端腳本的代碼（JS）等需要通過(guò)瀏覽器引擎執(zhí)行渲染顯示出來(lái)的，那么這些代碼是不是可以在顯示出來(lái)呢？實(shí)際上在大多數(shù)瀏覽器只是通過(guò)CSS樣式隱藏起來(lái)的，我們通過(guò)重寫在div>…</div>中增加script, style { display: block; }即可：
<body>
<style>
script, style { display: block; }
</style>
<script>
console.log("Hello Chongchong!");
</script>
</body>
通過(guò)將其粘貼到html文件并在瀏覽器中打開(kāi)它，顯示如下：
而且，我們也可以將這個(gè)頁(yè)面也設(shè)置為contenteditable，并且<style></ style>增加樣式顯示，比如我們修改字體的大小為20pt，顏色為綠色：
<body contenteditable="true">
<style>
script, style { display: block;font-size: 20pt;color: green}
</style>
<script>
console.log("Hello ChongChong!");
</script>
</body>
現(xiàn)在我們可以，通過(guò)在線編輯style{}的內(nèi)容，讓頁(yè)面的呈現(xiàn)實(shí)時(shí)變化，比如字體再增加10pt，顏色變成藍(lán)色。
注意，輸入時(shí)候內(nèi)容會(huì)實(shí)時(shí)變化的，比如你修改20pt為30pt途中，你字體會(huì)變成2，很小很小，繼續(xù)刪除2就會(huì)恢復(fù)成默認(rèn)正常默認(rèn)，你不用理會(huì)繼續(xù)輸入30字體就會(huì)變成30pt，其他參數(shù)也類似。
該方法可以實(shí)時(shí)刷新樣式顯示<style></ style>標(biāo)簽，對(duì)于JS代碼，由于其只會(huì)在頁(yè)面加載時(shí)候執(zhí)行一次，你可以修改<script>…</script>內(nèi)容，但是不能實(shí)時(shí)執(zhí)行生效。
上面我也說(shuō)，JS代碼的修改需要重新加載才能執(zhí)行。為了實(shí)現(xiàn)重新加載，我們首先使用簡(jiǎn)單的按鍵（Shift+enter）觸發(fā)重新加載的方法：
<body contenteditable="true">
<style>
script, style { display: block;font-size: 20pt; color: green}
</style>
<script>
//alert("Hello ChongChong!");
document.onkeydown = function(e) {
var key = window.event ? event : e;
if (key.shiftKey && key.keyCode == 13) {
eval(window.getSelection().focusNode.parentNode.innerHTML);
}
};
</script>
</body>
通過(guò)瀏覽器打開(kāi)，并且編輯去掉//alert("Hello ChongChong!")前面的//注釋,然后按鍵shift時(shí)按Enter鍵。
結(jié)果如上圖就可以彈出一個(gè)消息窗口。
通過(guò)上面的方法我們實(shí)現(xiàn)了一個(gè)可編輯上面在線編輯器。在前面代碼的基礎(chǔ)上，我們提供一個(gè)基礎(chǔ)的模版供大家使用，完整代碼如下：
<body contenteditable="true" spellcheck="false">
<title>editor</title>
<style>script,
style {
display: block;
white-space: pre-wrap;
background-color: #eeeeee;
border: solid;
border-radius: 10px;
padding: 20px;
}
body {
font-family: Menlo, Monaco, monospace;
font-size: 12pt;
tab-size: 4;
}
script.success {
background-color: #ccffcc;
border: solid, #00cc00;
}
script.error {
background-color: #ffcccc;
border: solid, #ff1111;
}
</style>
<script type="text/javascript" class="success">
//alert("Hello Chongchong!");
document.onkeydown = function(e) {
var key = window.event ? event : e;
var node = window.getSelection().focusNode;
if (key.shiftKey) {
if (key.keyCode == 13) {
node.parentNode.classList.remove("error");
node.parentNode.classList.remove("success");
try {
eval(node.parentNode.innerHTML);
node.parentNode.classList.add("success");
} catch (e) {
node.parentNode.classList.add("error");
}
return false;
}
} else {
if (key.keyCode == 13) {
document.execCommand("insertHTML", false, "\n");
return false;
}
if (key.keyCode == 9) {
document.execCommand("insertHTML", false, "\t");
return false;
}
}
}
</script>
</body>
將上面代碼保存為html，然后用瀏覽器打開(kāi)就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的在線html編輯器。
該在線編輯器模版還非常簡(jiǎn)陋，如果能增加語(yǔ)法高亮和自動(dòng)完成等一些功能可能很好，但是這是很大工作量，有興趣的可以嘗試著做下。也可以通過(guò)引入一些第三方的庫(kù)來(lái)做下，比如使用微軟的language-server-protocol 庫(kù)來(lái)實(shí)現(xiàn)自動(dòng)完成功能。
至于語(yǔ)法高亮，一般做法是將所有內(nèi)容填充到標(biāo)簽中并對(duì)其進(jìn)行著色（大多數(shù)其他基于html的編輯器都這樣做），但是這樣會(huì)破壞自動(dòng)刷新和熱加載功能的簡(jiǎn)單性。
你可能還希望處理實(shí)際內(nèi)容，而不僅僅是編輯本身。這個(gè)簡(jiǎn)單，只需在contenteditable body中添加另一個(gè)元素，該操作可以通過(guò)JS腳本實(shí)現(xiàn)該操作。還可以添加更多元素，例如一個(gè)按鈕或者只是通過(guò)修改快速HTML框來(lái)實(shí)現(xiàn)。這些都可以在提供的模版的基礎(chǔ)上按需增加修改。
本文我們?cè)赾ontenteditable屬性的基礎(chǔ)上實(shí)現(xiàn)了，在線Html的編輯器實(shí)現(xiàn)內(nèi)容和樣式的實(shí)時(shí)更新、實(shí)現(xiàn)了JS代碼的熱加載。雖然此在線編輯器還非常簡(jiǎn)陋，但是以此作為一個(gè)想法和基礎(chǔ)"拋磚引玉"，希望大家可以實(shí)現(xiàn)一個(gè)功能完善，更加實(shí)用的在線編輯器。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
