CODEMIRROR 基本用法 - 专题内容 - 黄兵的个人博客

文章内容

2017/7/27 9:08:59,作者: 黄兵

CODEMIRROR 基本用法

使用CodeMirror最简单的方法就是加载下的js和css，再加上mode/目录下的mode js文件就好了。例如：

<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>

然后，就可以创建CodeMirror实例了：

var myCodeMirror = CodeMirror(document.body)

编辑器会被附加到body内，并且将使用前面加载的mode。要对新的编辑器进行更多控制，可以配置对象作为二个参数传给CodeMirror：

var myCodeMirror = CodeMirror(document.body, {
  value: "function myScript(){return 100;}\n",
  mode:  "javascript"
});

此操作会初始化编辑器并往里面放一个代码片段(value部分)，并且明确指定使用javascriptmode（这种做法在页面上加载了多种mode的时候很有用）。

有的时候，不想将编辑器添加到某元素内，而是希望能更好地控制其添加方式，那么给CodeMirror的第一个参数也可以是一个用于将编辑器放到某个指定元素内的函数。例如，使用一个真正的编辑器替换textarea：

var myCodeMirror = CodeMirror(function(elt) {
  myTextArea.parentNode.replaceChild(elt, myTextArea);
}, {value: myTextArea.value});

这是通常使用CodeMirror的方法，然后CodeMirror还提供了一个更强大的简便方法：

var myCodeMirror = CodeMirror.fromTextArea(myTextArea);

这样做可以确保在form提交时（前提：属于form）textarea的值可以随着编辑器的值更新。

本文转载自：Javascript爱好者 - CODEMIRROR 基本用法

分享到：

发表评论

评论列表

e on 2022-12-03 11:15:34 回复 有用（0）

e

有回复电子邮件通知

回复

e on 2022-12-03 11:13:27 回复 有用（0）

e

有回复电子邮件通知

回复

e on 2022-12-03 09:01:19 回复 有用（2）

e

有回复电子邮件通知

回复

游客>*,J on 2022-12-03 11:13:29

e

e on 2022-12-03 08:40:48 回复 有用（1）

e

有回复电子邮件通知

回复

游客!B?y on 2022-12-03 11:13:32

e

e on 2022-12-03 08:35:54 回复 有用（1）

e

有回复电子邮件通知

回复

游客I8%Y on 2022-12-03 11:13:33

e

e on 2022-12-03 08:33:40 回复 有用（1）

e

有回复电子邮件通知

回复

游客!QHA on 2022-12-03 11:13:36

e

e on 2022-12-03 08:20:14 回复 有用（2）

e

有回复电子邮件通知

回复

游客QxKD on 2022-12-03 09:01:21

e

游客AiZ1 on 2022-12-03 11:13:37

e

e on 2022-12-03 08:17:22 回复 有用（2）

e

有回复电子邮件通知

回复

游客^rPg on 2022-12-03 09:01:24

e

游客^o<2 on 2022-12-03 11:13:38

e

搜索文章

文章分类

1、CodeMirror基本用法

文章归档