codemirror的笔记

--------------------文档资料---------------------------------

doc.posFromIndex(index: integer) → {line, ch}
计算并返回一个{line, ch}对象,该对象的基于零的index人的值相对于编辑器文本的开头。如果index超出文本范围,则返回的对象将分别剪切为文本的开头或结尾。
doc.indexFromPos(object: {line, ch}) → integer
相反的posFromIndex。

doc.getAllMarks() → array<TextMarker>

返回包含文档中所有标记范围的数组。

cm.refresh() 重载

doc.markClean()

将编辑器内容设置为“clean”,这是一个在编辑之前将保留的标志,并且当再次撤消此类编辑时将再次设置该标志。用于跟踪是否需要保存内容。这个功能不赞成使用changeGeneration,它允许多个子系统跟踪不同的清洁概念而不会干扰。

cm.on(type: string, func: (...args))

在编辑器实例上为给定的事件类型(字符串)注册事件处理程序。还有一个CodeMirror.on(object, type, func)版本允许在任何对象上注册事件。

"change" (instance: CodeMirror, changeObj: object)

每次更改编辑器的内容时​​触发。的changeObj是一个{from, to, text, removed, origin}有关所发生作为第二个参数的变化包含对象的信息。from 并且to是变化开始和结束的位置(在变更前坐标系中)(例如,可能是{ch:0, line:18}位置在第19行的开头)。text是一个字符串数组,表示替换更改范围的文本(按行拆分)。removed曾经是from和之间的文本,to被这个更改覆盖。在DOM更新发生之前,在操作结束之前触发此事件。

"changes" (instance: CodeMirror, changes: array<object>)

"change" 事件类似,但是按操作批处理,传递包含操作中发生的所有更改的数组。操作完成后会触发此事件,并且显示的更改将触发新操作。

"beforeChange" (instance: CodeMirror, changeObj: object)

在应用更改之前触发此事件,并且其处理程序可以选择修改或取消更改。的changeObj对象有fromtotext 属性,与"change"事件。它还有一个cancel()方法,可以调用它来取消更改,如果更改不是来自撤消或重做事件,update(from, to, text)则可以使用一种方法来修改更改。无法修改撤消或重做更改,因为它们包含一些元信息,用于恢复仅对该特定更改有效的旧标记范围。所有三个参数update都是可选的,并且可以保留以保持该字段的现有值不变。注意:您可能无法从"beforeChange"可能导致文档或其可视化更改的处理程序中执行任何操作。这样做,因为直接从CodeMirror实现的内容调用此处理程序,可能会导致编辑器损坏。

---------------------搜索资料---------------------------------------

codemirror 如何高亮一整行

使用 this.editor.markText({line:0, ch: 0}, {line: 1, ch: 9}, {className: "errorHighlight"}); 

触发事件

1.onChange(instance,changeObj):codeMirror文本被修改后触发。

instance是一个当前的codemirror对象,changeObj是一个{from,to,text[,removed][,origin]}对象。其中from,to分别表示起始行对象和结束行对象,行对象包括ch:改变位置距离行头的间隔字符,line:改变的行数。text是一个字符串数组表示被修改的文本内容,即你输入的内容。

2.onBeforeChange(instance,changObj):内容改变前被调用

3.onCursorActivity(instance):当鼠标点击内容区、选中内容、修改内容时被触发

4.onKeyHandled:(instance,name,event):当一个都dom元素的事件触发时调用,name为操作名称。

5.onInputRead(insatance,changeObj):当一个新的input从隐藏的textara读取出时调用

6.onBeforeSelectionChange(instance,obj):当选中的区域被改变时调用,obj对象是选择的范围和改变的内容(本人未测试成功)

7.onUpdate(instance):编辑器内容被改变时触发

8.onFocus(instance):编辑器获得焦点式触发

9.onBlur(instance):编辑器失去焦点时触发

常用方法

editor.refresh();刷新编辑器

editor.setOption('lineWrapping', true);设置自动换行

editor.setSize('auto', 'auto');设置自适应高度

getValue():获取编辑器文本内容

setValue(text):设置编辑器文本内容

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

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

getLine(line):获取指定行的文本内容

lineCount():统计编辑器内容行数

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

lastLine():获取最后一行行数

getLineHandle(line):根据行号获取行句柄

getSelection():获取鼠标选中区域的代码

replaceSelection(str):替换选中区域的代码

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

somethingSelected():判断是否被选择

getEditor():获取CodeMirror对像

undo():撤销

redo():回退

        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {  // 标识到textarea
            value : "http://www.cnblogs.com/oldphper",  // 文本域默认显示的文本
            mode : "text/html",  // 模式
            // theme : "",  // CSS样式选择
            indentUnit : 2,  // 缩进单位,默认2
            smartIndent : true,  // 是否智能缩进
            tabSize : 4,  // Tab缩进,默认4
            readOnly : false,  // 是否只读,默认false
            showCursorWhenSelecting : true,
            lineNumbers : true  // 是否显示行号
            // .. 还有好多,翻译不完。需要的去看http://codemirror.net/doc/manual.html#config
        });

          //alert(editor.getValue()); // 得到所有内容
            //editor.setValue("abc"); // 将编辑器内容改为"abc"
              
             // 0为起点,2行第3个字母到2行第5个字母
             //alert(editor.getRange({line:1,ch:2},{line:1,ch:5}));  //得到
             //editor.replaceRange("shashasha",{line:1,ch:2},{line:2,ch:5});
               
             //alert(editor.getLine(2));   // 第三行数据
             //alert(editor.lineCount());   // 总共几行
             //alert(editor.firstLine());   // 首行数0
             //alert(editor.lastLine());   // 末行数19,共20行
             //ob = editor.getLineHandle(1);   // 第二行数据句柄
             //alert(editor.getLineNumber(ob)); // 行句柄在哪行
             //editor.eachLine(0,2,alert(ob));
              
             //ob = editor.changeGeneration();    // 编辑动作次数,1次起
             //editor.markClean();   // 清除动作
             //editor.isClearn();    // 是否清除
              
             //ob = editor.getSelection();   // 获得选中的数据一条
             //ob = editor.getSelections();  // 获得选中数据多条
             editor.replaceSelection("ttttttt"); // 选中替换,一条根多条都替换,不选中则在光标处插入
             //editor.replaceSelections(["aaa","bbb"]); // 选中替换,多条对多选
             //editor.setSelection();  //设置选中
             //editor.setSelections();  //设置选中
             //ob = editor.listSelections(); //boj
             //ob = editor.somethingSelected(); // 是否有选中
             //editor.addSelection({line:2,ch:6}, {line:1,ch:2});  // 选中此段
              
             //ob = editor.getCursor();    // ob['line']、['ch']
             //editor.setCursor(2);    // 设置光标位置
              
             //ob = editor.hasFocus();   // focus?全false
              
             //editor.addOverlay("aaaaa"); //..
             //editor.removeOverlay("aaaaa"); //..
              
             //ob = editor.getDoc();   // 文档对象,很多
             //ob = editor.getEditor();   //..
              
             //ob = editor.setBookmark({line:1,ch:3}); // 书签对象
              
             //editor.addWidget({line:1,ch:2},"<if></if>",true); //添加部件
              
             //editor.setSize(1100,1100);    //设置宽高
             //editor.scrollTo(800,300); // 设置滚动条位置
              
             //editor.cursorCoords({line:1,ch:2},"aaaaaa"); //..
              
             //for (var i in ob)
             //    alert(i);
             //alert(ob);

猜你喜欢

转载自blog.csdn.net/xiaohxx/article/details/89667571