Ext4如何使用集成kindeditor

  ext如何使用kindeditor编辑器,将kindeditor集成到ext框架里面。

  将kindeditor集成到ext框架里面效果如下

Ext4.2如何使用集成kindeditor

  Ext4如何使用集成kindeditor源代码代码如下,测试ext版本为4.1,其他版本未测试,4.xx版本应该没有问题,ext3-和ext5+由于改动过,特别是ext3和ext4+相差比较大,所以ext3无法运行。

<!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>Ext4.2如何使用集成kindeditor</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script charset="utf-8" src="kindeditor-min.js"></script>
<script charset="utf-8" src="lang/zh_CN.js"></script>
<script type="text/javascript">
    Ext.define('WMC.common.view.ExtKindEditor', {
        extend: 'Ext.form.field.TextArea',
        alias: 'widget.extkindeditor',//xtype名称
        initComponent: function () {
            this.html = "<textarea id='" + this.getId() + "-input' name='" + this.name + "' style='width:100%'></textarea>";
            this.callParent(arguments);
            this.on("boxready", function (t) {
                this.inputEL = Ext.get(this.getId() + "-input");
                this.editor = KindEditor.create('textarea[name="' + this.name + '"]', {
                    height: t.getHeight() - 18,
                    width: t.getWidth() ,
               basePath: '',//注意修改kindeditorbase路径
                    uploadJson: 'upload_json.jsp',//kindeditor上传文件处理文件路径,注意修改
                    fileManagerJson: 'file_manager_json.jsp',//kindeditor文件管理文件路径,注意修改
                    resizeType: 0,
                    wellFormatMode: true,
                    newlineTag: 'br',
                    allowFileManager: true,
                    allowPreviewEmoticons: true,
                    allowImageUpload: true,
                    items: [
                        'source', '|', 'justifyleft', 'justifycenter', 'justifyright',
                        'insertorderedlist', 'insertunorderedlist', '|',
                        'formatblock', 'fontname', 'fontsize', '|', 'hilitecolor', 'forecolor', 'bold',
                        'italic', 'underline', '|', 'image',
                        'table', 'link', 'unlink', 'fullscreen'
                    ]
                });
            });
        },
        setValue: function (value) {
            if (this.editor) {
                this.editor.html(value);
            }
        },
        reset: function () {
            if (this.editor) {
                this.editor.html('');
            }
        },
        setRawValue: function (value) {
            if (this.editor) {
                this.editor.text(value);
            }
        },
        getValue: function () {
            if (this.editor) {
                return this.editor.html();
            } else {
                return ''
            }
        },
        getRawValue: function () {
            if (this.editor) {
                return this.editor.text();
            } else {
                return ''
            }
        }
    });
    Ext.onReady(function () {
        pl = Ext.create('Ext.form.Panel', {
            frame: true,
            title:'ext如何使用kindeditor',
            renderTo: document.body, items: [{
                xtype: 'extkindeditor',
                allowBlank: false,
                name: 'info',
                height: 280,
                flex: 1,
                id: 'Responsibilities',
                fieldLabel: '内容描述'
            }
            ], buttons: [{
                text: 'Save', handler: function () {
                    console.log(pl.getForm().getFieldValues())
                }
            }]
        });
    });
  </script>
</head>
<body>
</body>
</html>

  点击保存按钮获取表单数据如下图所示

Ext4如何使用集成kindeditor

加支付宝好友偷能量挖...


原创文章,转载请注明出处:Ext4如何使用集成kindeditor

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