`
Franciswmf
  • 浏览: 797251 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多
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"//规定预计的服务器响应的数据类型。
		);
}
分享到：
| window.location.Reload()和window.locatio ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ckeditor4.1.1

    这个版本的发布标志着CKEditor在功能、性能和用户体验上的显著提升，使得它成为许多网站首选的在线文本编辑解决方案。 CKEditor的主要特点包括： 1. **易用性**：CKEditor提供了直观的用户界面，让用户可以像在...

    ckeditor 和 ckfinder集成，并解决ckeditor和jquery dialog冲突问题

    然而，在实际应用中，由于CKEditor和jQuery UI Dialog等其他库可能存在JavaScript命名空间冲突，导致功能无法正常工作。解决这个问题的方法通常有以下几种： 1. 使用CKEditor的`useCustomDialogs`选项：设置为`true...

    CKEditor 4.1.1 MediaPlayer视频播放插件

    ckeditor4.1.1中只有Flash视频播放插件，而没有集成一个专门的视频播放插件，通过安装本插件可以将MediaPlayer视频播放器（clsid:6bf52a52-394a-11d3-b153-00c04f79faa6）集成到ckeditor4.1.1当中， 本插件只支持...

    CKEditor 4.1.1 两端对齐按钮支持中文两端对齐补丁

    本补丁通过加入text-justify:inter-ideograph,可以使CKEditor4.1.1中两端对齐按钮支持中文两端对齐，原版本只支持西文两端对齐， 本补丁仅支持CKEditor4.1.1其他版本的不要打（包括CKEditor4.1）。

    jquery版本的文本编辑框，ckeditor_4.0

    使用CKEditor 4.0时，首先需要在网页中引入jQuery库和CKEditor的相关文件，然后通过JavaScript调用CKEditor的初始化方法将一个普通的文本区域转换为富文本编辑器。例如： ```html &lt;!DOCTYPE html&gt; ...

    ckeditor在ecshop中替换原富文本编辑器

    标题“ckeditor在ecshop中替换原富文本编辑器”所涉及的知识点主要集中在如何在ECShop系统中进行这种替换操作，以及如何解决可能出现的兼容性问题。CKEditor和FCKeditor都是JavaScript实现的富文本编辑器，但它们的...

    ckeditor数学公式编辑器

    总结来说，"ckeditor数学公式编辑器"是一个强大的工具，它解决了在Web环境中编写和编辑数学公式的难题，通过可视化界面和LaTeX支持，使得数学公式不再成为内容创作的障碍。无论你是教师、学生、科研工作者还是技术...

    ckeditor for jquery

    然后，通过jQuery选择器找到需要转换成编辑器的文本区域，并调用CKEditor的初始化方法将其转化为富文本编辑器。例如： ```html &lt;!DOCTYPE html&gt; &lt;script src="https://code.jquery.com/jquery.js"&gt;&lt;/script&gt; ...

    Python库 | collective.ckeditor-4.1.1.zip

    资源分类：Python库 所属语言：Python 资源全名：collective.ckeditor-4.1.1.zip 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059

    CKeditor数学公式编辑器插件.rar

    在网页中的进行公示编辑比较麻烦，使用图片固然可以解决一时的问题，但是修改起来比较麻烦，而比较好的方法及时使用Latex。 CKEditor 官网给出的插件商店里提供了几款公式编辑器，大概比较一下： Equation Editor ...

    ckeditor插件richcombo

    在IT行业中，文本编辑器是开发人员和内容创作者不可或缺的工具，它们提供了丰富的格式化选项，使得文本编辑更加便捷和高效。"ckeditor插件richcombo"是针对CKEditor这款著名的开源在线文本编辑器的一个增强组件。...

    ckeditor_3.5.2（在线文本编辑器）

    CKEditor允许用户在浏览器环境中进行类似于桌面应用的文本编辑操作，包括字体设置、段落格式化、插入图片、链接创建等。 CKEditor 3.5.2 版本的主要特性包括： 1. **丰富的编辑功能**：它提供了多种文本格式化选项...

    CKEditor编辑器行高插件

    CKEditor编辑器是一款广泛应用于网页和在线应用的富文本编辑器，它提供了丰富的文本格式化选项，使得非技术用户也能方便地编辑和排版文本。"行高插件"是CKEditor的一个扩展功能，旨在为用户提供调整文本行高的能力，...

    CKEditor二次开发手册 超详细哦!

    在插件中添加按钮和命令，可以使用`CKEDITOR.dialog.add`和`CKEDITOR.dialogCommand`来创建对话框，然后通过`editor.addCommand`和`editor.ui.addButton`来注册命令并创建按钮。例如，添加“脚注”功能： ```...

    ckeditor_4.x自定义按钮控件详细配置

    在 mydialog.js 文件中，我们可以使用 CKEDITOR.dialog.add() 方法来添加自定义窗口的配置信息，例如： ``` CKEDITOR.dialog.add('mydialog', function(editor) { return { title: '标题', minWidth: 400, ...

    ckeditor公式编辑器插件源码

    总的来说，"ckeditor公式编辑器插件源码"为需要在网页中插入和编辑数学公式的用户提供了一套便捷的解决方案，它结合了CKEditor的强大文本编辑功能和MathJax的高效公式渲染技术，使得在Web环境下处理数学公式变得简单...

    ckeditor5全屏按钮

    在CKEditor 5中，全屏模式的设计注重用户体验，它允许用户在不离开编辑环境的情况下，轻松地调整字体、字号、颜色、对齐方式等格式设置。此外，全屏模式下仍然保留了实时预览功能，用户可以即时看到文本的样式变化，...

    ckEditor和ckFinder和jquery-1.4.4大全

    ckEditor是一款强大的富文本编辑器，广泛应用于网站内容管理和博客系统，它提供了丰富的文本格式化选项，支持图片、视频、链接等多媒体元素的插入，使得用户可以在网页上进行类似Word的文本编辑。ckEditor的设计理念...

    ckeditor富文本编辑器

    - **企业级应用**：企业内部的文档编辑、在线表单填写等场景，CKEditor提供了便捷的文本编辑解决方案。 - **教育平台**：在线教育平台使用CKEditor让学生和教师编辑课程内容、作业提交等。 6. **与其他编辑器的...

    Ckeditor，一个在线编辑器

    **Ckeditor 知识点详解** Ckeditor 是一款广泛应用的开源富文本在线编辑器，主要用于网页内容的创建和编辑。...其丰富的功能、易用性和高度可定制性，使其成为许多开发者首选的富文本编辑解决方案。

Magicbox
Global site tag (gtag.js) - Google Analytics