html提示语默认显示,codemirror 小功能的添加（点击删除默认的提示语）

最近要写一个简单的html网页的日志规范，领导建议用一些目前流行的code代码高亮度显示插件(javascript)等。

然后，就开始对各种不通的code代码显示插件的研究。

研究的目标：

(1)有一个纯文本显示(highlight ,codemirror 都可以实现)；

(2)一个输入代码高亮度显示(codemirror 实现)。

首先，研究的是highlight,highlight 是javascript+css 控制完成的代码提示，功能很强大。而且使用方便。主要体现在：

(1)只需要引入一个js 脚本(highlight.pack.js)

(2)有大约50多个不同的theme,可以根据自己的需求来使用，而且只需引用一个主题的css文件即可。

(3)在打算高亮度显示的code(红色标注)，用

code

。

但是 highlight 插件目前没有找到可以运用到textarea 的方法。

所以后来研究了codemirror codemirror 的引用方法。

js文件

主js 文件

因为使用的是javascript mode

css 文件

主css 文件

主题

下面是要输入代码的区域：

code

执行 js 代码：

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {

lineNumbers: true,

continueComments: "Enter",

matchBrackets: true,

extraKeys: {"Ctrl-Q": "toggleComment"},

mode: {name: "javascript",globalVars: true,json:true}

});

为提示输入的内容，设置默认提示语“请输入要检验的日志”，点击光标却在提示语之后，为了使得点击删除默认提示语，光标回到首行。

针对该功能，在 codemirror.js 中做了一点小手脚。enventInWidget(display,e){

var n1=e_target(e);

if($(n1).text()=='请输入要检验的日志'){

$(n1).text('');

}

}

定义全局flagvar flag=0;

在buildLineContent(cn,lineView,ii){

if(ii>0&&flag==0){

lineView.line.text=lineView.line.text.substring(lineView.line.indexOf('请输入要检验的日志'+9,lineView.line.text.length));

}

其中，buildLineContent函数已加入一个变量ii  ,getLineContent函数也加入一个变量ii,ii=0 表示

首次加载，ii=1 表示第一次输入，即要删除默认提示语。