Mor*_*sen 10 javascript textarea tinymce
我处于一种奇怪的境地,我以前没有遇到任何问题,实现了我正在寻找的东西.以下代码是HTML页面的一部分,用于托管TinyMCE富文本框:
...
<textarea id="editing_field">This text is supposed to appear in the rich textbox</textarea>
...
首先,它按预期工作,创建一个包含所附文本的富文本框.但是,在某些时候,TinyMCE代码决定将textarea HTML转换为以下内容:
<textarea id="editing_field" style="display: none;"/>
This text is supposed to appear in the rich textbox
这使文本框下方的文本不完全理想.我不知道是什么导致了这种行为的改变,虽然我也在使用jQuery,如果它可能有任何影响.
我可以通过在页面加载后使用javascript将内容加载到文本框中来解决此问题,方法是使用ajax或隐藏HTML中的文本并移动它.但是,如果可能的话,我想直接从PHP中将文本发送到文本框中.任何人都知道这里发生了什么,以及如何解决它？
更新2:我成功地重现了导致行为改变的情境:起初我在textarea中只有第一个代码片段中的纯文本.但是,保存内容后,文本将如下所示:
<p>This text is supposed to appear in the rich textbox</p>
p标签的存在导致TinyMCE触发封闭的textarea与textarea之间的转换,textarea只是一个标签(如上所示).
更新1:添加了TinyMCE配置文件:
tinyMCE.init({
// General options
mode : "exact",
elements : "editing_field",
theme : "advanced",
skin : "o2k7",
skin_variant : "black",
plugins : "safari,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",
save_onsavecallback : "saveContent",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2 : "search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,forecolor,backcolor",
theme_advanced_buttons3 : "hr,removeformat,|,sub,sup,|,charmap,emotions,|,print,|,fullscreen,code",
theme_advanced_buttons4 : "styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
},
width : "450",
height : "500"
});
gra*_*bot 15
如果您不调用tinyMCE的JavaScript函数,则可能必须处理浏览器兼容性问题.
如果页面上只有一个tinymce框,您可以这样做:
tinyMCE.activeEditor.setContent('<span>some</span>');
您还可以设置BBCode等格式.查看setContent文档.
我希望你的PHP代码将HTML回显成一个JavaScript函数并调用它onload:
function loadTinyMCE($html) {
echo "
<script type="text/javascript">function loadDefaultTinyMCEContent(){
tinyMCE.activeEditor.setContent('$html');
}</script>
";
}
然后
<body onload="loadDefaultTinyMCEContent()">
如果你不想使用页面onload事件,tinymce有一个名为oninit的init选项,其功能类似.
或者,setupcontent_callback可让您直接访问iframe.
看来我已经解决了问题，除非有任何边缘情况破坏了解决方案。在将页面内容保存到数据库之前，我在页面内容上使用以下 PHP 代码：
$content = str_replace(chr(10), "", $content);
$content = str_replace(chr(13), "", $content);
$content = str_ireplace('<','​<',$content);
它的作用是删除所有换行符，然后在任何开始标记之前添加一个零宽度不可见字符。然后，在 TinyMCE 发挥其魔力之前，该文本会插入到文本区域标记之间。我不知道为什么，但这不会触发问题，并且附加字符不会显示在最终的 html 或 TinyMCE 的 html 视图中，因此我在该解决方案中看到的唯一问题是性能受到影响。一个细节是，似乎只有开始标签需要以这种方式前置，但为了简单起见，我在这里没有考虑到这一点。