CodeMirror 代码渲染神器的极简入门实例

效果:

image.png

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 的语法)。

参考文档:https://codemirror.net/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏chenssy

【死磕 Spring】----- IOC 之 IOC 初始化总结

前面 13 篇博文从源码层次分析了 IOC 整个初始化过程,这篇就这些内容做一个总结将其连贯起来。

881
来自专栏Java架构师学习

分布式消息队列Apache RocketMQ源码剖析-Producer分析正文总结

正文 首先我们看一下Producer的继承结构: ? image.png MQAdmin主要包含一些管理性的接口,比如创建topic、查询某个特定消息以方便排查...

4167
来自专栏java 成神之路

spring 之 import标签、alias标签、beans标签 解析

58610
来自专栏子勰随笔

URL编码中的空格(编码以后变为+)

27110
来自专栏Golang语言社区

用Go实现一门解释型语言

A interpreter language implementation in Go

922
来自专栏扎心了老铁

springboot使用zookeeper(curator)实现注册发现与负载均衡

最简单的实现服务高可用的方法就是集群化,也就是分布式部署,但是分布式部署会带来一些问题。比如: 1、各个实例之间的协同(锁) 2、负载均衡 3、热删除 这里通过...

3.1K10
来自专栏JavaWeb

基于Spring自定义标签

3704
来自专栏JackieZheng

探秘Tomcat——启动篇

tomcat作为一款web服务器本身很复杂,代码量也很大,但是模块化很强,最核心的模块还是连接器Connector和容器Container。具体请看下图: ? ...

4977
来自专栏肖蕾的博客

第一章:Hello Libgdx

https://gitee.com/xcode_xiao/LibGdxDemos2/tree/master/HelloGDX

991
来自专栏chenssy

【死磕 Spring】----- IOC 之 IOC 初始化总结

前面 13 篇博文从源码层次分析了 IOC 整个初始化过程,这篇就这些内容做一个总结将其连贯起来。

1054

扫码关注云+社区

领取腾讯云代金券