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"//规定预计的服务器响应的数据类型。 ); }