极简HTML渲染引擎,CodeMirror 代码渲染神器的极简入门实例
效果:
image.png
HTML:
保存
运行
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(`
${result.data}
`)
} else {
alert(result.errorMessage)
}
}
, error: (err) => {
alert(JSON.stringify(err))
}
});
});// fn-eval-btn
后端代码 Kotlin:
@PostMapping("/evalJs.json")
@ResponseBody
fun evalJs(js: String): ResultVo {
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 的语法)。
极简HTML渲染引擎,CodeMirror 代码渲染神器的极简入门实例相关推荐
- 《十》浏览器基础及渲染引擎解析一个网页的过程、JavaScript 引擎解析 JavaScript 代码的过程
浏览器:是安装在电脑里面的一个软件,能够将页面内容渲染出来呈现给用户查看,并让用户与网页进行交互. 服务器其实就是性能比较高的计算机,这些计算机 24 小时不断电. 不关机. 开发者在本地开发出 HT ...
- 浏览器内核-渲染引擎、js引擎
一个完整的浏览器包含浏览器内核和浏览器的外壳(shell).浏览器核心--内核分成两部分:渲染引擎和js引擎.由于js引擎越来越独立,内核就倾向于只指渲染引擎. 1 浏览器组成结构 浏览器一般由七个模 ...
- JavaScript 工作原理之十一-渲染引擎及性能优化小技巧
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十一章. 迄 ...
- 浏览器渲染引擎学习总结
简单介绍浏览器渲染引擎情况 很多人就只会用浏览器,不知道浏览器的工作原理或者说浏览器最核心的东西,浏览器的内核是最核 心的东西,也叫做渲染引擎,那这个东西到底是干嘛的呢,下面本教程就为大家好好介绍一下 ...
- JavaScript 工作原理之十一-渲染引擎及性能优化小技巧 1
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十一章. 迄 ...
- 谈谈GIS三维渲染引擎
minemap:是我们公司的产品,主要以earth的形态展示,支持矢量切片+倾斜数据(这一点我个人认为是它最大的优点,即兼容了矢量切片精美地图又兼容倾斜数据,目前倾斜数据采用的3dtile格式),目前 ...
- GIS三维渲染引擎 到底有什么区别
minemap:主要以earth的形态展示,支持矢量切片+倾斜数据(这一点我个人认为是它最大的优点,即兼容了矢量切片精美地图又兼容倾斜数据,目前倾斜数据采用的3dtile格式),目前正在重构引擎架构, ...
- H5 2D渲染引擎—Pixi.js 精灵的位置、大小、旋转、移动
根据 H5 2D渲染引擎-Pixi.js 渲染器.舞台和精灵的创建,创建精灵(不做其他设置)并添加到渲染器后,精灵默认的位置是在渲染器的左上角(x=0,y=0),大小为原图片大小. 定位 可以通过改变 ...
- 01-什么是渲染引擎
前情回顾:2021 技术新番 - 从零打造渲染引擎系列 在开始写代码之前,要先明确渲染引擎到底是什么东西,才能知道要写什么东西. 在 Google 里面搜索 ???? 渲染引擎关键字,出来的结果都是关 ...
最新文章
- oozie调度中的重试和手工rerun一个workflow
- [译]深入理解JVM
- 其实,最好的年龄才刚刚开始
- 二叉树结构 codevs 1029 遍历问题
- [C++11]forward完美转发
- 恒强制版系统980_速来围观 | 恒强制版小图高级功能讲解
- 华为鸿蒙5g售价,华为5G新旗舰已确认,双曲面屏+升级到鸿蒙2.0,价格很感人
- 问题 C: 判断三角形的性质
- 2010头号病毒追杀令——恶意下载者001
- 【M1芯片兼容】MP3 Audio Recorder for Mac - MP3录音工具
- Selenium 与 Android自动化测试
- android5.1导航系统,北斗地图导航系统
- OSG开发笔记(二十五):OSG漫游之CS移动、碰撞检测与跳跃
- Win2003 Server磁盘配额揭密之删除篇
- R语言单因素方差分析及两两比较
- 超全!40000字 Matplotlib 实战
- 八字易经算法之用JAVA实现完整排盘系统
- 计算机组成原理实验:系统总线与系统接口
- 在VMware上安装macOS
- CreateEventA 函数理解