view release on metacpan or  search on metacpan

share/docs/source/HtmlEditor.html  view on Meta::CPAN

    width: 800,
    height: 300
});

// Passed via xtype into a container and with custom options:
Ext.QuickTips.init();  // enable tooltips
new Ext.Panel({
    title: 'HTML Editor',
    renderTo: Ext.getBody(),
    width: 600,
    height: 300,
    frame: true,
    layout: 'fit',
    items: {
        xtype: 'htmleditor',
        enableColors: false,
        enableAlignments: false
    }
});
</code></pre>
 * @constructor
 * Create a new HtmlEditor
 * @param {Object} config
 * @xtype htmleditor
 */

Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
<span id='Ext-form-HtmlEditor-cfg-enableFormat'>    /**
</span>     * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)
     */
    enableFormat : true,
<span id='Ext-form-HtmlEditor-cfg-enableFontSize'>    /**
</span>     * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)
     */
    enableFontSize : true,
<span id='Ext-form-HtmlEditor-cfg-enableColors'>    /**
</span>     * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
     */
    enableColors : true,
<span id='Ext-form-HtmlEditor-cfg-enableAlignments'>    /**
</span>     * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)
     */
    enableAlignments : true,
<span id='Ext-form-HtmlEditor-cfg-enableLists'>    /**
</span>     * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
     */
    enableLists : true,
<span id='Ext-form-HtmlEditor-cfg-enableSourceEdit'>    /**
</span>     * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)
     */
    enableSourceEdit : true,
<span id='Ext-form-HtmlEditor-cfg-enableLinks'>    /**
</span>     * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)
     */
    enableLinks : true,
<span id='Ext-form-HtmlEditor-cfg-enableFont'>    /**
</span>     * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)
     */
    enableFont : true,
<span id='Ext-form-HtmlEditor-cfg-createLinkText'>    /**
</span>     * @cfg {String} createLinkText The default text for the create link prompt
     */
    createLinkText : 'Please enter the URL for the link:',
<span id='Ext-form-HtmlEditor-cfg-defaultLinkValue'>    /**
</span>     * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
     */
    defaultLinkValue : 'http:/'+'/',
<span id='Ext-form-HtmlEditor-cfg-fontFamilies'>    /**
</span>     * @cfg {Array} fontFamilies An array of available font families
     */
    fontFamilies : [
        'Arial',
        'Courier New',
        'Tahoma',
        'Times New Roman',
        'Verdana'
    ],
<span id='Ext-form-HtmlEditor-property-defaultFont'>    defaultFont: 'tahoma',
</span><span id='Ext-form-HtmlEditor-cfg-defaultValue'>    /**
</span>     * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to &amp;#160; (Non-breaking space) in Opera and IE6, &amp;#8203; (Zero-width space) in all other browsers).
     */
    defaultValue: (Ext.isOpera || Ext.isIE6) ? '&amp;#160;' : '&amp;#8203;',

<span id='Ext-form-HtmlEditor-property-actionMode'>    // private properties
</span>    actionMode: 'wrap',
<span id='Ext-form-HtmlEditor-cfg-validationEvent'>    validationEvent : false,
</span><span id='Ext-form-HtmlEditor-property-deferHeight'>    deferHeight: true,
</span><span id='Ext-form-HtmlEditor-property-initialized'>    initialized : false,
</span><span id='Ext-form-HtmlEditor-property-activated'>    activated : false,
</span><span id='Ext-form-HtmlEditor-property-sourceEditMode'>    sourceEditMode : false,
</span><span id='Ext-form-HtmlEditor-method-onFocus'>    onFocus : Ext.emptyFn,
</span><span id='Ext-form-HtmlEditor-property-iframePad'>    iframePad:3,
</span><span id='Ext-form-HtmlEditor-cfg-hideMode'>    hideMode:'offsets',
</span><span id='Ext-form-HtmlEditor-property-defaultAutoCreate'>    defaultAutoCreate : {
</span>        tag: &quot;textarea&quot;,
        style:&quot;width:500px;height:300px;&quot;,
        autocomplete: &quot;off&quot;
    },

<span id='Ext-form-HtmlEditor-method-initComponent'>    // private
</span>    initComponent : function(){
        this.addEvents(
<span id='Ext-form-HtmlEditor-event-initialize'>            /**
</span>             * @event initialize
             * Fires when the editor is fully initialized (including the iframe)
             * @param {HtmlEditor} this
             */
            'initialize',
<span id='Ext-form-HtmlEditor-event-activate'>            /**
</span>             * @event activate
             * Fires when the editor is first receives the focus. Any insertion must wait
             * until after this event.
             * @param {HtmlEditor} this
             */
            'activate',
<span id='Ext-form-HtmlEditor-event-beforesync'>             /**
</span>             * @event beforesync
             * Fires before the textarea is updated with content from the editor iframe. Return false
             * to cancel the sync.
             * @param {HtmlEditor} this
             * @param {String} html
             */
            'beforesync',
<span id='Ext-form-HtmlEditor-event-beforepush'>             /**
</span>             * @event beforepush

share/docs/source/HtmlEditor.html  view on Meta::CPAN

                    bd.style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';
                }
            }
        }
    },

<span id='Ext-form-HtmlEditor-method-toggleSourceEdit'>    /**
</span>     * Toggles the editor between standard and source edit mode.
     * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
     */
    toggleSourceEdit : function(sourceEditMode){
        var iframeHeight,
            elHeight;

        if (sourceEditMode === undefined) {
            sourceEditMode = !this.sourceEditMode;
        }
        this.sourceEditMode = sourceEditMode === true;
        var btn = this.tb.getComponent('sourceedit');

        if (btn.pressed !== this.sourceEditMode) {
            btn.toggle(this.sourceEditMode);
            if (!btn.xtbHidden) {
                return;
            }
        }
        if (this.sourceEditMode) {
            // grab the height of the containing panel before we hide the iframe
            this.previousSize = this.getSize();

            iframeHeight = Ext.get(this.iframe).getHeight();

            this.disableItems(true);
            this.syncValue();
            this.iframe.className = 'x-hidden';
            this.el.removeClass('x-hidden');
            this.el.dom.removeAttribute('tabIndex');
            this.el.focus();
            this.el.dom.style.height = iframeHeight + 'px';
        }
        else {
            elHeight = parseInt(this.el.dom.style.height, 10);
            if (this.initialized) {
                this.disableItems(this.readOnly);
            }
            this.pushValue();
            this.iframe.className = '';
            this.el.addClass('x-hidden');
            this.el.dom.setAttribute('tabIndex', -1);
            this.deferFocus();

            this.setSize(this.previousSize);
            delete this.previousSize;
            this.iframe.style.height = elHeight + 'px';
        }
        this.fireEvent('editmodechange', this, this.sourceEditMode);
    },

<span id='Ext-form-HtmlEditor-method-createLink'>    // private used internally
</span>    createLink : function() {
        var url = prompt(this.createLinkText, this.defaultLinkValue);
        if(url &amp;&amp; url != 'http:/'+'/'){
            this.relayCmd('createlink', url);
        }
    },

<span id='Ext-form-HtmlEditor-method-initEvents'>    // private
</span>    initEvents : function(){
        this.originalValue = this.getValue();
    },

<span id='Ext-form-HtmlEditor-method-markInvalid'>    /**
</span>     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
     * @method
     */
    markInvalid : Ext.emptyFn,

<span id='Ext-form-HtmlEditor-method-clearInvalid'>    /**
</span>     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
     * @method
     */
    clearInvalid : Ext.emptyFn,

<span id='Ext-form-HtmlEditor-method-setValue'>    // docs inherit from Field
</span>    setValue : function(v){
        Ext.form.HtmlEditor.superclass.setValue.call(this, v);
        this.pushValue();
        return this;
    },

<span id='Ext-form-HtmlEditor-method-cleanHtml'>    /**
</span>     * Protected method that will not generally be called directly. If you need/want
     * custom HTML cleanup, this is the method you should override.
     * @param {String} html The HTML to be cleaned
     * @return {String} The cleaned HTML
     */
    cleanHtml: function(html) {
        html = String(html);
        if(Ext.isWebKit){ // strip safari nonsense
            html = html.replace(/\sclass=&quot;(?:Apple-style-span|khtml-block-placeholder)&quot;/gi, '');
        }

        /*
         * Neat little hack. Strips out all the non-digit characters from the default
         * value and compares it to the character code of the first character in the string
         * because it can cause encoding issues when posted to the server.
         */
        if(html.charCodeAt(0) == this.defaultValue.replace(/\D/g, '')){
            html = html.substring(1);
        }
        return html;
    },

<span id='Ext-form-HtmlEditor-method-syncValue'>    /**
</span>     * Protected method that will not generally be called directly. Syncs the contents
     * of the editor iframe with the textarea.
     */
    syncValue : function(){
        if(this.initialized){
            var bd = this.getEditorBody();
            var html = bd.innerHTML;