Question

这是我尝试扩展Ext.form.field.Base的方式：

Ext.define('Ext.form.field.CKEditorInline', {
    extend: 'Ext.form.field.Base',
    alias: 'widget.ckeditorinline',
    requires: [
        'Ext.XTemplate'
    ],
    constructor: function(config) {
        Ext.applyIf(config, {
        fieldSubTpl: [
        '<div id="{id}-editor" contenteditable="true" class="ckeditorinline"></div><input id="{id}" name="{name}" type="text" value="{value}" style="display:none"/>',
        { compiled: true }]
        });
        this.callParent([config]);
    },
    getValue: function () {
        var el = document.getElementById(this.id + "-inputEl-editor");
        if (!!el) {
            return el.innerHTML;
        }
        return null;
    },
    setValue: function (value) {
        var el = document.getElementById(this.id + "-inputEl-editor");
        if (value === "") value = "<p><br/></p>";
        if (!!el) {
            el.innerHTML = !!value ? value : "<p><br/></p>";
        }
    },
    reset: function () {
        var el = document.getElementById(this.id + "-inputEl-editor");
        if (!!el) {
            el.innerHTML = '<p><br/></p>';
        }
    }
});

所以，基本上我想要的是使用可编辑的div而不是输入字段。但是，当我尝试在此字段中键入（打印）某些内容时，我发现无法打印空格字符或使用Enter键中断（因此，这样的值为＆＃34;一两个＆＃34;或＆＃34一个\ n两个＆＃34;是不可能的，而是我得到＆＃34; onetwo＆＃34;）。有什么问题，我该如何解决？

Answer 1

您可能需要将空格更改为 并将回车符更改为<br/>。你可以尝试：

setValue: function (value) {
    var el = document.getElementById(this.id + "-inputEl-editor");
    if (value === "") value = "<p><br/></p>";
    value = value.replace(/\n/, "<br/>");
    value = value.replace(/\s/g, "&nbsp;");
    if (!!el) {
        el.innerHTML = !!value ? value : "<p><br/></p>";
    }
},

无法在ExtJS 4中扩展Base字段

1 个答案: