ckeditor4.1.1在jquery ui dialog(模式化窗口)中无法编辑，解决方法！

来源：互联网发布：一卡易软件收费多少编辑：程序博客网时间：2024/06/18 14:29

1、将jsp页面原来放ckeditor的地方---》

<div style="width: 100%;height: 280px;text-align: center;border:0px solid red;"> <iframe id="quoteFrame" name="quoteFrame" scrolling="yes" src="<%=basePath%>pages/topic/front/ckmain.jsp" frameborder="0"                     style="padding: 0px; width: 99%;height: 100%;"> </iframe></div>

2、新建jsp页面---》ckmain.jsp

<script src="<%=basePath %>scripts/public/jquery-1.9.1.js" type="text/javascript"></script><script type="text/javascript">// 给文本域赋值 $(function(){document.getElementById("contentPxp_quote").value='<%=con%>'; }); //动态读取输入的内容，给隐藏域赋值  $(document).ready(function(){ CKEDITOR.instances.contentPxp_quote.on('blur', function( e ){ CKEDITOR.instances.contentPxp_quote.updateElement();//更新内容});}); //更新方法 function updateTextArea(){ CKEDITOR.instances.contentPxp_quote.updateElement();//更新内容 } </script></head><!-- ckeditor4.1.1 --><body style="border: 0px solid blue;" ><form id="form" name="form"><textarea id="contentPxp_quote" name="contentPxp_quote" cols="60" rows="20" class="ckeditor" style="width: 100%;height: 100%;"></textarea><script type="text/javascript" src="<%=basePath%>ckeditor/ckeditor.js"></script><script type="text/javascript">     CKEDITOR.replace( 'contentPxp_quote',{         toolbar :             [ ['Bold','Italic','Underline'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['Smiley'],['Font','FontSize'],['TextColor']             ]    }); </script> </form></body></html>

3、js操作

赋值：var con=data.content;$("form[name='edit-form'] :hidden[name='topicReplyId_edit']").val(topicReplyId);//主键document.getElementById("editFrame").src="pages/topic/front/ckmain.jsp?con="+con+"&dd="+topicReplyId;//赋值 传回值： if(confirm("确定修改？")){document.frames["editFrame"].updateTextArea();//刷新iframe里面的编辑器内容...........+"&contentNew="+encodeURIComponent(document.frames["editFrame"].document.getElementById("contentPxp_quote").value),//url}

具体方法参考：

function quoteReplyById_author(floor,topicReplyId,topicId,userName){$.post("TopicServlet",{doaction : "getReplyById", id : topicReplyId},function call(data){var bean = data;var con="<span style=\"font-size:14px\"><span style=\"color:rgb(255,0,0)\">{</span></span>引用作者："+userName+"<span style=\"font-size:14px\"><span style=\"color:rgb(255,0,0)\">}</span></span>";$("form[name='quote-form'] :hidden[name='topicReplyId_quote']").val(topicReplyId);//回帖主键$("form[name='quote-form'] :hidden[name='topicId_quote']").val(topicId);//主帖主键document.getElementById("quoteFrame").src="pages/topic/front/ckmain.jsp?con="+con;//赋值$("#quote-dialog").dialog({modal : true,height: 430,width: 600,buttons: {"确定回复": function() { if(true){document.frames["quoteFrame"].updateTextArea();//刷新iframe里面的编辑器内容//alert(document.frames["quoteFrame"].document.getElementById("contentPxp_quote").value);$.post(//ajax方法提交表单数据"TopicServlet?doaction=topicReplyQuote&contentNew="+encodeURIComponent(document.frames["quoteFrame"].document.getElementById("contentPxp_quote").value),//url$("#quote-form").serialize(),//序列化function(data){if(data==1){alert("回复成功！");reloadPage();} else {alert("回复失败！");}$("#quote-dialog").dialog("close");}); }},"取 消": function() {$( this ).dialog( "close" );}},close: function() {//allFields.val( "" ).removeClass( "ui-state-error" );}});},"json"//规定预计的服务器响应的数据类型。);}

0 0