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. SpringBoot配置中@ConfigurationProperties和@Value的区别

    基本特征 @ConfigurationProperties 与@Bean结合为属性赋值 与@PropertySource(只能用于properties文件)结合读取指定文件 与@Validation结 ...

  2. localStorage的增删改查

    var _localStorage = window.localStorage; undefined /* 增 */ _localStorage.name = '张泰松' "张泰松" ...

  3. JavaScript之鼠标事件

    事件三要素: 事件源.事件类型(点击onclick)=function(){ 事件触发后执行的代码 } 案例: function abb(a){ return document.getElementB ...

  4. caement Archaic spelling of cement

    caement Archaic spelling of cement. caement Alternative forms[edit] caement (archaic) cæment (archai ...

  5. np.random模块的使用介绍

    np.random模块常用的一些方法介绍 名称 作用 numpy.random.rand(d0, d1, …, dn) 生成一个[d0, d1, …, dn]维的numpy数组,数组的元素取自[0, ...

  6. Android选项卡TabHost功能和用法

    1.布局文件 <TabHost xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  7. 《Spring in Action 4》阅读札记

    重要思路 Spring通过面向POJO编程.依赖注入.AOP和模板技术来降低Java开发的复杂性. 依赖注入能够让互相协作的软件组件保持松耦合,模块直接的耦合性是必要的,否则没法完成工作,但是耦合性需 ...

  8. PHP 接口输出 图片

    html: <img src="{eq name='v.miniqrcode' value=""}{:url('makeMiniQrcode_do')}?id={$ ...

  9. Mybatis返回表自增id

    在Mapper中,设置insert中添加useGeneratedKeys = "true"   keyProperty = "id" keyColumn=&qu ...

  10. manjaro跳坑记

    why manjaro 有两个原因: 我的电脑上win10+ubuntu16.04,ubuntu上跑一个程序会crash导致重启,不知道如何排查,想换个系统试试.(别人机器上同样G++版本不会cras ...