Tuesday, October 2, 2012

ExtJs Rich Text Editor Example

5:04 PM 4 Comments

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.

4 comments:

A Plain Text Editor
Plain Text files
That's right, if you're writer on a budget, you don't need to spend any money buying expensive writing software or apps. Instead, you can use the text editor that comes free with your operating system.
Just open up Notepad on Windows or TextEdit on a Mac. I like plain text editors for writing something short quickly and easily, without thinking much about it. I wrote a blog post about the benefits of using plain text editors as writing software.
Use for: writing whatever, wherever

A Plain Text Editor
Plain Text files
That's right, if you're writer on a budget, you don't need to spend any money buying expensive writing software or apps. Instead, you can use the text editor that comes free with your operating system.
Just open up Notepad on Windows or TextEdit on a Mac. I like plain text editors for writing something short quickly and easily, without thinking much about it. I wrote a blog post about the benefits of using plain text editors as writing software.
Use for: writing whatever, wherever

Hey, Nice information on Rich text editor JavaScript. it is very helpful for me. Thanks team.

Thanks for this valuable blog. It was very informative and interesting. Keep sharing this kind of Information.
Web Designing Templates In HTML
Templates For Web Designing

Post a Comment