Ext整合ueditor示例

  Ext整合ueditor示例

Ext整合ueditor示例

  Ext整合ueditor示例源代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext整合ueditor示例</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<!--加载ueditor资源-->
<script type="text/javascript" charset="utf-8" src="ueditor1_4_3/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor1_4_3/ueditor.all.min.js"> </script>
<!--建议手加载在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="ueditor1_4_3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    Ext.onReady(function () {
        Ext.create('Ext.panel.Panel', {
            width: 600,
            height: 350,
            title:'Ext整合ueditor',
            border: true,
            renderTo: document.body,
            html: '<div id="ueditor" style="width:100%;height:250px"></div>',//ueditor容器,高度为ext.panel配置的值-50(ueditor底部路径显示容器高度)-toolbar高度
            listeners: {
                afterlayout: function (pl, layout, opts) {
                    var ue = UE.getEditor('ueditor', {
                        toolbars: [['undo', 'redo', '|', 'bold', 'italic', 'underline', 'removeformat', 'forecolor', 'fontfamily', 'fontsize', 'emotion', 'help']]
                    });
                }
            }
        });
    });
  </script>
</head>
<body style="margin:10px">
</body>
</html>

 


原创文章,转载请注明出处:Ext整合ueditor示例

评论(0)Web开发网
阅读(371)喜欢(0)不喜欢(0)extjs开发技巧