开发者社区> 程序员诗人> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 效果: image.png HTML: 保存 运行 JS 代码示例: // 渲染代码: var editor = 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/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ngixn、fpm开机自启动,使用composer安装laravel5.8
ngixn、fpm开机自启动,使用composer安装laravel5.8
34 0
【EJB学习笔记】——实体Bean
  实体Bean跟普通的Java实体并无多大差异,在EJB中的实体Bean用@Entity注解定义。   实体Bean开发步骤如下:
48 0
Java 技术篇-使用IDEA开发java代码实例演示,IntelliJ IDEA的安装与使用
Java 技术篇-使用IDEA开发java代码实例演示,IntelliJ IDEA的安装与使用
165 0
java.lang.UnsatifiedLinkError错误一例:不同虚拟机之间的库不能共用
java.lang.UnsatifiedLinkError错误一例:不同虚拟机之间的库不能共用
56 0
(cljs/run-at (JSVM. :browser) "搭建刚好可用的开发环境!")
书接上一回,在了解cljs基本语法后并在clojurescript.net的奇特错误提示后,我们必须痛定思痛地搭建一个本地的开发环境,以便后续深入地学习cljs。
1493 0
WinForm开发-界面控件到实体,实体到界面控件自动绑定
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/51488947   在WinForm开发中,我们是不是为绑定界面控件的数据而每个控件每个控件的赋值?在保存修改时是不是也是每个控件每个控件的赋值到实体中?字段一多,那简直就是噩梦。
588 0
+关注
程序员诗人
一个会写诗的程序员
828
文章
14
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载