js在线编辑器,js在线编辑器实时预览 源码
前端常用的几种在线代码编辑器各有什么优势
jsfiddle
Create a new fiddle
最经典的的编辑器了，主要写页面，没有集成console不太方面调JS
jsbin
JS Bin
跟jsfiddle差不多，有自带console挺适合调JS的，我最近几篇专栏文章的代码都是放在jsbin里的，可以方便的到处到gist很不错。但是存snapshot有点不清楚（反正我是还没弄清楚）。Node快闪 御用。
plunker
这个好像国内用的人不多，难道是被墙了？这是我见过的最贴近真实开发环境的ide，所有html js css文件一览无遗，不像jsfiddle一样隐藏html和body元素。要是有console就更好了。Angular1文档御用。
repl.it
Online REPL, Compiler IDE
这个大家可能见的不多，多语言环境，JS的是纯console环境，布局很干净，调JS挺好的。
codepen
CodePen
这个跟jsbin差不多，好像上面的代码大多数是CSS相关的。御用。
hackerrank
HackerRank
这个严格说是个比赛／面试环境，实时性不错，其它跟jsfiddle大同小异。我司电面御用。
runkit
RunKit is Node prototyping
这个是node编程用的，在线require( )各种包，看上去挺屌的，我还没怎么玩过。npm御用。
程序猿专用十大在线编译器(IDE)整理
1. CodeSandbox(基于 React 的在线代码沙盒平台) 我常用的
① 主流的脚手架都支持,比如在线create-react-app,vue-cli等(在线 fork 修改),支持 github 登录(项目导入),也支持 cli 上传例子,例子可以在线访问和下载,当然也支持内嵌到其他博客等网页中。
② 地址：
③ 图示
2. CodePen(前端代码编辑运行的网站)
① CodePen 是一个完全免费的前端代码托管服务，主要功能有：
② 地址：
③ 图示
3. JSRUN(支持手机端的在线JS编辑器)
① jsrun是一款支持手机端的在线JS编辑器, HTML/CSS/Javascript在线代码运行工具,js代码在线测试调试,是runjs的升级版支持vue.js/angular.js的在线编辑器
② 地址：
③ 图示
4. jsFiddle(前端代码编辑运行的网站)
① jsFiddle 是一个Web开发人员的练习场,可在线编辑和测试 HTML、CSS、JavaScript代码片段。在 jsFiddle 编辑的代码,可以保存,也可分享给其他人,还可嵌入到其他网页
② 地址：
③ 图示
5. Ideone(C和C++的在线编译和调试工具,支持其他的60种语言) 我常用
① Ideone是C和C++的在线编译和调试工具,支持其他的60种语言。这个工具提供许多强大的功能,允许程序员快速高效的编译源代码
② 地址：
③ 图示
6. Codechef(C，C ++和Java的在线编译工具)
① 它支持C，C ++和Java，非常接近真正的桌面IDE。这是超快速和易于使用。适合于课堂和作业的学生，练习面试问题。
② 地址：
③ 图示
7. JDoodle (C，C ++和Java的在线IDE)
① 支持协作代码。它只是从一个简单的文本区域开始，您可以粘贴代码，然后单击运行。您可以更改命令行参数并在运行该程序之前设置stdin。最适合新的在线编辑器不支持的许多旧语言。
② 地址：
③ 图示
8. OnlineGDB (在线C，C ++，Java，PHP编译器) 我常用
① 它支持C，C ++，PHP和Java编译器。OnlineGDB的独特功能是，您可以逐步调试您的代码。一旦代码被写入，它可以很容易地格式化，使其看起来不错。
② 地址：
③ 图示
9. GCC资源管理器
① GCC编译器资源管理器是一个交互式在线编译器，它显示编译后的C++、RISE、GO（以及更多）代码的汇编输出。
② 地址：
③ 图示
10. plnkr edit在线编辑器
① js的在线编辑器。
② 地址：
③ 图示
如何采用element-plus，基于codemirror6实现sql在线编辑器？
js在线sql编辑器，下载后导入IDE工具中，在浏览器访问sql-editor-master/index.html ，效果如下(含括号高亮显示、显示折叠栏)：
codeMirror官网， 官网js/css资源文件，也可自行去官网下载，但是官网比较慢，需引入的核心页面代码：
link rel="stylesheet" href="css/codemirror.css" /
link rel="stylesheet" href="test/addon/fold/foldgutter.css"
link rel="stylesheet" href="css/theme/dracula.css" /
link rel="stylesheet" href="css/show-hint.css" /
link rel="stylesheet" href="js/jquery-easyui/themes/default/easyui.css"
link rel="stylesheet" href="js/layui/css/layui.css"
link rel="stylesheet" href="css/index.css" /
script type="text/javascript"var baseUrl ="";/script
script type="text/javascript" src="js/jquery.min.js"/script
script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"/script
script type="text/javascript" src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"/script
script type="text/javascript" src="js/editor/codemirror.js"/script
!-- 折叠栏显示 --
script type="text/javascript" src="test/addon/fold/foldcode.js"/script
script type="text/javascript" src="test/addon/fold/foldgutter.js"/script
script type="text/javascript" src="test/addon/fold/comment-fold.js"/script
!-- 括号高亮匹配 --
script type="text/javascript" src="test/addon/fold/matchbrackets.js"/script
script type="text/javascript" src="js/editor/sublime.js"/script
script type="text/javascript" src="js/editor/sql.js"/script
script type="text/javascript" src="js/editor/sql-hint.js"/script
script type="text/javascript" src="js/editor/show-hint.js"/script
!-- sql格式 --
script type="text/javascript" src="js/editor/formatting.js"/script
script type="text/javascript" src="js/editor/sql-formatter.min.js"/script
script type="text/javascript" src="js/layui/layui.js"/script
script type="text/javascript" src="js/index.js"/script
textarea id="code"/textarea
核心js代码：
//根据DOM元素的id构造出一个编辑器
var editor=CodeMirror.fromTextArea(document.getElementById("code"),{
mode:"text/c-mysql", //实现Java代码高亮
lineNumbers:true,
matchBrackets: true, //括号高亮匹配
theme:"default",
keyMap: "default",
extraKeys:{"Tab":"autocomplete"},
hint: CodeMirror.hint.sql,
lineWrapping: true, //是否换行
foldGutter: true, //是否折叠
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], //添加行号栏，折叠栏
hintOptions: {
tables: tablewords
}
});
输入关键词提示等信息的配置：allWords.json
动态设置表字段等信息：
let tableWords = {"dual": []};
let tableName = "tn_user";
tableWords[tableName].push("userId");
editor.setOption("hintOptions", {"tables": tableWords});
tableWords json格式如下：
"tableWords": {
"cp_sku": [
"skuid",
"cpbh",
"tcbh"
],
"user_info": [
"user_id",
"user_token",
"user_name",
"user_type",
"password"
]
}
有没有比较强大的html+js+css编辑器
推荐Hbuider，个人感觉比eclipse和dreamweaver好用。。
特点：轻量，只有几M，就算全部插件安装也只有三百M。
测试方便：可以直接打包成app运行到安卓或苹果模拟器和真机里。
app配置简单，上手速度快。
全中文界面。
可以新建mui的相关项目并直接调试。
可以新建HTML5 plus项目并直接调试。
可以新建微信支付宝等各种小程序页面并直接调试。
反正就是强大，好用。。
HTML项目打包成app也很方便。
使用过程中无广告全程免费。
软件启动快，没有加载界面读取界面。双击图标顶多两秒，编码窗口就出来了。
软件响应快，速度快。
textarea保持文本样式
第一种方法采用替换：就是将文本域的换号符号\r\n，替换成其他符号，存入数据库，然后显示的时候再转换回来:
//转换换行符
$str=preg_replace("/\r\n|\r|\n/","br",$str);
//转换回来
$str=preg_replace("/br/","\r\n",$str);
第二种方法使用js在线编辑器：使用js来模拟文本域，讲输入都转换成html标签，显示的时候文本就是所见所得格式，这类第三方开发js插件很多，列如UEditor，KindEditor等：
最好用的 JavaScript IDE 或编辑器是哪个
IDE:
1，visual studio——宇宙最强IDE。用熟之后，懵然发现，其实宇宙中只有一个IDE，其它的所谓IDE，原来都只是加强型的文本编辑器。
2，webstrom——JB公司出品，必属精品，一人之下，万人之上。
3，HBuilder——国货精品，专注H5，全中文，很给力。
文本编辑器：
1，VS CODE——visual studio的阉割版。。虽然直接阉成了文本编辑器。但更加轻量，依然宇宙最强。
2，sublime——曾经的王者，在VS CODE出现之前，公认最好的文本编辑器，没有之一。
3，Brackets——ADOBE出品，专注WEB，界面美观，配色华丽。
4，Notepad++——虽一度被sublime吊打，但小巧，简单，依然有其亮点
如果楼主只是写JS，不做后端的话，其实用个文本编辑器就足够了。。VS CODE和sublime都不错。。用IDE写JS有些杀鸡用牛刀的感觉。IDE通常用来做一些C#,C++，JAVA之类的大型项目，才能发挥出优势。。