为何在html中调用TinyMce编辑框出来了，按钮却出不来？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为何在html中调用TinyMce编辑框出来了，按钮却出不来？相关的知识，希望对你有一定的参考价值。
为何在html中调用TinyMce编辑框出来了，按钮却出不来？
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>2ndTestTinyMce</title>
<script type="text/javascript" src="/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init( // General options mode : "textareas", theme : "advanced", plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", // Theme options theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, // Skin options skin : "o2k7", skin_variant : "silver", // Example content CSS (should be your site CSS) content_css : "css/example.css", // Drop lists for link/image/media/template dialogs template_external_list_url : "js/template_list.js", external_link_list_url : "js/link_list.js", external_image_list_url : "js/image_list.js", media_external_list_url : "js/media_list.js", // Replace values for the template plugin template_replace_values : username : "Some User", staffid : "991234" ); </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"></textarea> </form>
</head>
<body>
</body>
</html>
浏览器里结果如下
2、在form里添加一个隐藏项。
3、在页面向php提交数据时候，这里假设使用post方法。用js获取table的行数，添加到隐藏域里。
给你一个例子，动态添加的也一样可以取到行数。
不明白再问吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function getRows()
var t = document.getElementById("tt");
var h = document.getElementById("hiddenCount");
h.value = t.rows.length;
alert(t.rows.length);
return true;
</script>
</head>
<body>
<table width="200" border="1" id="tt">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<form id="form1" name="form1" method="post" action="test.php" onsubmit="return getRows();">
<input name="hiddenCount" type="hidden" id="hiddenCount" />
<input type="submit" name="Submit2" value="提交" />
</form>
</body>
</html>
追问
首先很感谢！
但我的问题不是在网页里显示form,而是调用现成的插件，TinyMce在wordpress中是标配，
人家都正常调用，我单独安插件的官网去调用，却出不来，这错在哪里？
tinymce富文本编辑器在iview的modal框中显示的问题
参考技术A 最近在使用tinymce+iview+vue写项目，在富文本编辑器配合弹框一起使用时，总是存在问题：弹框弹出的时候，富文本编辑器不能点击，鼠标的光标也不能在编辑器里获取焦点。不知道是因为tinymce在modal之前创建了，还是因为前一个dom没有销毁，所以这个dom又创建，导致了存在多个dom，然后就无法锁定唯一的dom节点。
无论是哪种原因，总之我找到了解决办法
缺点：这种判断方式，添加和编辑在同一页面时，编辑的时候是正常的，添加的时候富文本编辑器就不见了。所以很难过
这个方法就很可爱啦，可以同时在同一个页面添加和编辑~完美
以上是关于为何在html中调用TinyMce编辑框出来了，按钮却出不来？的主要内容，如果未能解决你的问题，请参考以下文章
如何让wordpress自带的TinyMCE编辑器识别更多html标签
vue tinymce 控制图片大小上传，以及富文本编辑框在dialog的问题