js在线代码编辑器富文本编辑器codemirror-BFW插件库

js在线代码编辑器富文本编辑器codemirror

CodeMirror 是一款“Online Source Editor”，基于Javascript，短小精悍，实时在线代码高亮显示，他不是某个富文本编辑器的附属产品，他是许多大名鼎鼎的在线代码编辑器的基础库。

1、首先在html界面中建立textarea标签，并引入js和css，用于生成代码框

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()//回退

使用方式：

第一步引入bfwone

第二步use插件及css和主题css

第三步配置参数

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["codemirror.5.26", "codemirror"], function() {
                var htmlEditor = CodeMirror.fromTextArea(document.getElementById("code"), {
                    lineNumbers: true,

                    // theme: 'default',
                });
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
   <textarea id="code">
       code
   </textarea>
</body>
</html>

官网：https://codemirror.net/