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(红色标注),用<pre><code class="json">code</code></pre>。

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

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

js文件

<script src="dist/codemirror-4.11/lib/codemirror.js"></script> 主js 文件

<script src="dist/codemirror-4.11/addon/edit/matchbrackets.js"></script>

<script src="dist/codemirror-4.11/addon/comment/continuecomment.js"></script>

<script src="dist/codemirror-4.11/addon/comment/comment.js"></script>

<script src="dist/codemirror-4.11/mode/javascript/javascript.js"></script> 因为使用的是javascript mode


css 文件

<link rel="stylesheet" href="dist/codemirror-4.11/lib/codemirror.css"> 主css 文件

<link rel="stylesheet" href="dist/codemirror-4.11/theme/monokai.css"> 主题

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

<textarea id="code" name="code" style="display: none;">code</textarea>

执行 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}      });


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

针对该功能,在 codemirror.js 中做了一点小手脚。

enventInWidget(display,e){
var n1=e_target(e);
if($(n1).text()=='请输入要检验的日志'){
$(n1).text('');
}
}


定义全局flag

var 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 表示第一次输入,即要删除默认提示语。


你可能感兴趣的:(JavaScript,codemirror)