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

最新推荐文章于 2021-05-11 14:31:46 发布

揽峰moc

最新推荐文章于 2021-05-11 14:31:46 发布

阅读量256

点赞数

分类专栏： jquery ui 1.10.3 文章标签： ui javascript json ViewUI

本文链接：https://blog.csdn.net/big1989wmf/article/details/84462990

版权

jquery ui 1.10.3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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