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. vscode+phpstudy构建php调试环境

    由于vs code开源和跨平台,而且插件很多,所以打算以后编写和调试php都用vs code. 配置vs code+phpstudy的php调试环境步骤如下: 1.配置phpstudy,其他选项菜单- ...

  2. python3中try异常调试 raise 异常抛出

    一.什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行. 一般情况下,在Python无法正常处理程序时就会发生一个异常. 异常是Python对象,表示一个错误. 当Py ...

  3. 图说jdk1.8新特性（5）--- 编译器新特性

    /** * Returns the name of the parameter. If the parameter's name is * {@linkplain #isNamePresent() p ...

  4. Oracle 11g新特性direct path read引发的系统停运故障诊断处理

    黎俊杰 | 2016-07-28 14:37 声明:部分表名为了脱敏而用XX代替 1.故障现象 (1)一个业务系统输入用户名与密码后无法进入首页,表现为一直在运行等待,运行缓慢 (2)整个系统无法正常 ...

  5. ondblclick和dblclick区别

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

  6. SQL注入原理-手工联合注入查询技术

    实验报告记录 得到实验结果

  7. 肖哥HCNP-正式篇笔记

    21.网工学习环境准备. 一. 关掉所有杀毒软件及管家如阿健. 二. 安装环回网卡 (一定要先安装.) 1. 计算机设备管理 2. 在右侧最上端计算机名上方右键,点击过时硬件. 3. 下一步.手动选择 ...

  8. pdsh工具的使用

    pdsh的全称是parallel distributed shell,与pssh类似,pdsh可并行执行对远程目标主机的操作,在有批量执行命令或分发任务的运维需求时,使用这个命令可达到事半功倍的效果. ...

  9. 算法笔记codeup-Contest100000566

    ABCD太直接了就不放了 E 求一元二次方根   C语言 #include <stdio.h> #include <math.h> int main() { ; ; ; sca ...

  10. kafka题目

    1. Kafka的用途有哪些?使用场景如何?2. Kafka中的ISR.AR又代表什么?ISR的伸缩又指什么3. Kafka中的HW.LEO.LSO.LW等分别代表什么?4. Kafka中是怎么体现消 ...