zoukankan      html  css  js  c++  java
  • CodeMirror的使用方法

    最近项目中用到了CodeMirror这个代码编辑器,感觉非常好用,可以设置很多种代码格式。默认前提是你已经正确引入了所有的js文件和css文件。

    下面是我在项目中用到过和在网上搜集整理的使用方法:

    1、首先在html界面中建立textarea标签,用于生成代码框

    <textarea id="code"></textarea>

    2、根据textarea的id获取到标签元素,将容器转换为编辑器

    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {//定义CodeMirror代码编辑器
        lineNumbers: true,     // 显示行号
            indentUnit: 4,         // 缩进单位为4
            styleActiveLine: true, // 当前行背景高亮
            matchBrackets: true,   // 括号匹配
            mode: 'htmlmixed',     // HMTL混合模式
            lineWrapping: true,    // 自动换行
            theme: 'monokai',      // 编辑器主题
    });

     API

    editor.setSize(width,height)//设置编辑框的尺寸

    editor.getValue()//获取经过转义的编辑器文本内容

    editor.toTextArea()或editor.getTextArea().value//该方法得到的结果是未经过转义的数据

    editor.setValue(text)//设置编辑器文本内容

    editor.getRange({line,ch},{line,ch})//获取指定范围内的文本内容第一个对象是起始坐标,第二个是结束坐标

    editor.replaceRange(replaceStr,{line,ch},{line,ch})//替换指定区域的内容

    editor.getLine(line)//获取指定行的文本内容

    editor.lineCount()//统计编辑器内容行数

    editor.firstLine()//获取第一行行数,默认为0,从开始计数

    editor.lastLine()//获取最后一行行数

    editor.getLineHandle(line)//根据行号获取行句柄

    editor.getSelection()//获取鼠标选中区域的代码

    editor.replaceSelection(str)//替换选中区域的代码

    editor.setSelection({line:num,ch:num1},{line:num2,ch:num3})//设置一个区域被选中

    editor.somethingSelected()//判断是否被选择

    editor.getEditor()//获取CodeMirror对像

    editor.undo()//撤销

    editor.redo()//回退

    可能整理的不全,欢迎补充。

     前端交流群,期待你的加入!群号:127768464

  • 相关阅读:
    不可小视视图对效率的影响力
    Maximum Margin Planning
    PhysicsBased Boiling Simulation

    Learning Behavior Styles with Inverse Reinforcement Learning
    Simulating Biped Behaviors from Human Motion Data
    Nearoptimal Character Animation with Continuous Control
    Apprenticeship Learning via Inverse Reinforcement Learning
    回报函数学习的学徒学习综述
    Enabling Realtime Physics Simulation in Future Interactive Entertainment
  • 原文地址:https://www.cnblogs.com/sysg/p/6589128.html
Copyright © 2011-2022 走看看