jQuery实现行号编辑器

来源：互联网发布：video.js rtmp 编辑：程序博客网时间：2024/06/07 09:14

css文件：

.lineedit:hover {background-color: #F0F8FF;color: #000;border: 1px solid #ccc;}

前端html：

<div class="easyui-tabs" id="tabsEdit">                        <div title="预览" id="div_configXML" style="width:100%;">                        </div>                        <div title="编辑" id="div_saveXML" style="width:100%;">                            <form action="#">                            <div>                            <input type="button" style="display: block;float:left;" value="保存" id="savetxt">                            <input type="button" value="取消编辑" onclick="str_to_line_edit(oldTxt);$('#tabsEdit').tabs('select',0);">                            </div>                            <div id="div_line_edit" style="width:99%;"></div>                            <input type="hidden" id="conf_file_name">                            </form>                        </div>                                            </div>

js代码：

function str_to_line_edit(str){    var data=str.split('\n');    $("#div_line_edit *").remove();    var isIE=false;    if (navigator.userAgent.indexOf("MSIE")>0){       isIE=true;    }    for (var i=0;i<data.length;i++)        {            var codes=data[i];            var linenum=i+1;            var div=$("<div class='lineedit'><span style='float:left;margin-top:1px;'> "+linenum            +'.</span>'+"<textarea style='width:732px;height:18px;overflow-y:hidden;background:transparent;border-style:none;'></textarea></div>");            if(codes.length>93 && isIE){                 $($(div[0]).children().get(1)).css("height","36px");             }            $($(div[0]).children().get(1)).val(codes);            $("#div_line_edit").append(div);        }    //当用户编辑的时候文字超过一行就要另起一行    $("textarea").scroll(function(){var str = $(this).css("height");            var height=str.substring(0,str.length-2);var pInt=parseInt(height);            pInt+=18;$(this).css("height",pInt+"px");});}function line_edit_to_str(){    var data="";    for (var i=0;i<$("#div_line_edit").children().length;i++)        {            data=data+$($($("#div_line_edit").children()[i]).children().get(1)).val()+"\n";        }    return data;    }

//函数解释
str_to_line_edit函数是把从远程的来的str存入行编辑器；
line_edit_to_str函数是得到行编辑器中的内容，这个内容就是编辑以后的内容。

效果如图：

0 0