CodeMirror官网地址为:https://codemirror.net/

CodeMirror作为一款代码编辑器，其应用场景主要是在线网站写代码。
如现在的leetcode、洛谷、code-vs等都使用不同的代码编辑器。

代码示例:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>测试</title>

        <link rel="stylesheet" type="text/css" href="../fonticon/css/codemirror.css"/>

        <link rel="stylesheet" href="../fonticon/css/codemirror/theme/midnight.css">

    </head>

    <body>

        <textarea name="code" id="editorArea" style="display:none"></textarea>

        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">

        </script>

        <script src="../js/codemirror.js"></script>

        <script>

            var editor = CodeMirror.fromTextArea(document.getElementById("editorArea"), {

                lineNumbers: true,        //是否在编辑器左侧显示行号

                matchBrackets: true,      // 括号匹配

                mode: "text/x-c++src",    //C++

                indentUnit:,             // 缩进单位为4

                indentWithTabs: true,     //

                smartIndent: true,        //自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true。

                styleActiveLine: true,       // 当前行背景高亮

                theme: 'midnight',         // 编辑器主题

            });

            editor.setSize('600px','400px'); //设置代码框大小

        </script>

    </body>

</html>

效果图:

关于如何给代码框中赋值和取值，可使用如下方法:

editor.setValue(""); //赋值

editor.getValue(); //取值

上述只是一个简单的示例，更多知识还请参考官方网站对应的文档。

CodeMirror在线代码编辑器使用的更多相关文章

  1. CodeMirror 在线代码编辑器

    像百度编辑器插件部分.菜鸟教程示例等高德地图都在使用,这里也记录一下: CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件...... vue 中使用 参见:h ...

  2. Js的在线代码编辑器：CodeMirror

    github地址:https://github.com/codemirror/CodeMirror/tree/master/demo 里面包含需要的js.css文件以及大量的示例 官网:https:/ ...

  3. JS在线代码编辑器多种方案monaco-editor，vue-monaco-editor

    前言 JavaScript在线代码编辑器. 需要代码提示,关键字高亮,能够格式化代码.(不需要在线运行) 简简单单的需求. 方案一: Monaco-editor 简介:微软的开源项目,开源中国上面的在 ...

  4. (视频) 《快速创建网站》 3.2 WordPress多站点及Azure在线代码编辑器 － 扔掉你的ftp工具吧，修改代码全部云端搞定

    本文是<快速创建网站>系列的第6篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...

  5. 20个最强的基于浏览器的在线代码编辑器 - OPEN资讯

    20个最强的基于浏览器的在线代码编辑器 - OPEN资讯 20个最强的基于浏览器的在线代码编辑器

  6. 在线代码编辑器CodeMirror简介

    1.什么是Code Mirror 最近做一个项目需要在网页上实现一个代码编辑器,支持语法高亮.自动缩进.智能提示等功能.发现Code Mirror刚好满足所有需求.Code Mirror是由js写的一 ...

  7. 在线代码编辑器 Codemirror 的轻量级 React 组件

    代码编辑器 CodeMirror 的轻量级 React 组件 demo @uiw-react.github.io/react-codemirror/ 特性:

  8. ACE Editor在线代码编辑器简介及使用引导

    转自博客:https://www.cnblogs.com/cz-xjw/p/6476179.html ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScrip ...

  9. CodeMirror：基于JavaScript的代码编辑器

    官方网站定义: http://codemirror.net/ CodeMirror is a versatile text editor implemented in JavaScript for t ...

随机推荐

  1. Django:实现读写分离

    库的配置 1.读写分离 settings配置 #settings.py 配置库信息,生成2个库 DATABASES = { 'default': { 'ENGINE': 'django.db.back ...

  2. ovirt平台新建kvm操作

    登录后点击管理门户,随后计算-->虚拟机--> 新建 一般情况下需要操作的选项如下: 普通: 操作系统:linux 优化目标:服务器 描述:自定义 nic1:选择默认的网络 系统: 内存, ...

  3. 《大象 Thinking in UML》读书笔记：Process-oriented vs. Object-oriented

    前言 面向过程 还是 面向对象?这不仅仅是个软件工程术语,其问题甚至可以追溯到亚里士多德:您把这个世界视为过程还是对象? 回归到现今的软件行业,这不仅仅是个某个具体编程技术问题,更是认识论问题. 认识 ...

  4. 基于kubeamd初始化安装kubernetes集群

    环境:master,etcd 172.16.1.5node1 172.16.1.6node2 172.16.1.7前提:1.基于主机名通信,/etc/hosts 2.时间同步3.关闭firewalld ...

  5. python read PDF for chinese

    import sys import importlib importlib.reload(sys) from pdfminer.pdfparser import PDFParser,PDFDocume ...

  6. Linux跑脚本用sh和./有什么区别？

    一个很有意思的例子: sh是一个shell.运行sh a.sh,表示我使用sh来解释这个脚本:如果我直接运行./a.sh,首先你会查找脚本第一行是否指定了解释器,如果没指定,那么就用当前系统默认的sh ...

  7. 回调方式进行COM组件对外消息传递

    情景:被调用者--COM组件:调用者---外部程序作用:COM组件 到 外部程序 的消息传递方法: 1.外部程序通过接口类对象,访问接口类的方法.COM对象通过连接点方式,进行消息的反向传递. 2.外 ...

  8. 自动生成百度小程序sitemap.txt文件路径

    因为业务需要,需要在目前项目上开发一个百度小程序,百度智能小程序上线了,但是内容每天得推送,不可能一个小程序路径一个推送吧,因为小程序路径和项目路径不一致. 因为项目是用ThinkPHP开发的,在此附 ...

  9. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  10. javax validation--参数基础校验

    Bean Validation 1.1当前实现是hibernate validator 5,且spring4才支持.接下来我们从以下几个方法讲解Bean Validation 1.1,当然不一定是新特 ...