[2.x] EXT.ux.ApoteosHtmlEditor (WORD paste HTMLEditor ) - My First Extension

[catof]

Sorry for my bad english . This is my first attempt of making an extension for ext. As you see in the shots i have added an icon to standard HTMLEditor to make paste form Microsoft Word removing the infinte tag that Microsoft Word add to all text.

Suggestion is greatly accepted... Thank to all and to EXT developers for your usefull work. :))

[tidal]

Hi!

Thx for writing this extension, I think there are a lot of people, who will
need this functionality.

I haven

[catof]

Thanks Timo :D .

I don't now nothing about Plugin .... :-/ but what you see is very interesting ..... i'll search some information about Plugin to make a new version.

For the Demo page , tomorrow i'll upload a working page on my web site.

Thanks again

P.s. becouse my first Extension i wrongly think that all the code is necessary... i'll correct also this... bye to all =;

[tidal]

You can take a look in the documentation of Ext.Component (or derived class)
to learn about plugins. You

[dangreenfield]

Jack suggested, elsewhere within the forum, that additional HtmlEditor functionality should be added as plugins rather than as extensions. I'm going to follow his advice and spend some time trying to code a style plugin that lets you set a class for the selected text.

I wanted to first test to see if a plugin was the way to go, so I attempted to create a plugin for the Word Paste function in this topic. The code seems simple enough and appears to be working correctly.

If you see any obvious flaws in it, them please let me know and I'll update it appropriately.

Ext.ux.HtmlEditorWordPaste = function() {
function fixWordPaste(wordPaste) {
wordPaste = wordPaste.replace(/MsoNormal/g, "");
wordPaste = wordPaste.replace(/<\\?\?xml[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?o:p[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?v:[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?o:[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?st1:[^>]*>/g, "");
wordPaste = wordPaste.replace(/&nbsp;/g, ""); // <p>&nbsp;</p>
wordPaste = wordPaste.replace(/<\/?SPAN[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?FONT[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?STRONG[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?H1[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?H2[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?H3[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?H4[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?H5[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?H6[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?P[^>]*><\/P>/g, "");
wordPaste = wordPaste.replace(/<!--(.*)-->/g, "");
wordPaste = wordPaste.replace(/<!--(.*)>/g, "");
wordPaste = wordPaste.replace(/<!(.*)-->/g, "");
wordPaste = wordPaste.replace(/<\\?\?xml[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?o:p[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?v:[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?o:[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?st1:[^>]*>/g, "");
wordPaste = wordPaste.replace(/style=\"[^\"]*\"/g, "");
wordPaste = wordPaste.replace(/style=\'[^\"]*\'/g, "");
wordPaste = wordPaste.replace(/lang=\"[^\"]*\"/g, "");
wordPaste = wordPaste.replace(/lang=\'[^\"]*\'/g, "");
wordPaste = wordPaste.replace(/class=\"[^\"]*\"/g, "");
wordPaste = wordPaste.replace(/class=\'[^\"]*\'/g, "");
wordPaste = wordPaste.replace(/type=\"[^\"]*\"/g, "");
wordPaste = wordPaste.replace(/type=\'[^\"]*\'/g, "");
wordPaste = wordPaste.replace(/href=\'#[^\"]*\'/g, "");
wordPaste = wordPaste.replace(/href=\"#[^\"]*\"/g, "");
wordPaste = wordPaste.replace(/name=\"[^\"]*\"/g, "");
wordPaste = wordPaste.replace(/name=\'[^\"]*\'/g, "");
wordPaste = wordPaste.replace(/ clear=\"all\"/g, "");
wordPaste = wordPaste.replace(/id=\"[^\"]*\"/g, "");
wordPaste = wordPaste.replace(/title=\"[^\"]*\"/g, "");
wordPaste = wordPaste.replace(/&nbsp;/g, "");
wordPaste = wordPaste.replace(/\n/g, "");
wordPaste = wordPaste.replace(/\r/g, "");
wordPaste = wordPaste.replace(/<div[^>]*>/g, "<p>");
wordPaste = wordPaste.replace(/<\/?div[^>]*>/g, "</p>");
wordPaste = wordPaste.replace(/<span[^>]*>/g, "");
wordPaste = wordPaste.replace(/<\/?span[^>]*>/g, "");
wordPaste = wordPaste.replace(/class=/g, "");
return wordPaste;
}
this.init = function(htmlEditor) {
this.editor = htmlEditor;
this.editor.on('render', onRender, this);
};
function onRender() {
this.editor.tb.add('-', {
itemId: 'wordpaste',
cls: 'x-btn-icon x-edit-wordpaste',
handler: function() {
var wordPaste;
var wordPasteEditor = new Ext.form.HtmlEditor({
width: 520,
height: 150
});
var wordPasteWindow = new Ext.Window({
title: "Paste text from Microsoft Word",
modal: true,
width: 537,
height: 220,
shadow: true,
resizable: false,
plain: true,
items: wordPasteEditor,
buttons: [{
text: 'Fix',
handler: function() {
var wordPaste = wordPasteEditor.getValue();
wordPaste = fixWordPaste(wordPaste);
this.editor.focus();
this.editor.insertAtCursor(wordPaste);
wordPasteWindow.close();
},
scope: this
}, {
text: 'Cancel',
handler: function() {
wordPasteWindow.close();
}
}]
});
wordPasteWindow.show();
},
scope: this,
clickEvent: 'mousedown',
tooltip: '<b>Paste Microsoft Word</b><br>Copy selected text from Microsoft Word and paste in this window'
});
}
}

[marco76]

I would use your splendid plugin. In IE6 and IE7 all works fine .
In FF I get this error :

[Exception... "Component returned failure code: 0x80004001 (NS_ERROR_NOT_IMPLEMENTED) [nsIDOMNSHTMLDocument.execCommand]" nsresult: "0x80004001 (NS_ERROR_NOT_IMPLEMENTED)" location: "JS frame :: http://www.pitglobalnetwork.com/webroot/js/ext-2.0/ext-all.js :: anonymous :: line 136" data: no]
[Break on this error] Ext.form.HtmlEditor=Ext.extend(Ext.form.Field,{enableFormat:true,enableFontSize:...


on line 136 of ext-all.js



Cna you help me to resolve it?

[Zmeuka]

If HTMLEDITOR in the window, how to fixword window to front

[PSB]

1) in 3 line escape ";"! JSMinimer show error
2) Leaning regular exp. - (?<=^|>)[^><]+?(?=<|$) replace all your code
3) Use Ext.override method for this project

medium cleaner:


Ext.override(Ext.form.HtmlEditor,{
syncValue : function(){
if(this.initialized){
var bd = this.getEditorBody();
var html = bd.innerHTML;
if(Ext.isSafari){
var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
var m = bs.match(/text-align:(.*?);/i);
if(m && m[1]){
html = '<div style="'+m[0]+'">' + html + '</div>';
}
}
html = this.cleanHtml(html);

var reg = /(<p)+(.)+(<\/p>)/g;
if(reg.test(html)==true) html=String(html).match(reg);

if(this.fireEvent('beforesync', this, html) !== false){
this.el.dom.value = html;
this.fireEvent('sync', this, html);
}
}
}
});

[wemerson.januario]

how about the demo e How use. Can you post a demo or a mini-tutorial? Thanks a congratulation for the work, it seems good!