PDA

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



catof
22 Nov 2007, 8:26 AM
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
22 Nov 2007, 9:19 AM
Hi!

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

I haven

catof
22 Nov 2007, 9:49 AM
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
23 Nov 2007, 2:47 AM
You can take a look in the documentation of Ext.Component (or derived class)
to learn about plugins. You

dangreenfield
23 Nov 2007, 6:27 PM
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
12 Feb 2008, 10:06 AM
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
3 Feb 2009, 7:19 AM
If HTMLEDITOR in the window, how to fixword window to front

PSB
12 Feb 2009, 4:24 AM
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
12 Feb 2009, 5:11 PM
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!

sanjayarrk1
9 Sep 2011, 5:24 AM
Thanks for giving this ready made code but could you jst help me in - How i can call this class htmleditor_wordpaste.js from my htmleditor

Thanks in advanced