我有一个带有标签的网页,当我点击一个标签时,它应该加载一个文本编辑器,然后从文件中获取文本并将其放在文本编辑器中。
但是,文本不会同步加载,它的行为是异步的。即使我做了一些应该同步的东西。
这是代码:
function init(){
$( "#accordion" ).accordion({heightStyle: "content",collapsible: true});
$( "#tabs" ).tabs(
{
activate: function(click,ui) {
ui.oldPanel.children("#editor").remove();
ui.newPanel.load("be.htm",function(response, status, xhr){
$("#editor").css("width","100%");
$("#editor").css("height","500px");
$.ajax(
{
url: "./load_content.php",
async: false,
data: "name="+ui.newTab.text(),
success: loadContent
});
});
}
}
);
}
function loadContent(contenu){
alert(contenu);
$("#textBox").html(contenu);
}
根据要求,我试图制作MCVE
这里是be.htm,“编辑”(我拿出了所有不必要的东西)
<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
</head>
<body>
<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
</body>
</html>
这里是bv.html,代码必须出现的网页(jquery脚本是lcoally存储在我的计算机上,所以你必须输入自己的路径,抱歉
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projet</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- <link rel="stylesheet" href="YOURPATHHERE/Projet/jquery-ui.css">- -->
<script src="YOURPATHHERE/Projet/jquery-2.1.3.js"></script>
<script src="YOURPATHHERE/Projet/jquery-ui.js"></script>
<script src="YOURPATHHERE/Projet/bv.js"></script>
<script src="YOURPATHHERE/Projet/jstree.js"></script>
<link rel="stylesheet" href="./bv.css">
<script>
$(function() {
init();
});
</script>
</head>
<body id="body">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Onglet1</a></li>
<li><a href="#tabs-2">Onglet2</a></li>
<li><a href="#tabs-3">Onglet3</a></li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
我向你提供了我到目前为止的完整javascript代码。
最后这里是由ajax调用的php:
<?php
$filename=$_GET['name'];
$data = file_get_contents("./".$filename);
echo $data;
return $data;
?>
顺便说一句,如果你发现这段代码很丑,我很抱歉,但我已经告诉我了。