整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天给大家推荐几个可以在线编程的网站。对于大部分开发者可能会不屑使用在线的网站，认为在自己电脑安装环境不是很简单的事情么。但是你很有可能临时需要一台电脑去测试一段简单的代码，也有可能想要分享一段代码给别人，也有可能你想要学习很多语言，又不想一一安装编程环境。那么今天推荐的网站肯定能满足你的需求。
网址：https://ideone.com/SExhrM
这个网站不错，支持Java，但是页面有广告。除了支持Java语言，还支持其他语言。
https://dabblet.com/
这个网站适合前端测试使用，该网站可以用来测试Html，Css，Js等功能。
网址：http://www.fenby.com/
这个网站不只支持后端语言编码，也支持前端编码，使用体验很不错。支持的语言也很丰富。
前端的支持也很OK。
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可以编辑实际上很简单只要一个body标签就足矣。contenteditable这个body属性可能鲜为人知，实际上它的功能就是实现Html文档可编辑。我们新建一个Html文档（Cc.html），然后将如下代码复制粘贴到文档中：
<body contenteditable="true"></body>
通过浏览器打开这个文档，怎么样，神奇的事情发生了把？
你可以在这个页面任意输入文本甚至还可以粘贴图片。（兼容基本上所有的浏览器，IE也可以）。还可以支持Ctr+Z撤销和重做。
我们知道<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代码的修改需要重新加载才能执行。为了实现重新加载，我们首先使用简单的按键（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代码的热加载。虽然此在线编辑器还非常简陋，但是以此作为一个想法和基础"抛砖引玉"，希望大家可以实现一个功能完善，更加实用的在线编辑器。
*请认真填写需求信息，我们会在24小时内与您取得联系。
