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. CSS3扇形进度效果

    .coutdown-animate {     position: absolute;     top: 0;     left: 0;     right: 0;     bottom: 0;    ...

  2. vue辅助函数mapStates与mapGetters

    状态管理器 <!-- store.js: --> import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export de ...

  3. springboot + 自定义配置文件读取

    新建一个配置文件 src\main\resources\resources\config.properties #自定义配置文件 #System Encoding #File Upload Temp ...

  4. ondblclick和dblclick区别

    1.ondblclick是一个HTML DOM Event 对象,没有jquery也可以触发这个事件的,使用方法例如 1 <button ondblclick="xxx"&g ...

  5. 21.centos7基础学习与积累-007-远程连接

    从头开始积累centos7系统运用 大牛博客:https://blog.51cto.com/yangrong/p5 IP地址: 互联网上的计算机 都会有一个唯一的32位的地址,ip地址,我们访问服务器 ...

  6. Python包模块化调用方式详解

    Python包模块化调用方式详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一般来说,编程语言中,库.包.模块是同一种概念,是代码组织方式. Python中只有一种模块对象类型 ...

  7. appium+python自动化63-使用Uiautomator2报错问题解决

    前言 appium desktop V1.7.1版本使用命令行版本启动appium后,使用Uiautomator2定位toast信息报错:appium-uiautomator2-server-v0.3 ...

  8. VMware下安装的CentOS7.5，设置成静态IP后ping不通外网

    网上很多都说用下面的方法即可解决 在CentOS中 ping www.baidu.com 无法ping通,可能原因是DNS没配置好 方法一: 修改vim /etc/resolv.conf 增加如下内容 ...

  9. collections.defaultdict()

    https://www.cnblogs.com/herbert/archive/2013/01/09/2852843.html >>> import collections > ...

  10. samba服务器的搭建和用户权限，文件夹权限设置

    一.简介:samba服务是基于netbios  安装: 通过yum安装 [root@localhost ~]# yum install samba samba-client samba-swat 查看 ...