前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CodeMirror 代码渲染神器的极简入门实例

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

作者头像
一个会写诗的程序员
发布2018-09-12 17:50:46
4.4K0
发布2018-09-12 17:50:46
举报
文章被收录于专栏:一个会写诗的程序员的博客

效果:

image.png

HTML:

代码语言:javascript
复制
<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 代码示例:

代码语言:javascript
复制
// 渲染代码:
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:

代码语言:javascript
复制
@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() 的函数实现如下:

代码语言:javascript
复制
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/

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.08.21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档