Programmers Sample Guide: 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.

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

ExtJs form field HtmlEditor

Programmers Sample Guide

ExtJs Rich Text Editor Example

Application HTML file - index.html

Application Controller - MyController.js

References

No comments:

Post a Comment