<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">系統使用Txtjs5自帶的HtmlEditor文字編輯器，資料庫對應欄位長度最大為200，文字編輯時，稍微加點樣式就超出限制了。</span>

要求：在前端驗證輸入長度，如果輸入過長，則提示，並無法提交。

HtmlEditor的並沒有提供像Text中可以設定MaxLength的配置。

看HtmlEditor的原始碼會發現，HtmlEditor繼承了Filed類，Field中有屬性：

Ext.define('Ext.form.field.Field', {
    mixinId: 'field',

    /**
     * @property {Boolean} isFormField
     * Flag denoting that this component is a Field. Always true.
     */
    isFormField : true,

    config: {
        /**
         * @cfg {Boolean/String} validation
         * This property, when a `String`, contributes its value to the error state of this
         * instance as reported by `getErrors`. This property is implicitly bound when the
         * `value` of this field is bound based on `{@link Ext.Component#modelValidation}`.
         */
        validation: null
    },
 

    isValid : function() {
        var me = this;
        return me.disabled || Ext.isEmpty(me.getErrors());
    },

    /**
     * Returns whether or not the field value is currently valid by {@link #getErrors validating} the field's current
     * value, and fires the {@link #validitychange} event if the field's validity has changed since the last validation.
     * **Note**: {@link #disabled} fields are always treated as valid.
     *
     * Custom implementations of this method are allowed to have side-effects such as triggering error message display.
     * To validate without side-effects, use {@link #isValid}.
     *
     * @return {Boolean} True if the value is valid, else false
     */
    validate : function() {
        var me = this,
            isValid = me.isValid();
        if (isValid !== me.wasValid) {
            me.wasValid = isValid;
            me.fireEvent('validitychange', me, isValid);
        }
        return isValid;
    },
 

form.isValid()~不知道form驗證的時候會不會跟這個有關係？

抱著試試看的態度，在HtmlEditor輸入發生變化的時候，修改了Validation配置，並在超出200（我們專案要求是200）後，做了提示：

            	change: {
            		fn: function(editor, newValue, oldValue, eOpts) {
            			if(newValue.length >= 200){
            				editor.setValidation('最大輸入限制200');
            				editor.setActiveError('最大輸入限制200');
            			}else{
            				editor.setValidation(null);
                			editor.setActiveError();
            			}
            		},
            		scope: me
            	},
            	blur: {		//在原始碼編輯模式下onchange事件不起作用，在失去焦點的時候判斷。
            		fn: function(editor) {
            			if(editor.getValue().length >= 200){
            				editor.setValidation('最大輸入限制200');
            				editor.setActiveError('最大輸入限制200');
            			}else{
            				editor.setValidation(null);
                			editor.setActiveError();
            			}
            		},
            		scope: me
            	}
 

ps：繫結blur事件，是因為在原始碼編輯狀態輸入時，不知道為什麼HtmlEditor的change事件失效了，所以只好在失去焦點的時候進行判斷。

據說HtmlEditor的blur事件也失效，同事自己寫的。那些我就不懂了。