Blog Archive

ExtJs Rich Text Editor Example

An online rich-text editor is an interface for editing valid HTML markup making it easy for users trying to express their formatting directly as they see it. In this example we are going to display a Product and some Information about it. When the user clicks on the Edit Button it will open the Rich Text Editor for editing the information and then clicking on the save button will close the HTML editor and display the information that was just entered. This is very useful for inline editing of site content by administrators.


ExtJs Rich Text Editor ExampleExtJs Rich Text Editor Example ExtJs Rich Text Editor Example

Application HTML file - index.html

<html>
<head>
<title>ExtJs Rich Text Editor example</title>

<link rel="stylesheet" type="text/css"
 href="extjs/resources/css/ext-all.css">
<style type="text/css">
</style>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({ 
 enabled: true 
 });

Ext.application({
    
 name: 'myApp',
 appFolder: 'app/richTextEditor',
    
    controllers: [
                  'MyController'
              ],

    launch: function() {
 Ext.create('Ext.panel.Panel', {
         renderTo: 'myExample',
         title: 'Rich Text Editing Form',
         height: 300,
            width: 550,
            margin: '5 5 5 5 ',
         layout: {
                align: 'stretch',
                type: 'vbox'
            },
         defaults: { 
            labelWidth: 100,
            margin: '0 0 0 5 '
         },
         items: [{
                        xtype: 'fieldcontainer',
                        width: 400,
                        layout: {
                            type: 'column'
                        },
                        fieldLabel: '<b>Item Number</b>',
                        defaults: {
             hideLabel: true
            },
                        items: [
                            {
                                xtype: 'displayfield',
                                value: 'ABC123',
                                width: 60
                            },
                            {
                                xtype: 'button',
                                text: 'Edit'
                            }
                        ]
                    },
                    {
                        xtype: 'displayfield',
                        value: '<b>Product Description</b>'
                    },
                    {
                     flex: 1,
                        xtype: 'displayfield',
                        itemId: 'productDescription',
                        value: 'Initial Product Description...'
                        
                    },
                    {
                     flex: 1,
                     //enable other features
                        xtype: 'htmleditor',
                        itemId: 'myEditor',
                        height: 200,
                        style: 'background-color: white;',
                        value: '',
                        hidden: true
                    }
                ]
        });
    }
}); 
    </script>

</head>
<body>
 <div id="myExample"></div>
</body>
</html>

Application Controller - MyController.js

Ext.define('myApp.controller.MyController', {
  extend : 'Ext.app.Controller',

  init : function() {
   this.control({

    'panel' : {
     render : this.onPanelRendered
    },
    'panel button' : {
     click : this.onButtonClick
    }
   });
  },

  onPanelRendered : function() {
   //console.log('The container was rendered');
  },

  onButtonClick : function(button) {
   //console.log('Button Click');
   var myView = button.up('panel');
   var productDescription = myView.getComponent('productDescription');
   var myEditor = myView.getComponent('myEditor');
   if(button.getText() === "Edit"){
     button.setText("Save");
     myEditor.setValue(productDescription.getValue());
     productDescription.hide();
     myEditor.show();
   }
   else {
     button.setText("Edit");
     productDescription.setValue(myEditor.getValue());
     myEditor.hide();
     productDescription.show();
   }

  }

 });


All the features in the HTML editor are enabled by default. If you need to switch them off then you must specify some of the configs mentioned below
  • enableAlignments
    • for left, center, right alignment buttons
  • enableColors
    • for tfore/highlight color buttons
  • enableFont
    • for font selection
  • enableFontSize
    • for the increase/decrease font size buttons
  • enableFormat
    • for bold, italic and underline buttons
  • enableLinks
    • for create link button
  • enableLists
    • for bullet and numbered list buttons
  • enableSourceEdit
    • for switching to source edit button
Some of the features are not avaibale in Safari, please check Sencha Docs if you need more information.

References


2 comments :

  1. can you provide the source code or complete file structure for this example

    ReplyDelete