对于edit_area的使用

最新推荐文章于 2018-06-22 17:00:06 发布

fengzhongmuyi222

最新推荐文章于 2018-06-22 17:00:06 发布

阅读量919

点赞数

文章标签： VB Pascal JavaScript Python CSS ViewUI

本文链接：https://blog.csdn.net/fengzhongmuyi222/article/details/83890174

版权

对于一些比较大型的项目来说，做一些梳理有助于了解项目中技术优势：
究竟怎么才能把项目中的代码展示出来呢，这里介绍一下EditArea，它是一个javascript源代码编辑器。支持：文本格式化，搜索与替换，实时语法着色加亮。当前支持的语言包括：PHP、CSS、Javascript、Python、HTML、XML、VB、C、CPP、SQL、Pascal、Basic、Brainf*ck。
实例展示：[url]http://www.cdolivet.com/editarea/editarea/exemples/exemple_full.html[/url]

该能够定位到你想看的文件，甚至是某一行代码，某一个功能模块及某一个工具类！
其实实例展示当中的功能很多，我学习过程中做了一个能够展示代码，并定位到某一行的功能以下稍作一点展示：
首先找到自己要使用的功能单元
对实例展示当中的功能简化如下：

<title>文件定位</title>
<script type="text/javascript" src="<c:url value='/edit_area/edit_area_full.js'/>"></script>
<script type="text/javascript">
//initialisation
editAreaLoader.init({
	id: "example_1"	// id of the textarea to transform		
	,start_highlight: true	// if start with highlight
	,allow_resize: "both"
	,allow_toggle: true
	,word_wrap: false
	,toolbar: "search, go_to_line, fullscreen, |, undo, redo, |, select_font,|, change_smooth_selection, highlight, reset_highlight"
	,language: "en"
	,syntax: "${fileType}"	
	,EA_load_callback: "goL(${line})"
});

function toogle_editable(id)
{
	editAreaLoader.execCommand(id, 'set_editable', !editAreaLoader.execCommand(id, 'is_editable'));
}
function   goL(line)    
{   
	var example_1 = document.getElementById("example_1");
	var v = example_1.value.split('\r\n');   
	 ch = 0;    
	for(var   i=0;i < line-1;i++) {    
		ch+=v[i].length+2;
	}
	editAreaLoader.setSelectionRange("example_1", ch, ch);	  
}    

</script>
</head>
<body leftmargin="0" rightmargin="0" >

	<fieldset>
		<legend>${fileName}</legend>
        <legend>${relativePath}</legend>
		<textarea id="example_1" style="height: 500px; width: 100%;" name="test_1" >
${fieldset}
		</textarea>		
	</fieldset>
</body>