我如何从ace编辑器上的url显示中读取文件

时间:2016-03-16 14:28:21

标签: javascript php ajax ace-editor

这些天我正在研究ajax和ace编辑器,我想读一个url文件并在ace编辑器上显示它,我不知道如何在网址为https时获取它,你有一个好的方法吗? / p>

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cerulean/bootstrap.min.css" media="all"/>
<style>
#code1,#code2{
	height:800px;
	font-size:14px;
	border-bottom:2px solid #999;
}
ul.app_cat_ul{
	padding:0px;
	list-style:none;
	overflow:hidden;
}
ul.app_cat_ul li a:hover{
	background-color:#EEE;
}
/* nav */
ul.nav_ul{
	margin:0px;
	padding:0px;
	list-style:none;
	overflow:hidden;
}
ul.nav_ul li{
	float:left;
	margin-right:3px;
}
ul.nav_ul li a{
	padding:12px;
	display:block;
	color:#555;
	background-color:#FFF;
	border:1px solid #EEE;
}
ul.nav_ul li a:hover{
	background-color:#EEE;
}
ul.ul_buttons li a{
	margin:5px 0px;
	color:#555;
	background-color:#FFF;
	border:1px solid #C0C0C0;
}
</style>
</head>
<body>
	<div class="header">
		<div class="container-fluid">
        <div class="row">
        	<div class="col-md-12 text-center">
            	<h1>ACE ajax test</h1>
            </div>
        </div>
        <div class="row">
        	<div class="col-md-12">
                <div class="well well-sm">
                	<form class="form-inline text-left">
                    <fieldset>
                    
                    <div class="form-group buttons_div">
                      <div class="col-md-12">
                      	<ul class="nav_ul ul_buttons">
                        	<li><a id="load_url" href="#">Load&nbsp;Url</a></li>
                            <li><a id="browse" href="#">Browse</a></li>
                        </ul>
                      </div>
                    </div>
                    <input style="display:none;" id="file" name="file" class="btn btn-default" type="file">
                    </fieldset>
                    </form>
                 <div class="row">
                        <div class="col-md-12 div_code1">
                        	<div class="h_text">Enter here:</div>
                            <div id="code1"></div>
                        	<div id="code2" style="display:none"></div>
                        </div>
                    </div>
                </div><!-- Modal -->
                    <div class="modal fade" id="url_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Enter Url</h4>
                          </div>
                          <div class="modal-body">
                          	<input id="url" name="url" type="text" placeholder="Enter full url" class="form-control input-md">
                          </div>
                          <div class="modal-footer">
                          	<button data-dismiss="modal" id="load" name="load" class="btn btn-success">Load</button>
                            <button data-dismiss="modal" id="cancel" name="cancel" class="btn btn-danger">Cancel</button>
                          </div>
                        </div>
                      </div>
                    </div>

            </div>
        </div>
        <div class="row">
        	<div class="col-md-12 text-center">
            	<div class="well well-sm data_tb text-left" style="overflow:auto;display:none;"></div>
            </div>
        </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zclip/1.1.2/jquery.zclip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ext-language_tools.js"></script>
<script>
$(document).ready(function(e) {
	
	ace.require("ace/ext/language_tools");
	var editorAce1 = ace.edit("code1");
	editorAce1.focus();
	editorAce1.setOptions({
		enableBasicAutocompletion: true,
		enableSnippets: true,
		enableLiveAutocompletion: true
	});
    editorAce1.setTheme("ace/theme/chrome");
    editorAce1.getSession().setMode("ace/mode/plain_text");
	
	var editorAce2 = ace.edit("code2");
	editorAce2.setOptions({
		enableBasicAutocompletion: true,
		enableSnippets: true,
		enableLiveAutocompletion: true
	});
    editorAce2.setTheme("ace/theme/chrome");
    editorAce2.getSession().setMode("ace/mode/html");
	editorAce2.getSession().setUseWorker(false);
	
	
	$("#load_url").click(function(e) {
        e.preventDefault();
		$("#url_modal").modal({backdrop : false});
    });
	
	$("#load").click(function(e) {
        e.preventDefault();
		url = $.trim($("#url").val());
		if(url != "")
		{
			editorAce1.getSession().setUseWorker(false);
			editorAce1.setValue("Please wait while loading file from url.");
			$.ajax({
				type	: "POST",
				url		: "/get_data.php",
				dataType: "text",
				data	: {"url" : url},
				success : function(data)
				{
					if(data == "file_not_found")
					{
						editorAce1.setValue("Unable to load file from url!");
					}else
					{
						editorAce1.getSession().setUseWorker(true);
						editorAce1.setValue(data);
					}
				},
				error 	: function()
				{
					editorAce1.setValue("Unable to load file from url!");
				}
			});
		}
    });
	
	$("#browse").click(function(e) {
        e.preventDefault();
		$("#file").click();
    });
	
	function read_file(e)
	{
		f = e.target.files[0];
		if(f)
		{
			r = new FileReader();
			r.onload = function(e)
			{
				var contents = e.target.result;
				var file_name = f.name;
				editorAce1.getSession().setUseWorker(true);
				editorAce1.setValue(contents);
			}
			r.readAsText(f);
		}
		else
		{
			editorAce1.getSession().setUseWorker(false);
			editorAce1.setValue("Unable to load file!");
		}
	}
	
	$("#file").change(function(e) {
        e.preventDefault();
		read_file(e);
    });
	
	
	
	themelist = ace.require("ace/ext/themelist");
	theme = "";
	$(themelist.themes).each(function(key, value) {
		theme += '<option value="' + value.name + '">' + value.caption + '</option>';
    });
	$("#themes").append(theme);
	
	$("#themes").val("chrome");
	$("#font_size").val("14");
	
	$("#themes,#font_size").change(function(e) {
        setTheme();
		editorAce1.focus();
    });
});


	
</script>
</body>
</html>

The userface pic Core code pic 大多数代码运作良好。你能帮我写一下get_data.php文件吗,让页面工作。感谢。

0 个答案:

没有答案