Javascript TinyMCE编辑器在slidetoggle下运行
首先，我必须承认，我对PHP或JS不太流利，但到目前为止，除了以下几点之外，我的一切都正常 我正在构建一个页面，用户可以在其中提交论文的新想法。因此，根据idea（也称为主题），用户需要提交标题、描述、论文需要使用的语言等 假设每个用户都有几个主题，我调用一个MySQL数据库并使用PFP显示当前提交的主题。但是，我以可折叠的格式显示主题：用户首先获得所有主题的列表，通过单击主题，该项将展开以显示主题的详细信息（在JS中使用$content.slidetoggle（）语句） 这是一个陷阱，在用户单击主题后显示的“”下是一个TinyMCE编辑器。那个编辑以一种非常奇怪的方式表现出来。例如，TinyMCE工具栏中的按钮非常长，导致按钮超出编辑器本身的边界。它们还分布在几行中，工具栏的高度突然是文本编辑器本身的四倍。 我创建了一个JSFIDLE来尝试和演示正在发生的事情： 我已经拍摄了问题的截图： 我也试着用谷歌搜索类似的问题（比如：），但这些问题并不能描述我遇到的问题。此外，我还尝试了那里提出的大多数解决方案，但似乎都不起作用 谢谢你帮助我 代码： HTML（由PHP生成）和JS:Javascript TinyMCE编辑器在slidetoggle下运行,javascript,php,tinymce,Javascript,Php,Tinymce,首先，我必须承认，我对PHP或JS不太流利，但到目前为止，除了以下几点之外，我的一切都正常 我正在构建一个页面，用户可以在其中提交论文的新想法。因此，根据idea（也称为主题），用户需要提交标题、描述、论文需要使用的语言等 假设每个用户都有几个主题，我调用一个MySQL数据库并使用PFP显示当前提交的主题。但是，我以可折叠的格式显示主题：用户首先获得所有主题的列表，通过单击主题，该项将展开以显示主题的详细信息（在JS中使用$content.slidetoggle（）语句） 这是一个陷阱，在用户单
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".header").click(function () {
//getting the next element
$content = $(this).next();
//checking if its already visible
$content.slideToggle(500);
//redo the TineMCE
});
});
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "autoresize",
menubar: false,
toolbar: ' bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | subscript superscript'
})
;</script>
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-pencil fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>List of topics promoted by Prof. Dr. Promotor Promotor</h2><div class= "container"><div class="header"><h3 class="w3-text-grey w3-padding-16">Topics of Type 1: Topics that are in the list for the allocation procedure</h3></div><div class="content">
</br><div class="container"><div class="header">The optimization of traffic lights in a normal environment with multiple crossings.</div>
<div class="content"><div>
<form action="?ManageMyTopics&ChangeTopicType1&TopicID=0" method="post">
<div class="containerw3" style= "width:100%"><table style="width:100%">
<tr>
<th>Please provide a title: </th>
<td><textarea style = "width:100%" name = "TitleField" id = "TitleField">The optimization of traffic lights in a normal environment with multiple crossings.</textarea></td>
</tr>
<tr>
<th>Choose an assistant:</th>
<td><select style = "width:100%" name = "AssistantSelection" id = "AssistantSelection">
<option value="Assistant@test.be" selected="selected">Assistant@test.be</option>
<option value="Assistant@test.be">Assistant Assistant</option>
</select>
</td>
</tr>
<tr>
<th>Choose a student:</th>
<td><select style = "width:100%" name = "StudentSelection" id = "StudentSelection">
<option value="student2@test.be" selected="selected">student2@test.be</option>
<option value="Student@test.be">Student Student</option>
<option value="student2@test.be">Student2 Student</option>
<option value="Student3@test.be">Student3 Student</option>
<option value="student4@test.be">Student4 Student</option>
<option value="student5@test.be">Student5 Student</option>
</select>
</td>
</tr>
<tr>
<th>Choose a status*:</th>
<td><select style = "width:100%" name = "StatusSelection" id = "StatusSelection">
<option value="Writing a proposal" selected="selected">Writing a proposal</option>
<option value="Available">Available</option>
<option value = "Writing a proposal">Writing a proposal</option>
<option value = "Allocated">Allocated</option>
</select>
</td>
</tr>
<tr>
<th>Choose a language*:</th>
<td>
<select style = "width:100%" name = "LanguageSelection" id = "LanguageSelection">
<option value="Preferably English" selected="selected">Preferably English</option>
<option value="Dutch">Dutch</option>
<option value="Preferably Dutch">Preferably Dutch</option>
<option value="Preferably English">Preferably English</option>
<option value="English">English</option>
</select>
</td>
<tr><th colspan="2"> Please provide a description for this topic*: </th></tr>
<tr><td colspan ="2">
<textarea cols="40" rows="20" style="width: 40em; height: 20em" name = "DescriptionOfTopic" id = "DescriptionOfTopic">This topic uses simulation.<br></textarea>
</td>
</tr>
</table></div></br>
<hr>
<h5 class="w3-text-teal"><i class="fa fa-save fa-fw w3-margin-right"></i>
<input type = "submit" value = "Save changes to topic description" id ="SaveChanges"/>
</h5>
</form>
</div></div>
</div>
</br><div class="container"><div class="header">Please add a title for this topic</div>
<div class="content"><div>
<form action="?ManageMyTopics&ChangeTopicType1&TopicID=3" method="post">
<div class="containerw3" style= "width:100%"><table style="width:100%">
<tr>
<th>Please provide a title: </th>
<td><textarea style = "width:100%" name = "TitleField" id = "TitleField">Please add a title for this topic</textarea></td>
</tr>
<tr>
<th>Choose an assistant:</th>
<td><select style = "width:100%" name = "AssistantSelection" id = "AssistantSelection">
<option value="" selected="selected"></option>
<option value="Assistant@test.be">Assistant Assistant</option>
</select>
</td>
</tr>
<tr>
<th>Choose a student:</th>
<td><select style = "width:100%" name = "StudentSelection" id = "StudentSelection">
<option value="" selected="selected"></option>
<option value="Student@test.be">Student Student</option>
<option value="student2@test.be">Student2 Student</option>
<option value="Student3@test.be">Student3 Student</option>
<option value="student4@test.be">Student4 Student</option>
<option value="student5@test.be">Student5 Student</option>
</select>
</td>
</tr>
<tr>
<th>Choose a status*:</th>
<td><select style = "width:100%" name = "StatusSelection" id = "StatusSelection">
<option value="Available" selected="selected">Available</option>
<option value="Available">Available</option>
<option value = "Writing a proposal">Writing a proposal</option>
<option value = "Allocated">Allocated</option>
</select>
</td>
</tr>
<tr>
<th>Choose a language*:</th>
<td>
<select style = "width:100%" name = "LanguageSelection" id = "LanguageSelection">
<option value="Preferably English" selected="selected">Preferably English</option>
<option value="Dutch">Dutch</option>
<option value="Preferably Dutch">Preferably Dutch</option>
<option value="Preferably English">Preferably English</option>
<option value="English">English</option>
</select>
</td>
<tr><th colspan="2"> Please provide a description for this topic*: </th></tr>
<tr><td colspan ="2">
<textarea cols="40" rows="20" style="width: 40em; height: 20em" name = "DescriptionOfTopic" id = "DescriptionOfTopic">Please add a description for this topic</textarea>
</td>
</tr>
</table></div></br>
<hr>
<h5 class="w3-text-teal"><i class="fa fa-save fa-fw w3-margin-right"></i>
<input type = "submit" value = "Save changes to topic description" id ="SaveChanges"/>
</h5>
</form>
</div></div>
</div>
</br> <form action = '?ManageMyTopics&AddNewTopicType1' method = 'post'><input type = 'submit' value = 'Add new topic of Type 1'/></form></div></div></br></br><div class="container"><div class="header"><h3 class="w3-text-grey w3-padding-16">Topics of Type 2: Topics proposed by students</h3></div><div class="content"><div class="container"><div class="header">Please add a title for this topic</div><div class="content">
<form action="?ManageMyTopics&ChangeTopicType2&TopicID=1" method="post">
<div class="w3-container">
<h5 class="w3-opacity"><b><input style = "border:none;width:100%" type="text" name = "TitleField" id = "TitleField" value="Please add a title for this topic"/></b></h5>
<h6 class="w3-text-teal"><i class="fa fa-fa-assistive-listening-systems fa-fw w3-margin-right"></i>
Choose an assistant: <select style = "border:none" name = "AssistantSelection" id = "AssistantSelection">
<option value="" selected="selected"></option>
<option value="Assistant@test.be">Assistant@test.be</option>
</select>
</h6>
<h6 class="w3-text-teal"><i class="fa fa-fa-assistive-listening-systems fa-fw w3-margin-right"></i>
Choose a student: <select style = "border:none" name = "StudentSelection" id = "StudentSelection">
<option value="" selected="selected"></option>
<option value="Student@test.be">Student@test.be</option>
<option value="student2@test.be">student2@test.be</option>
<option value="Student3@test.be">Student3@test.be</option>
<option value="student4@test.be">student4@test.be</option>
<option value="student5@test.be">student5@test.be</option>
</select>
</h6>
<h6 class="w3-text-teal"><i class="fa fa-fa-assistive-listening-systems fa-fw w3-margin-right"></i>
Choose a status*: <select style = "border:none" name = "StatusSelection" id = "StatusSelection">
<option value="Available" selected="selected">Available</option>
<option value="Available">Available</option>
<option value = "Writing a proposal">Writing a proposal</option>
<option value = "Allocated">Allocated</option>
</select>
</h6>
<h6 class="w3-text-teal"></i>
<input type = "submit" value = "Save changes to topic status" id ="SaveChanges"/>
</h6>
<hr>
</div>
</form>
</div>
</div>
</br> <form action = 'Index.php?ManageMyTopics&AddNewTopicType2' method = 'post'><input type = 'submit' value = 'Add new topic of Type 2'/></form></div></div></br></br>
.container {
width: 100%;
border: 1px solid #d3d3d3;
}
.container div {
width: 100%;
}
.container .header {
background-color: #d3d3d3;
padding: 2px;
cursor: pointer;
/*font-weight: bold;*/
}
.container .header> span:first-child + span {
/*float:right;*/
font-style: italic;
}
.container .content {
display: none;
padding: 5px;
width: 100%;
}
input[type=submit] {
padding: 5px 15px;
background: #ccc;
border: 0 none;
cursor: pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}
input[type=submit]:hover {
background-color: #009688
}
tr:nth-child(even) {
background-color: #f2f2f2
}
th {
padding: 15px;
text-align: left;
background-color: #009688;
color: white;
}
hr {
border: 0;
border-top: 1px solid #eee;
margin: 20px 0
}
textarea {
resize: vertical;
}