CodeMirror 代码渲染神器的极简入门实例
效果:
HTML:
<script src="https://codemirror.net/lib/codemirror.js"></script> <script src="https://codemirror.net/mode/javascript/javascript.js"></script> <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css"> <div id="fn"></div> <button class="btn btn-sm btn-success offset2" id="fn-save-btn">保存</button> <button class="btn btn-sm btn-success" id="fn-eval-btn">运行</button> <div id="eval-result" class="eval-result"></div>
JS 代码示例:
// 渲染代码: var editor = CodeMirror.fromTextArea(document.getElementById("fnBody"), { lineNumbers: true, mode: "javascript", matchBrackets: true }); // 获取代码的文本值 var fnBody = editor.doc.getValue(); // 运行脚本,预览结果 $('#fn-eval-btn').unbind().bind('click', () => { console.dir(editor); var fnBody = editor.doc.getValue(); var postData = { js: fnBody }; $.ajax({ url: '/datafactory/evalJs.json' , data: postData , type: 'POST' , success: (result) => { if (result.success == true) { $('#eval-result').html(`<div>运行结果:</div><code>${result.data}</code>`) } else { alert(result.errorMessage) } } , error: (err) => { alert(JSON.stringify(err)) } }); });// fn-eval-btn
后端代码 Kotlin:
@PostMapping("/evalJs.json") @ResponseBody fun evalJs(js: String): ResultVo<String> { println("js=${js}") val result = ResultVo( data = "", isSuccess = false, errorCode = "1", errorMessage = "", state = "1" ) try { val data = NashornUtil.evalJs(js) result.data = data result.isSuccess = true result.errorCode = "0" result.errorMessage = "" result.state = "" } catch (e: Exception) { result.errorMessage = e.message ?: "" } return result }
其中,evalJs() 的函数实现如下:
package com.alibaba.xxpt.qa.adt.util import javax.script.ScriptEngineManager object NashornUtil { private val scriptEngineManager = ScriptEngineManager() private val nashorn = scriptEngineManager.getEngineByName("nashorn") fun evalJs(js: String): String { try { return nashorn.eval(js).toString() } catch (e: Exception) { e.printStackTrace() return "" } } }
使用的是 Java 8 中的nashorn 引擎(支持 ES5 的语法)。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
【翻译】2018年,20大Python数据科学库都做了哪些更新?
Python今年依旧保持着数据科学领域的领先地位。去年,我们在博客上列出了15个顶级Python数据科学库的榜单,当时大家都觉得非常好。这次,介绍一下这些顶级数据科学Python库今年有哪些更新,同时,我们还为这个榜单添加了一些新库。 实际上,这次的榜单不止20个库,主要是因为现在某些领域里有多个库都能解决相同的问题,而且暂时也不好说哪个库能成为领头羊,因此,我们将这些库分为一组,供大家选择。 核心库与统计库 1. NumPy (提交修改: 17911, 贡献者: 641) 按惯例,本榜单首先列出科学应用库,Numpy是这一类的首选,它是处理大型多维数组、矩阵及高级数学函数的工具集合,提供了多种数据操作方法。 今年,Numpy进行了很多改进。除了修复Bug和加强兼容性外,关键的改进是增加了可选样式,即Numpy对象的打印格式。此外,还增加了
- 下一篇
图片转字符图片(一)
序言 这个是从抖音上学来的,一开始刷抖音,遇到不少字符串跳舞的视频,因此来实践一下 主要分为三个部分 静态图片转静态图片 gif 转 gif 视频转视频 静态图片转静态图片 其实原理很简单,读取图片的像素,新建一张大小一样的图片,根据原图像素的灰度,决定是不是要显示出来,并在新图相应的位置添加字符,这样就完成了 借助前辈写的工具,主要包含一下四个类: AnimatedGifEncoder GifDecoder LZWEncoder NeuQuant 源地址https://github.com/rtyley/animated-gif-lib-for-java ps: 网上各种版本的太多,不清楚这个是不是原作者,github上搜GifDecoder,有不少 环境: JDK 1.8 注:Java原生代码实现使用jdk内部的GIFImageReader、GIFImageWriter等类,maven在编译的时候会提示这是sun公司的私有API,在1.7、1.8版的JDK中已经删除,所以是有风险的。在此使用ImageIO这个类来进行图片的操作。 主要代码如下所示: import java.awt....
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7,CentOS8安装Elasticsearch6.8.6
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS6,CentOS7官方镜像安装Oracle11G
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- 设置Eclipse缩进为4个空格,增强代码规范
- Mario游戏-低调大师作品
- MySQL8.0.19开启GTID主从同步CentOS8
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16