PDA

View Full Version : htmlEditor maxLength and enforceMaxLength



mrprabu
12 Jan 2014, 10:42 PM
Hi everyone,
I am creating the custom component which extends 'Ext.form.field.HtmlEditorView'. In addition I am adding some ux stylings and maxLength, enforceMaxLength configuration.

Any one giveme the idea/logics to introduce the acheive maxLength & enforceMaxLength

here is my code,

/**
* This file is part of Ext JS 4.2 Components.
*
* This is Wysiwyg HtmlEditor which extends on ExtJs Component.
* @version 1.0
* @requires Ext.form.HtmlEditor
* @xtype wysiwyghtmleditor

**/
Ext.define('OneClient.ux.form.OneClientWysiwygHtmlEditor', {
extend: 'Ext.form.HtmlEditor',
alias: 'widget.oneclient-wysiwyghtmleditor',
/**
* @cfg {Boolean} autoFitErrors <code>false</code>
* to disable the body error adjustment for error messages.
*
**/
autoFitErrors: false,


/**
* @cfg {Boolean} fieldLabel
* to make fieldLabel empty.
*
**/
fieldLabel: '',


/**
* @cfg {Boolean} enableAlignments <code>false</code>
* to disable alignment(left) buttons.
*
**/
enableAlignments: false,


/**
* @cfg {Boolean} autoFitErrors <code>false</code>
* to disable fore/highlight color buttons.
*
**/
enableColors: false,


/**
* @cfg {Boolean} autoFitErrors <code>false</code>
* to disable font selection.
*
**/
enableFont: false,


/**
* @cfg {Boolean} autoFitErrors <code>false</code>
* to disable font size buttons.
*
**/
enableFontSize: false,


/**
* @cfg {Boolean} autoFitErrors <code>false</code>
* to disable create link button.
*
**/
enableLinks: false,


/**
* @cfg {Boolean} autoFitErrors <code>false</code>
* to disable list buttons.
*
**/
enableLists: false,


/**
* @cfg {Boolean} autoFitErrors <code>false</code>
* to disable source edit button.
*
**/
enableSourceEdit: false,


/**
* at initialize, template added for rounded corners
* and also added the custom css class for ui attribute.
*
**/
/*initEditor: function() {
if (this.doc) {
try {
Ext.EventManager.removeAll(this.doc);
} catch (e) { }
}
this.doc = this.getDoc();
Ext.EventManager.on(this.doc, {
'keydown': this.onEditorKeyDownEvent,
buffer: 100,
scope: this
});
this.callParent();
},*/
/**
* at initialize, template added for rounded corners
* and also added the custom css class for ui attribute.
*
**/
initComponent: function(cfg) {
var me = this;
Ext.apply(me, {
ui: 'oneclient-htmleditorcls',
labelCls:'oneClient-fieldLabel',
componentTpl: [
'<div class="oneClient-formFieldFlexi oneclient-htmleditor-container">',
'<div class="flexiContainer textarea">',
'{beforeTextAreaTpl}',
'<textarea id="{id}-textareaEl" name="{name}" tabIndex="-1" {inputAttrTpl}',
'class="{textareaCls}" autocomplete="off">',
'{[Ext.util.Format.htmlEncode(values.value)]}',
'</textarea>',
'{afterTextAreaTpl}',
'{beforeIFrameTpl}',
'<iframe id="{id}-iframeEl" name="{iframeName}" frameBorder="0" {iframeAttrTpl}',
' src="{iframeSrc}" class="{iframeCls}"></iframe>',
'{afterIFrameTpl}',
'</div>',
'<div class="oneClient-formFieldFlexi-right-corner">',
'<div class="oneClient-formFieldFlexi-top-right"></div>',
'<div class="oneClient-formFieldFlexi-right-middle"></div>',
'<div class="oneClient-formFieldFlexi-right-bottom"></div>',
'</div>',
'</div>', {
disableFormats: true
}
]
});
me.callParent(arguments);
},
/*onEditorKeyDownEvent: function(e) {
console.log(e);
// this.setValue(this.getValue().slice(0, this.maxLength));
// return false;


},*//**
* Syncs the contents of the editor iframe with the textarea.
* @protected
*/
syncValue: function(){
var me = this,
body, changed, html, bodyStyle, match, textElDom;


if (me.initialized) {
body = me.getEditorBody();
html = body.innerHTML;
textElDom = me.textareaEl.dom;

if (Ext.isWebKit) {
bodyStyle = body.getAttribute('style'); // Safari puts text-align styles on the body element!
match = bodyStyle.match(/text-align:(.*?);/i);
if (match && match[1]) {
html = '<div style="' + match[0] + '">' + html + '</div>';
}
}

html = me.cleanHtml(html);

if (me.fireEvent('beforesync', me, html) !== false) {
// Gecko inserts single <br> tag when input is empty
// and user toggles source mode. See https://sencha.jira.com/browse/EXTJSIV-8542
if (Ext.isGecko && textElDom.value === '' && html === '<br>') {
html = '';
}

if (textElDom.value !== html) {
textElDom.value = html;
changed = true;
}
me.fireEvent('sync', me, html);

if (changed) {
// we have to guard this to avoid infinite recursion because getValue
// calls this method...
var lengthFlag=true;
if(me.getValue().length>me.maxLength){
console.log('inside');
lengthFlag=false;
}
if(lengthFlag)
me.checkChange();
}
}
}
},checkChange: function() {
if (!this.suspendCheckChange) {
var me = this,
newVal = me.getValue(),
oldVal = me.lastValue;
console.log(newVal);
console.log(oldVal);
if (!me.isEqual(newVal, oldVal) && !me.isDestroyed) {
me.lastValue = newVal;
me.fireEvent('change', me, newVal, oldVal);
me.onChange(newVal, oldVal);
}
}
}
});

Gary Schlosberg
30 Jan 2014, 3:44 PM
Seems like something that wouldn't be as easy as it sounds, but I would start with checking out how it is implemented for TextArea, which is a similar though much simpler field type.

mrprabu
31 Jan 2014, 9:18 AM
Hi Gary Schlosberg (http://www.sencha.com/forum/member.php?556932-Gary-Schlosberg),

Thanks for reply. even I tried to use slimier approach like text area but I couldn't achieve. If you find the solution kindly share


Regards
MR Prabu