直接在页面上显示富文本编辑器

Posted 周五, 07/04/2008 - 14:02 by admin

官方的例子有介绍如何将HtmlEditor添加到FormPanel中。
但有很多时候我们就只是想用ExtJs的HtmlEditor，而不想用它的FormPanel.下面例子可以轻松帮你实现。上一篇介绍了直接在页面上显示日期控件,其他控件也是类似的做法,不作具体介绍。

演示(demo)地址在文章最后.

效果图如下:

源代码包括 0002_render_htmleditor.html.

0002_render_htmleditor.html
注意：在开头一定要加上 Ext.QuickTips.init();HtmlEditor需要用到。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>直接在页面上显示富文本辑器</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../examples/examples.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.QuickTips.init();
Ext.onReady(function(){
	var mhtml = new Ext.form.HtmlEditor({
            id:'testEditor',
			value: '<H1><A href="http://extjs.org.cn">Extjs 中文站</A></H1>.'
	});

	mhtml.render('divEditor'); 
});
</script>
</head>
<body>
<h1>直接在页面上显示富文本辑器</h1>

<p>这个例子告诉我们如何在页面上直接绑定富文本编辑器.</p>
<p><br />
</p>

<div id='divEditor'></div>

</body>
</html>

演示地址:http://extjs.org.cn/extjs/mydemo/0002_render_htmleditor.html

（版权声明：本篇文章版权属于extjs.org.cn所有，可以在互联网上进行转载，转载必须保留作者版权声明及链接；也可以文章用于出版、发行或其它商业用途，仅仅需要保留作者版权声明及链接。）

  • 要发表评论，请先登录