整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          給我一個瀏覽器,我就能寫代碼-幾個在線編輯器網站推薦

          天給大家推薦幾個可以在線編程的網站。對于大部分開發者可能會不屑使用在線的網站,認為在自己電腦安裝環境不是很簡單的事情么。但是你很有可能臨時需要一臺電腦去測試一段簡單的代碼,也有可能想要分享一段代碼給別人,也有可能你想要學習很多語言,又不想一一安裝編程環境。那么今天推薦的網站肯定能滿足你的需求。

          idenone.com

          網址:https://ideone.com/SExhrM

          這個網站不錯,支持Java,但是頁面有廣告。除了支持Java語言,還支持其他語言。

          dabblet

          https://dabblet.com/

          這個網站適合前端測試使用,該網站可以用來測試Html,Css,Js等功能。

          Fenby

          網址:http://www.fenby.com/

          這個網站不只支持后端語言編碼,也支持前端編碼,使用體驗很不錯。支持的語言也很豐富。

          前端的支持也很OK。

          W3School

          https://www.w3school.com.cn/tiy/t.asp?f=js_use

          當然對于想系統學習前端知識的童鞋可以使用W3School,這個網站很適合,不僅有大量的案列,還有可以實戰編碼。

          在線編程

          https://www.bccn.net/run/

          該網站支持的語言也挺多,比較推薦。

          今天的介紹就到這里了,如果你打算系統學習編程,那我還是建議你老老實實的安裝編譯環境,安裝編輯器。

          得以前剛開始接觸網頁制作時都是使用Microsoft FrontPage編輯器,也正因為有所見即得編輯器,才能讓原本復雜難懂的HTML原始碼變得更簡單易懂,它將原始碼轉換成可視化內容,只要直接輸入文字、圖片、超連接后修改樣式即可將網頁制作出來,當然這些頁面背后仍是有所謂的HTML代碼存在,只在需要時才會切換原始碼模式。

          我后來還是很習慣通過所見即所得(What You See Is What You Get,縮寫WYSIWYG)編輯器寫文章,WordPress內置文章編輯功能就是此形式,有時候遇到要編輯網頁也會使用這個工具來產生HTML代碼,畢竟以看得到的方式編輯比較容易得到自己需要的東西,大概就是這么一回事。

          現在網頁編輯器已沒有像十幾年前那么盛行了,可能很多人的電腦里早已沒有類似的應用程序,如果你還是需要這功能,HTML Editor或許可以應急,這是一款在線免費HTML可視化編輯器,直接打開瀏覽器就能使用,它就像一般的網頁編輯器,使用者可以直接在編輯器里建立圖文內容,HTML Editor會在另一畫面顯示HTML原始碼,編輯時就能直接取得對應的原始碼以便使用于博客文章或網頁制作。

          這功能看起來雖然好像微不足道,事實上當你需要時就會非常方便,HTML Editor不限于Windows或Mac使用,而且更重要的是不用額外下載安裝軟件;對于不熟悉HTML編寫的使用者來說,它也能快速制作出帶有樣式的原始碼,尤其是拿來撰寫網頁表格,直接使用可視化編輯器會更簡單。

          印象中舊版Microsoft Office也有類似功能,不過很可惜現在新版好像已經沒有了。

          站點名稱:HTML Editor

          網站連接:https://htmleditor.io/

          使用教學

          STEP 1

          開啟HTML Editor網站后,畫面被切割成左右兩個部分,左邊為所見即所得編輯器,右邊是顯示原始碼的字段,一開始已經有示例內容,可以看到編輯器里樣式文字已經被轉為我們熟悉的HTML程序碼并顯示于網站右側。

          STEP 2

          使用方法很簡單,我就不通盤介紹所有編輯器的功能,大致上比較會用到的例如格式,可以調整H1、H2、H3等不同層級的標題,亦能加入粗體、斜體、項目符號、縮排或設定對齊方向等等,其它例如插入超連接、圖片或視頻也都能從編輯器上方的功能按鈕來做到。

          我認為HTML Editor最方便的是可以拿來做網頁表格,從「Table」以鼠標光標快速設定要多少字段,即可在編輯器里插入表格,同時設定每個字段要顯示那些內容。如果要直接以代碼來撰寫表格可能稍嫌復雜,以所見即所得編輯器會簡單許多。

          STEP 3

          當你一邊在使用編輯器時,右側就會同步顯示對應的HTML代碼,跟早期網頁編輯器功能差不多,最后直接復制代碼,就能將它復制、使用到其它地方,可以說非常好用!也不用再因為需要產生原始碼而去找網頁編輯器,從瀏覽器開啟HTML Editor即可。

          多人可能都用過Web編輯器,比如Ckedit等,除了Word等本地編輯器外Web編輯器也是最常用最方便Web內容來源。這些在線編輯器的一個短板限制很多,不能實時反饋在線效果。本文蟲蟲給大家介紹一種很簡單的無限制在線Html編輯器,實現所寫即所得UI和樣式實時刷新,JS代碼也能進行熱加載執行重新渲染,而且這些實現都非常簡單,只用到了很少的html和css代碼。

          Html內容可編輯—contenteditable

          要使Html可以編輯實際上很簡單只要一個body標簽就足矣。contenteditable這個body屬性可能鮮為人知,實際上它的功能就是實現Html文檔可編輯。我們新建一個Html文檔(Cc.html),然后將如下代碼復制粘貼到文檔中:

          <body contenteditable="true"></body>

          通過瀏覽器打開這個文檔,怎么樣,神奇的事情發生了把?

          你可以在這個頁面任意輸入文本甚至還可以粘貼圖片。(兼容基本上所有的瀏覽器,IE也可以)。還可以支持Ctr+Z撤銷和重做。

          <style>…</style>樣式實時變化

          我們知道<div>…</div>和<p>…</p>標簽內的文字都會在頁面顯示,而<script>…</script>和<style>…</style>中的都是引用的前端腳本的代碼(JS)等需要通過瀏覽器引擎執行渲染顯示出來的,那么這些代碼是不是可以在顯示出來呢?實際上在大多數瀏覽器只是通過CSS樣式隱藏起來的,我們通過重寫在div>…</div>中增加script, style { display: block; }即可:

          <body>

          <style>

          script, style { display: block; }

          </style>

          <script>

          console.log("Hello Chongchong!");

          </script>

          </body>

          通過將其粘貼到html文件并在瀏覽器中打開它,顯示如下:

          而且,我們也可以將這個頁面也設置為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>

          現在我們可以,通過在線編輯style{}的內容,讓頁面的呈現實時變化,比如字體再增加10pt,顏色變成藍色。

          注意,輸入時候內容會實時變化的,比如你修改20pt為30pt途中,你字體會變成2,很小很小,繼續刪除2就會恢復成默認正常默認,你不用理會繼續輸入30字體就會變成30pt,其他參數也類似。

          該方法可以實時刷新樣式顯示<style></ style>標簽,對于JS代碼,由于其只會在頁面加載時候執行一次,你可以修改<script>…</script>內容,但是不能實時執行生效。

          JS代碼熱加載

          上面我也說,JS代碼的修改需要重新加載才能執行。為了實現重新加載,我們首先使用簡單的按鍵(Shift+enter)觸發重新加載的方法:

          <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>

          通過瀏覽器打開,并且編輯去掉//alert("Hello ChongChong!")前面的//注釋,然后按鍵shift時按Enter鍵。

          結果如上圖就可以彈出一個消息窗口。

          基礎模版和完善

          通過上面的方法我們實現了一個可編輯上面在線編輯器。在前面代碼的基礎上,我們提供一個基礎的模版供大家使用,完整代碼如下:

          <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,然后用瀏覽器打開就實現了一個簡單的在線html編輯器。

          完善功能

          該在線編輯器模版還非常簡陋,如果能增加語法高亮和自動完成等一些功能可能很好,但是這是很大工作量,有興趣的可以嘗試著做下。也可以通過引入一些第三方的庫來做下,比如使用微軟的language-server-protocol 庫來實現自動完成功能。

          至于語法高亮,一般做法是將所有內容填充到標簽中并對其進行著色(大多數其他基于html的編輯器都這樣做),但是這樣會破壞自動刷新和熱加載功能的簡單性。

          完善內容

          你可能還希望處理實際內容,而不僅僅是編輯本身。這個簡單,只需在contenteditable body中添加另一個元素,該操作可以通過JS腳本實現該操作。還可以添加更多元素,例如一個按鈕或者只是通過修改快速HTML框來實現。這些都可以在提供的模版的基礎上按需增加修改。

          總結

          本文我們在contenteditable屬性的基礎上實現了,在線Html的編輯器實現內容和樣式的實時更新、實現了JS代碼的熱加載。雖然此在線編輯器還非常簡陋,但是以此作為一個想法和基礎"拋磚引玉",希望大家可以實現一個功能完善,更加實用的在線編輯器。


          主站蜘蛛池模板: 一区二区三区免费在线观看| 八戒久久精品一区二区三区| 最新欧美精品一区二区三区| aⅴ一区二区三区无卡无码| 精品aⅴ一区二区三区| 在线视频精品一区| 精品视频无码一区二区三区| 国产一区二区三区在线视頻| 国产一区二区好的精华液| 在线观看亚洲一区二区| 国产精品亚洲产品一区二区三区 | 国产乱码精品一区二区三区中文| 麻豆一区二区免费播放网站| 亚洲av无码一区二区三区不卡| 亚洲欧洲一区二区三区| 免费在线观看一区| 日本精品一区二区三区视频| 国产精品美女一区二区三区| 伊人久久精品一区二区三区| 精品欧洲av无码一区二区三区| 无码少妇精品一区二区免费动态| 日韩精品无码一区二区三区AV | 亚洲一区二区三区高清| 国产在线精品一区二区在线观看 | 91久久精品国产免费一区| 无码日韩精品一区二区三区免费 | 精品成人一区二区三区免费视频 | 中文字幕一区在线| 中文字幕一区在线| 国产精品亚洲一区二区三区在线| 国精产品一区一区三区免费视频| 国模少妇一区二区三区| 亚洲乱码日产一区三区| 中文字幕一区二区三区在线观看 | 一区二区三区在线观看中文字幕| 视频在线观看一区二区| 香蕉一区二区三区观| 亚洲日韩国产精品第一页一区| 久久无码人妻一区二区三区午夜| 精品国产一区二区三区麻豆| 成人精品一区二区三区不卡免费看|