jquery.ui.tab中的jQuery jWYSIWYG
时间:2020-03-06 14:50:01 来源:igfitidea点击:
所以我设法得到了一个带有Ajax ui.tab的页面,并且在其中一个选项卡中放置了jWYSIWYG textarea插件。不幸的是,我只能看到正常的文本区域。
但是,直接访问页面(即不使用ajax选项卡)是可行的。
发生了什么?
p / s:我是jQuery / JavaScript / AJAX / CSS的新手(即使这很重要)
解决方案
通过发布指向相关HTML文件(以及我们自己的任何自定义JavaScript文件)的链接,可以最好地解决问题。如果未托管该文件,则可以将源代码粘贴到http://pastebin.com/,然后在此处发布链接。
我预计问题在于,当ajax调用完成时,新的html会插入DOM中,但不会与jQuery挂钩。
通常,最初加载页面时,会将所有jquery优缺点添加到文档就绪或者onload事件中。但是,第一次加载页面时,textarea不在页面上。
当ajax调用返回时,文本区域将添加到页面。此时,我们需要调用所需的任何JavaScript来将其连接到jWYSIWTG控件。
jquery中有一个新功能(ish),这意味着我们仍然可以在文档就绪状态下设置所有内容(称为实时),但是我们可能会发现,更简单的方法是在ajax成功处理程序中调用联播代码。
我的解决方案是使用事件打开对话框修复对话框的宽度和高度盲点。
通过删除由插件自动创建的div.wysiwyg来关闭盲事件关闭对话框。
$('#dialogContent').bind('dialogopen', function(event, ui) { $('textarea').wysiwyg( { css :burl + 'public/css/text.css', controls : { separator00 : { visible : false }, separator01 : { visible : false }, separator02 : { visible : false }, separator03 : { visible : false }, separator04 : { visible : false }, separator05 : { visible : false }, separator06 : { visible : false }, separator07 : { visible : false }, separator08 : { visible : false }, separator09 : { separator : false}, insertOrderedList : { visible : true }, insertUnorderedList : { visible : true }, undo: { visible : true }, redo: { visible : true }, justifyLeft: { visible : true }, justifyCenter: { visible : true }, justifyFull: { visible : true }, subscript: { visible : false }, superscript: { visible : false }, underline: { visible : true }, increaseFontSize : { visible : false }, decreaseFontSize : { visible : false }, removeFormat : { visible : false }, h1mozilla : { visible : false }, h2mozilla : { visible : false }, h3mozilla : { visible : false }, h1 : { visible : false }, h2 : { visible : false }, h3 : { visible : false } } }); $('.wysiwyg').css( { 'width' :'350px' ,'height' :'180px' }); $('.wysiwyg iframe').css( { 'width' :'350px' ,'height' :'150px' }); }).bind('dialogbeforeclose', function(event, ui) { $('.wysiwyg').remove(); });
我的问题是jWYSIWYG框的格式会显示出来,但是我无法在其中找到光标来编辑/添加文本。
对我有用的是,在使用tab事件定义了选项卡的原始页面上加载ajax之后,加载了jWSIWYG文本框。
$("#example").tabs(); $('#example').bind('tabsshow', function(event, ui) { if (ui.tab.id == "alinkid") { $('#textfield').wysiwyg(); } });
然后,在HTML中,对于选项卡:
<div id="example"> <ul> <li><a href="target" id="alinkid">Target</a></li> </ul> </div>
在目标页面上,我们将拥有一个ID为'textfield'的普通文本区域