在线js编辑器(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"
]
}
js图片编辑器
手机体验地址：
github地址：
1、引入dist文件夹下的ped.js
2、new window.PED.imageInfo(url,saveFn)
1、可以双指放大缩小图片
2、可以在图片上进行涂鸦
2、可以输入文字，输入文字后可以单指移动文字在图片上的位置
3、可以撤回涂鸦的内容，不能撤回文字，文字编辑功能还未实现
1、npm install
2、npm run build
欢迎star
前端常用的几种在线代码编辑器各有什么优势
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御用。
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等：
【ace.js】基于JS的代码带高亮编辑器
源码：
ace.js -
官网及API：
ace.js -
所支持的功能，在官方提供的demo里都有，具体的设置参数可翻看API。
程序猿专用十大在线编译器(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的在线编辑器。
② 地址：
③ 图示