当前位置: 代码迷 >> Web前端 >> KindEditor在jQuery UI Dialog下面的有关问题
  详细解决方案

KindEditor在jQuery UI Dialog下面的有关问题

热度:401   发布时间:2013-11-09 17:06:41.0
KindEditor在jQuery UI Dialog下面的问题
http://www.kindsoft.net/ke4/examples/jquery-ui.html

在页面的时候使用
KindEditor.ready(function(K) {
        editor =KindEditor.create('textarea[name="content"]', {
            allowFileManager : true,
            resizeType : 1
        });
    });


在dialog的时候直接create:
editor =KindEditor.create('textarea[name="content"]', {
        allowFileManager : true,
        resizeType : 1
    });



参考代码:
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>With jQuery UI</title>
		<style>
			body {
				font-size: 12px;
			}
			form {
				margin: 0;
			}
			textarea {
				display: block;
			}
			#J_editorDialog {
				display: none;
			}
		</style>
		<link rel="stylesheet" href="../lib/jquery-ui/css/smoothness/jquery-ui-1.9.2.custom.css" />
		<link rel="stylesheet" href="../themes/default/default.css" />
		<script charset="utf-8" src="../lib/jquery.js"></script>
		<script charset="utf-8" src="../lib/jquery-ui/js/jquery-ui-1.9.2.custom.js"></script>
		<script charset="utf-8" src="../kindeditor.js"></script>
		<script charset="utf-8" src="../lang/zh_CN.js"></script>
		<script>
			$(function() {
				$('#J_openDialog').click(function() {
					$('#J_editorDialog').dialog({
						title : 'KindEditor',
						width : 700,
						open : function(event, ui) {
							// 打开Dialog后创建编辑器
							KindEditor.create('textarea[name="content"]', {
								resizeType : 1
							});
						},
						beforeClose : function(event, ui) {
							// 关闭Dialog前移除编辑器
							KindEditor.remove('textarea[name="content"]');
						}
					});
				});
			});
		</script>
	</head>
	<body>
		<script type="text/javascript"><!--
		google_ad_client = "ca-pub-7116729301372758";
		/* 更多演示(728x90) */
		google_ad_slot = "5052271949";
		google_ad_width = 728;
		google_ad_height = 90;
		//-->
		</script>
		<script type="text/javascript"
		src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>
		<h3>在jQuery UI Dialog里打开编辑器</h3>
		<div id="J_editorDialog">
			<textarea name="content" style="width:100%;height:200px;"></textarea>
		</div>
		<button type="button" id="J_openDialog">打开Dialog</button>
	</body>
</html>
  相关解决方案