jQuery实现行号编辑器

最新推荐文章于 2024-04-30 15:38:57 发布

孟哥1989

最新推荐文章于 2024-04-30 15:38:57 发布

阅读量1k

点赞数

分类专栏： Web开发文章标签： jquery 编辑器

本文链接：https://blog.csdn.net/liumengcheng/article/details/27355501

版权

Web开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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="取消编辑" οnclick="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函数是得到行编辑器中的内容，这个内容就是编辑以后的内容。

效果如图：