山地人

在线Web编辑器

山地人
山地人
2021-05-10

写前端教程,需要内置在线Web编辑器,这样你就可以边看教程边操作了。所以将在线编辑器内置到教程中是必要的。

下面是目前为idev365开发的几款代码相关的编辑器,这里罗列一下,一来展示各种编辑器的用途,二来方便自己测试每一款编辑器的不同特性😝。

简单编辑器

简单编辑器,可以进行文本输入,这里配置的语言是JavaScript。已经开启了代码自动提示。

带标签编辑器

对比:JavaScript代码高亮组件

1console.log("Hello World");
2function say(){
3 return "Hello";
4}

简单浏览器

内嵌在浏览器里的小浏览器,可开启代码展示。

示例参数说明
内容高:0px
隐藏代码
显示代码

编辑器+浏览器

先修改内容,然后点击运行,右侧观察结果。