Ext中使用KindEditor方法

最新推荐文章于 2015-06-02 22:16:20 发布

原创最新推荐文章于 2015-06-02 22:16:20 发布 · 5.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #stylesheet #function #html

ExtJS 专栏收录该内容

11 篇文章

订阅专栏

本文演示了如何在ExtJS应用中集成KindEditor富文本编辑器，通过配置ExtJS窗口展示并操作编辑器。

老套路，先来效果图

再来源代码

index.php

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ExtJS.com Forums</title>
        <link rel="stylesheet" type="text/css" href="../../lib/ext/resources/css/ext-all.css">  
        <script type="text/javascript" src="../../lib/ext/adapter/ext/ext-base.js"></script>  
        <script type="text/javascript" src="../../lib/ext/ext-all.js"></script>  
    	<script type="text/javascript" src="../../lib/kindeditor/kindeditor.js"></script>
       <!--我的js-->
        <script type="text/javascript" src="index.js">
        </script>


</head>
<body>
</body>
</html>

index.js

Ext.onReady(function(){
	var win = new Ext.Window({
		title:'KindEditor实例',
		renderTo:Ext.getBody(),
		items:[
			new Ext.Panel({
				html:'<textarea id="ta" style="width:100%;height:80%;"></textarea>',
			})
		],
		listeners:{
			render:function(){
				setTimeout(function(){
					var editor = KindEditor.create('#ta');
				},1000);
			}
				
			
		}
	});
	win.show();
});

请高手赐教！