Add htmleditor cleartags plugin

[hpl123]

Hi all,
Here is a tip on how to add a custom plugin to the htmleditor (support, would be great if you could add this to the AwareIM installation so I/we don´t need to do this manually). This plugin adds a button in the htmleditor toolbar that when pressed clears all html tags etc. from the text in the html editor text area. Another thing, this is 1 plugin and having this will most likely help if you´re also interested in adding additional plugins.

Custom cleartags plugin. Source: http://ext4all.com/post/extjs-4-htmledi ... utton.html (you can test the plugin if you visit the source site).
NB: When this plugin is active the cleartags button/command have to be located in the actual toolbar (i.e. not in a "leftover" dropdown menu because then the icon doesn´t work).

1. Open file C:\AwareIM\Tomcat\webapps\AwareIM\ext-4.1.0\ext-all.js

2. Search for "enableformat" (there are several results and point 3 below is in the first result. Another thing, when doing this search, enableformat comes up and point 3
below i.e. adding the code below is after the enablefont segment)

3. Add "plugins:['cleartags']," after the enableFont line

4. Add the following below the 1 code line in the ext-all.js file. NB: This is a temporary fix and the ideal would be to minimize the code below
and add it then in the ext-all.js file so this code below also is integrated in the 1 line of code:

Ext.define('Ext.form.plugin.ClearTags', {
alias: 'plugin.cleartags',
regex: /(<([^>]+)>)/ig,
regexSpaces: /(\s| )+/g,
init: function (cmp) {
this.cmp = cmp;
this.cmp.on('render', this.onRender, this);
},
onRender: function () {
var me = this,
ed = me.cmp,
tb = ed.getToolbar();

tb.add({ xtype: 'tbseparator' });
tb.add({
cls: 'x-btn-icon',
iconCls: 'icon-clear',
tooltip: {
title: 'Clear tags',
text: 'Clear all html-tags and non-breaking spaces.',
cls: 'x-html-editor-tip'
},
clickEvent: 'mousedown',
handler: function () {
var value = ed.getValue() || '',
result = value.replace(me.regex, ' ').replace(me.regexSpaces, ' ');
ed.setValue(result);
}
});
}
});

5. Open file C:\AwareIM\Tomcat\webapps\AwareIM\ext-4.1.0\resources\css\ext-all.css

6. Add ".x-html-editor-tb .icon-clear{background-image:url('clear.png');}" at the very last of the 1 line of code so this is the last code segment in the line.
NB: In this link above i.e. the clear.png, this link is to file clear.png located in the same folder as the ext-all.css file and this is temporary and it´s better
to place the file in another folder where other images are located and then also change the link in this code segment to the new location. You can get the icon from the source link above (i.e. on the source site).

7. Copy clear.png to the folder that holds images (see point 6)