Loading

工具类 - codeMirror

about

引自codeMirror官网的描述:

CodeMirror是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码,并带有 实现更高级编辑功能的多种语言模式和附加组件。
丰富的编程API和CSS 主题系统可用于自定义CodeMirror以适合您的应用程序,并使用新功能对其进行扩展。

下载安装

官网下载:https://codemirror.net/
直接点击下载:https://codemirror.net/codemirror.zip

下载到本地是个压缩包,解压到相关目录即可。
主题
你可以去下面的地址选择你喜欢的主题,然后配置(后续的示例中有)即可:

<https://codemirror.net/demo/theme.html>

其他的参数也在下面的示例中说明。

示例

本示例演示了codeMirror在Django项目中的应用。
首先将codeMirror压缩包解压到项目的static目录,当然关于staticsettings配置无需多言。
来看示例代码。
urls.py

from django.contrib import admin
from web import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^test/', views.test, name='test')
]

views.py

from django.shortcuts import render, redirect, HttpResponse
def test(request):
    if request.method == 'POST':
        print(request.POST.get('msg'))
        return HttpResponse('OK')
    return render(request, 'test.html')

test.html
首先,在html页面中,必须有一个textarea标签,然后给这个标签起一个id,比如id="editor"。然后在js代码中使用这个id值。其他说明都在相关位置进行了说明。
另外,需要注意的是,关于Python代码的补全功能,我进行了注释,因为我感觉不好使。

<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>codemirror示例</title>

    <link rel="stylesheet" href="{% static 'codemirror-5.49.0/lib/codemirror.css' %}">
    <link rel="stylesheet" href="{% static 'codemirror-5.49.0/addon/fold/foldgutter.css' %}">
    <link rel="stylesheet" href="{% static 'codemirror-5.49.0/addon/hint/show-hint.css' %}">
    <link rel="stylesheet" href="{% static 'codemirror-5.49.0/addon/lint/lint.css' %}">
    <link rel="stylesheet" href="{% static 'codemirror-5.49.0/addon/lint/lint.css' %}">
    <link rel="stylesheet" href="{% static 'codemirror-5.49.0/theme/darcula.css' %}">

</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div>
                <form action="">
                    <textarea name="" id="editor" cols="30" rows="10"></textarea>
                    <button id="btn" type="button">保存</button>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
<script src="{% static 'js/jquery-2.2.3.min.js' %}"></script>
<script src="{% static 'codemirror-5.49.0/lib/codemirror.js' %}"></script>
<script src="{% static 'codemirror-5.49.0/addon/comment/comment.js' %}"></script>
<script src="{% static 'codemirror-5.49.0/addon/selection/active-line.js' %}"></script>
<script src="{% static 'codemirror-5.49.0/addon/hint/show-hint.js' %}"></script>
<script src="{% static 'codemirror-5.49.0/addon/fold/foldcode.js' %}"></script>
<script src="{% static 'codemirror-5.49.0/addon/fold/brace-fold.js' %}"></script>
<script src="{% static 'codemirror-5.49.0/addon/fold/indent-fold.js' %}"></script>
<script src="{% static 'codemirror-5.49.0/addon/fold/comment-fold.js' %}"></script>
<script src="{% static 'codemirror-5.49.0/addon/edit/closebrackets.js' %}"></script>
<script src="{% static 'codemirror-5.49.0/addon/edit/matchbrackets.js' %}"></script>
<script src="{% static 'codemirror-5.49.0/mode/python/python.js' %}"></script>
<script src="{% static 'codemirror-5.49.0/mode/javascript/javascript.js' %}"></script>
<script src="{% static 'codemirror-5.49.0/keymap/sublime.js' %}"></script>
<script>
    window.onload = function editor() {
            var encoding = "# -*- coding: utf-8 -*-\n";
            var author = '# __author__ = "张开"\n';
            var initValue = encoding + author;
            var el = document.getElementById("editor");
            var myCodeMirror = CodeMirror.fromTextArea(el, {
                mode: "python", // 语言模式
                theme: "darcula", // 主题
                // theme: "default", // 主题
                keyMap: "sublime", // 快键键风格
                lineNumbers: true, // 显示行号
                smartIndent: true, // 智能缩进
                indentUnit: 4, // 智能缩进单位为4个空格长度
                // indentWithTabs: true, // 使用制表符进行智能缩进
                lineWrapping: true, //
                // 在行槽中添加行号显示器、折叠器、语法检测器
                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
                foldGutter: true, // 启用行槽中的代码折叠
                autofocus: true, // 自动聚焦
                matchBrackets: true, // 匹配结束符号,比如"]、}"
                autoCloseBrackets: true, // 自动闭合符号
                styleActiveLine: true, // 显示选中行的样式
            });
            // 设置初始文本,这个选项也可以在fromTextArea中配置
            myCodeMirror.setOption("value", initValue);
            // 编辑器按键监听
            myCodeMirror.on("keypress", function () {
                // 显示智能提示
                 // myCodeMirror.showHint(); // 注意,注释了CodeMirror库中show-hint.js第131行的代码(阻止了代码补全,同时提供智能提示)
            });
            // 获取textare中的值
            $('#btn').click(function () {
                console.log(myCodeMirror.getValue());
                $.ajax({
                    url: "/test/",
                    type: "POST",
                    data: {'msg': myCodeMirror.getValue()},
                    success: function (data) {
                        console.log(data)
                    }
                })
            })
        };
</script>
</html>

效果:


欢迎斧正,that's all see also:
posted @ 2019-11-20 10:45  听雨危楼  阅读(529)  评论(0编辑  收藏  举报