source: branches/2.2/expressoMail1_2/js/rich_text_editor.js @ 3238

Revision 3238, 19.2 KB checked in by rafaelraymundo, 14 years ago (diff)

Ticket #1268 - Diferença de fonte na exibição e edição de um e-mail
  • Property svn:eol-style set to native
  • Property svn:executable set to *
Line 
1function cRichTextEditor(){
2        this.emwindow   = new Array;
3        this.editor = "body_1";
4        this.table = "";
5        this.id = "1";
6        this.buildEditor();
7        this.saveFlag = 0;
8}
9
10cRichTextEditor.prototype.loadEditor = function(ID) {
11        var _this = this;
12        _this.id = ID;
13        parentDiv = document.getElementById("body_position_"+this.id);
14        this.editor = "body_"+this.id;
15
16        if(this.table.parentNode)
17                this.table.parentNode.removeChild(this.table);
18       
19        if( parentDiv.firstChild )
20        {
21                if (!parentDiv.firstChild.hasChildNodes())
22                        parentDiv.insertBefore(this.table,parentDiv.firstChild);
23        }
24        else
25                parentDiv.appendChild(this.table);
26
27        if(!Element(this.editor))
28        {
29                this.createElementEditor(this.editor);
30        }
31        else
32        {
33                Element("viewsource_rt_checkbox").checked=false;
34        }
35
36        document.getElementById('fontname').selectedIndex = 0;
37        document.getElementById('fontsize').selectedIndex = 0;
38}
39
40cRichTextEditor.prototype.createElementEditor = function(pObj)
41{
42                iframe = document.createElement("IFRAME");
43                iframe.id = pObj;
44                iframe.name = pObj;
45                iframe.width = "99%";
46                iframe.height = 300;
47                iframe.setAttribute("unselectable","on");
48                iframe.setAttribute("tabIndex","1");
49
50                config_events( iframe, 'onload', function( )
51                {
52                        iframe.contentWindow.document.designMode = "on";
53                        if ( iframe.contentWindow.document.documentElement ){
54                                iframe.contentWindow.document.documentElement.style.background = '#fff';
55                                iframe.contentWindow.document.documentElement.style.fontSize = '16px';
56                        }
57                });
58
59                var checkbox = document.createElement("INPUT");
60                checkbox.id = 'viewsource_rt_checkbox';
61                checkbox.type = "checkbox";
62                checkbox.setAttribute("tabIndex","-1");
63                checkbox.onclick = function () {RichTextEditor.viewsource(this.checked)};
64                var text = document.createTextNode(get_lang('View HTML source') + '.');
65                parentDiv.appendChild(iframe);
66                parentDiv.appendChild(checkbox);
67                parentDiv.appendChild(text);
68}
69
70cRichTextEditor.prototype.loadStyle = function(tag, css_file) {
71        var theRules = new Array();
72        var stylePRE = "";     
73        for(var s = 0; s < document.styleSheets.length; s++) {
74                if(document.styleSheets[s].href != null &&
75                                document.styleSheets[s].href.match("templates/"+template+"/"+css_file)){                       
76                        if (document.styleSheets[s].cssRules)
77                                theRules = document.styleSheets[s].cssRules;
78                        else if (document.styleSheets[s].rules)
79                                theRules = document.styleSheets[s].rules;
80                        break;
81                }
82        }
83        for(var s = 0;s < theRules.length; s++){
84                if(theRules[s].selectorText.toLowerCase() == tag.toLowerCase()){                       
85                        stylePRE = theRules[s].style;
86                        break;
87                }
88        }
89        var _body = Element(this.editor);
90        var i_doc = (document.all) ? _body.contentWindow.document: _body.contentDocument;
91        var hh1 = i_doc.getElementsByTagName('head')[0];
92        // For IE
93        if(typeof(hh1) == 'undefined'){
94                hh1 = i_doc.createElement("head");
95                i_doc.appendChild(hh1);
96        }
97        var ss1 = i_doc.createElement('style');
98        ss1.setAttribute("type", "text/css");
99        var def = tag.toLowerCase()+' {'+stylePRE.cssText+'}';
100        if (ss1.styleSheet) {
101            ss1.styleSheet.cssText = def;
102        } else {
103            var tt1 = i_doc.createTextNode(def);
104            ss1.appendChild(tt1);
105        }
106        hh1.appendChild(ss1);
107}
108
109cRichTextEditor.prototype.viewsource = function(source) {
110        var html;
111        var mainField = document.getElementById(this.editor).contentWindow;
112        if (source) {
113                if (is_ie){
114                        connector.loadScript('html2xhtml');
115                        html = frames[this.editor].document.body;
116                        var xhtml = get_xhtml(html, 'en', 'iso-8859-1');
117                        frames[this.editor].document.body.innerText = xhtml;
118                        document.getElementById("table_richtext_toolbar").style.visibility="hidden";
119                }
120                else{
121                        html = document.createTextNode(document.getElementById(this.editor).contentWindow.document.body.innerHTML);
122                        document.getElementById(this.editor).contentWindow.document.body.innerHTML = "";
123                        html = document.getElementById(this.editor).contentWindow.document.importNode(html,false);
124                        document.getElementById(this.editor).contentWindow.document.body.appendChild(html);
125                        document.getElementById("table_richtext_toolbar").style.visibility="hidden";
126                }               
127        } else {
128                if (is_ie){
129                        var output = escape(frames[this.editor].document.body.innerText);
130                        output = output.replace("%3CP%3E%0D%0A%3CHR%3E", "%3CHR%3E");
131                        output = output.replace("%3CHR%3E%0D%0A%3C/P%3E", "%3CHR%3E");
132                        frames[this.editor].document.body.innerHTML = unescape(output);
133                        document.getElementById("table_richtext_toolbar").style.visibility="visible"; 
134                }
135                else{
136                        html = document.getElementById(this.editor).contentWindow.document.body.ownerDocument.createRange();
137                        html.selectNodeContents(document.getElementById(this.editor).contentWindow.document.body);
138                        document.getElementById(this.editor).contentWindow.document.body.innerHTML = html.toString();
139                        document.getElementById("table_richtext_toolbar").style.visibility="visible"; 
140                }
141        }
142}
143
144cRichTextEditor.prototype.buildEditor = function() {
145        this.table = document.createElement("TABLE");
146        this.table.id = "table_richtext_toolbar";
147        this.table.className = "richtext_toolbar";
148        this.table.width = "100%";
149        var tbody = document.createElement("TBODY");
150        var tr = document.createElement("TR");
151        var td = document.createElement("TD");
152        var div_button_rt = document.createElement("DIV");
153       
154        selectBox=document.createElement("SELECT");
155        selectBox.id="fontname";
156        selectBox.setAttribute("tabIndex","-1");
157        selectBox.onchange = function () {RichTextEditor.Select("fontname");};
158        selectBox.className = 'select_richtext';
159        var option1 = new Option(get_lang('Font'), 'Font');
160        var option2 = new Option('Arial', 'Arial');
161        var option3 = new Option('Courier', 'Courier');
162        var option4 = new Option('Times New Roman', 'Times');
163        if (is_ie){
164                selectBox.add(option1);
165                selectBox.add(option2);
166                selectBox.add(option3);
167                selectBox.add(option4);
168        }
169        else{
170                selectBox.add(option1, null);
171                selectBox.add(option2, null);
172                selectBox.add(option3, null);
173                selectBox.add(option4, null);
174        }
175        div_button_rt.appendChild(selectBox);
176
177        selectBox=document.createElement("SELECT");
178        selectBox.id="fontsize";
179        selectBox.setAttribute("tabIndex","-1");
180        selectBox.setAttribute("unselectable","on");
181        selectBox.className = 'select_richtext';
182        selectBox.onchange = function () {RichTextEditor.Select("fontsize");};
183        var option1 = new Option(get_lang('Size'), 'Size');
184        var option2 = new Option('1 (8 pt)','1' );
185        var option3 = new Option('2 (10 pt)','2');
186        var option4 = new Option('3 (12 pt)','3');
187        var option5 = new Option('4 (14 pt)','4');
188        var option6 = new Option('5 (18 pt)','5');
189        var option7 = new Option('6 (24 pt)','6');
190        var option8 = new Option('7 (36 pt)','7');
191        if (is_ie){
192                selectBox.add(option1);
193                selectBox.add(option2);
194                selectBox.add(option3);
195                selectBox.add(option4);
196                selectBox.add(option5);
197                selectBox.add(option6);
198                selectBox.add(option7);
199                selectBox.add(option8);
200        }
201        else{
202                selectBox.add(option1, null);
203                selectBox.add(option2, null);
204                selectBox.add(option3, null);
205                selectBox.add(option4, null);
206                selectBox.add(option5, null);
207                selectBox.add(option6, null);
208                selectBox.add(option7, null);
209                selectBox.add(option8, null);   
210        }
211        div_button_rt.appendChild(selectBox);
212       
213        var buttons = ['bold', 'italic', 'underline', 'forecolor', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull',
214                                   'undo', 'redo', 'insertorderedlist', 'insertunorderedlist', 'outdent', 'indent', 'link', 'image', 'table', 'signature'];
215
216        for (var i=0; i<buttons.length; i++){
217                var img = document.createElement("IMG");
218                img.id = buttons[i];
219                img.className = 'imagebutton';
220                img.align = 'center';
221                img.src = './templates/'+template+'/images/'+buttons[i]+'.gif';
222                img.title = get_lang(buttons[i]);
223                img.style.cursor = 'pointer';
224
225                if (buttons[i] == 'forecolor')
226                        img.onclick = function () {RichTextEditor.show_pc('forecolor')};
227                else if (buttons[i] == 'link')
228                        img.onclick = function () {RichTextEditor.createLink();};
229                else if (buttons[i] == 'image')
230                        img.onclick = function () {RichTextEditor.createImage();};
231                else if (buttons[i] == 'table')
232                        img.onclick = function () {RichTextEditor.createTable();};
233                else
234                        img.onclick = function () {RichTextEditor.editorCommand(this.id,'');};
235               
236                img.onmouseover = function () {this.style.border="outset 2px";};
237                img.onmouseout = function () {this.style.border="solid 2px #C0C0C0";};
238                div_button_rt.appendChild(img);
239        }
240
241        td.appendChild(div_button_rt);
242        tr.appendChild(td);
243        tbody.appendChild(tr);
244        this.table.appendChild(tbody);
245}
246
247cRichTextEditor.prototype.editorCommand = function(command, option) {
248        try {
249                var mainField = document.getElementById(this.editor).contentWindow;
250                mainField.focus();
251                var signature = preferences.type_signature == 'html' ? preferences.signature : preferences.signature.replace(/\n/g, "<br>");
252                if (command == 'signature'){
253                        if (is_ie){
254                                var sel = document.selection;
255                                if (sel!=null)
256                                {
257                                    var rng = sel.createRange();
258                                    if (rng!=null)
259                                        rng.pasteHTML(signature);
260                                }
261                        }
262                        else{
263                                mainField.document.execCommand('inserthtml', false, signature);
264                        }
265                }
266                else if (command == 'CreateLink')
267                        mainField.document.execCommand('CreateLink', false, option);
268                else if (command == 'Table'){
269                        if (is_ie){
270                                var sel = document.selection;
271                                if (sel!=null)
272                                {
273                                    var rng = sel.createRange();
274                                    if (rng!=null)
275                                rng.pasteHTML(option);
276                                }
277                        }
278                        else
279                                mainField.document.execCommand('inserthtml', false, option);
280                        }
281                else if (command == 'Image')
282                        mainField.document.execCommand('InsertImage', false, option);
283                else
284                        mainField.document.execCommand(command, false, option);
285                //mainField.focus();
286    } catch (e) {/* alert(e);*/ }
287}
288
289cRichTextEditor.prototype.createLink = function(){
290        var mainField = document.getElementById(this.editor).contentWindow;
291        if (is_ie){
292                if ((mainField.document.selection.createRange().text) == ''){
293                                alert(get_lang('Chose the text you want transform in link before.'));
294                        return;
295                }
296        }
297        else{
298                if (mainField.window.getSelection() == ''){
299                                alert(get_lang('Chose the text you want transform in link before.'));
300                        return;
301                }
302        }
303                var szURL = prompt(get_lang('Enter with link URL:'), 'http://');
304        if ((szURL != null) && (szURL != "")){
305                this.editorCommand("CreateLink", szURL);
306        }
307}
308
309// It include the image file in emails body
310// It saves and attach in drafts folder and open it
311cRichTextEditor.prototype.addInputFile = function()
312{
313        //Begin: Verify if the image extension is allowed.
314        var imgExtensions = new Array("jpeg", "jpg", "gif", "png", "bmp", "xbm", "tiff", "pcx");
315        var inputFile = document.getElementById('inputFile_img');       
316        if(!inputFile.value) return false;
317        var fileExtension = inputFile.value.split(".");
318        fileExtension = fileExtension[(fileExtension.length-1)];
319        var deniedExtension = true;
320        for(var i=0; i<imgExtensions.length; i++) {
321                if(imgExtensions[i].toUpperCase() == fileExtension.toUpperCase()) {
322                        deniedExtension = false;
323                        break;
324                }
325        }
326        if(deniedExtension) {
327                alert(get_lang('File extension forbidden or invalid file') + '.');
328                return false;
329        }
330        // End: Verify image extension.
331        var id = this.editor.substr(5); // border_id
332        divFiles = document.getElementById("divFiles_"+id);
333        var countDivFiles = divFiles.childNodes.length + 1;
334
335        var divFiles = document.getElementById('divFiles_'+id);
336        inputFile.id = 'inputFile_'+id +"_"+countDivFiles;
337        inputFile.name = 'file_'+countDivFiles;
338        divFile = document.createElement('DIV');
339        divFile.appendChild(inputFile);
340        divFiles.appendChild(divFile);
341
342        var form_upload = document.getElementById('form_upload');
343        form_upload.parentNode.removeChild(form_upload);
344        win.close();
345
346        RichTextEditor.saveFlag = 0; // See if save function finished
347        var save_link = document.getElementById("save_message_options_"+id);
348        //save_link.onclick = function () {};
349        save_msg(id,true);
350        setTimeout("RichTextEditor.insertImgHtml("+id+")",1000);
351}
352
353cRichTextEditor.prototype.insertImgHtml = function (id){
354        if (RichTextEditor.saveFlag == 0)
355                setTimeout("RichTextEditor.insertImgHtml("+id+")",500);
356        else
357                if (RichTextEditor.saveFlag == 1)
358                        this.editorCommand('Image', './inc/show_embedded_attach.php?msg_folder=INBOX/'+draftsfolder+'&msg_num='+openTab.imapUid[id]+'&msg_part='+(openTab.countFile[id]+1));
359                        // this.editorCommand('Image', '.inc/gotodownload.php?msg_folder="+msg_folder+"&msg_number="+msg_number+"&idx_file="+idx_file+"&msg_part="+msg_part+params'));
360}
361
362cRichTextEditor.prototype.insertTableHtml = function (){
363        var id = this.editor.substr(5); // border_id
364        var     rows = document.getElementById('rows').value;
365        var     cols = document.getElementById('cols').value;
366        var border = document.getElementById('border').value;
367        var insertTable = '<table border="'+border+'px"><tbody>';
368        for (var i = 0; i < rows; i++){
369                insertTable += "<tr>"; 
370                for (var j = 0; j < cols; j++)
371                        insertTable += "<td>&nbsp;</td>";       
372                insertTable += "</tr>";
373        }
374        insertTable += "</tbody></table>";
375        this.editorCommand('Table', insertTable);
376}
377
378cRichTextEditor.prototype.createTable = function(){
379        var form = document.getElementById("table_window");
380        if (form == null){
381                form = document.createElement("DIV");
382                form.id  = "table_window";
383                form.style.visibility = "hidden";
384                form.style.position = "absolute";
385                form.style.background = "#eeeeee";
386                form.style.left = "0px";
387                form.style.top  = "0px";
388                form.style.width = "0px";
389                form.style.height = "0px";
390                document.body.appendChild(form);
391        }
392               
393                var form_table = document.createElement("DIV");
394                form_table.id = "form_table";
395                form_table.style.position = "absolute";
396                form_table.style.top = "5px";
397                form_table.style.left = "5px";
398                form_table.style.width = "190px";
399                form_table.style.height = "90px";
400                form_table.name = get_lang("Insert Table");             
401                form_table.innerHTML = get_lang('Select the table size')+':<br><br><table cellspacing="0"><tbody><tr><td align="center">'+
402                                                                get_lang('Rows')+':</td><td></td><td align="center">'+get_lang('Cols')+':</td><td></td><td align="center">'+get_lang('Border')+':</td></tr>'+
403                                                                        '<tr><td align="right"><input type="text" readonly="true" id="rows" size="2" maxlength="2" value="1"></input></td><td align="left"><img src="templates/'+template+'/images/plus.png" onclick="javascript:RichTextEditor.incrementField(\'rows\');"></img><br><img src="templates/'+template+'/images/minus.png" onclick="javascript:RichTextEditor.decrementField(\'rows\');"></img></td>'+
404                                                                        '<td align="right"><input type="text" readonly="true" id="cols" size="2" maxlength="2" value="1"></input></td><td align="left"><img src="templates/'+template+'/images/plus.png" onclick="javascript:RichTextEditor.incrementField(\'cols\');"></img><br><img src="templates/'+template+'/images/minus.png" onclick="javascript:RichTextEditor.decrementField(\'cols\');"></img></td>'+
405                                                                        '<td align="right"><input type="text" readonly="true" id="border" size="2" maxlength="2" value="1"></input></td><td align="left"><img src="templates/'+template+'/images/plus.png" onclick="javascript:RichTextEditor.incrementField(\'border\');"></img><br><img src="templates/'+template+'/images/minus.png" onclick="javascript:RichTextEditor.decrementField(\'border\');"></img></td>'+
406                                                                        '</tr></tbody></table>'+
407                                                                        '&nbsp;&nbsp;&nbsp;<input title="'+get_lang('Close')+'"  value="' + get_lang('Close') + '" type="button" onclick="win.close()">&nbsp;'+
408                                                                        '<input title="' + get_lang('Include') + '"  value="' + get_lang('Include') + '" type="button" onclick="RichTextEditor.insertTableHtml();win.close();">';       
409                form.appendChild(form_table);
410               
411                this.showWindow(form);
412                }
413
414cRichTextEditor.prototype.incrementField = function(id_val){
415        var field_text = document.getElementById(id_val);
416        field_text.value = parseInt(field_text.value)+1;
417}
418
419cRichTextEditor.prototype.decrementField = function(id_val){
420        var field_text = document.getElementById(id_val);
421        if (parseInt(field_text.value) > 0)
422                field_text.value = parseInt(field_text.value)-1;
423}
424
425cRichTextEditor.prototype.createImage = function(){
426        if (preferences.auto_save_draft == 1){
427                        autosave_time = 200000;
428                        clearTimeout(openTab.autosave_timer[currentTab]);
429                }
430        var form = document.getElementById("attachment_window");
431        if (form == null){
432                form = document.createElement("DIV");
433                form.id  = "attachment_window";
434                form.style.visibility = "hidden";
435                form.style.position = "absolute";
436                form.style.background = "#eeeeee";
437                form.style.left = "0px";
438                form.style.top  = "0px";
439                form.style.width = "0px";
440                form.style.height = "0px";
441                document.body.appendChild(form);
442        }
443                var form_upload = Element('form_upload');
444                if (form_upload == null)
445                        form_upload = document.createElement("DIV");
446                form_upload.id = "form_upload";
447                form_upload.style.position = "absolute";
448                form_upload.style.top = "5px";
449                form_upload.style.left = "5px";
450                form_upload.name = get_lang("Upload File");
451                form_upload.style.width = "450px";
452                form_upload.style.height = "75px";
453                form_upload.innerHTML = get_lang('Select the desired image file')+':<br>'+
454                                                                '<input name="image_at" maxlength="255" size="50" id="inputFile_img" type="file"><br>' +
455                                                                '<input title="' + get_lang('Include') + '"  value="' + get_lang('Include') + '"' + 'type="button" onclick="RichTextEditor.addInputFile();">&nbsp;' +
456                                                                '<input title="' + get_lang('Close') + '"  value="' + get_lang('Close') + '"' +
457                                                                ' type="button" onclick="win.close()">';
458                form.appendChild(form_upload);
459               
460                this.showWindow(form);
461}
462cRichTextEditor.prototype.showWindow = function (div){
463
464                if(! div) {
465                        return;
466                }
467               
468                if(! this.emwindow[div.id]) {
469                        div.style.width  =  div.firstChild.style.width;
470                        div.style.height = div.firstChild.style.height;
471                        div.style.zIndex = "10000";                     
472                        var title = div.firstChild.name;
473                        var wHeight = div.offsetHeight + "px";
474                        var wWidth =  div.offsetWidth   + "px";
475                        div.style.width = div.offsetWidth - 5;
476
477                        win = new dJSWin({
478                                id: 'win_'+div.id,
479                                content_id: div.id,
480                                width: wWidth,
481                                height: wHeight,
482                                title_color: '#3978d6',
483                                bg_color: '#eee',
484                                title: title,
485                                title_text_color: 'white',
486                                button_x_img: '../phpgwapi/images/winclose.gif',
487                                border: true });
488                       
489                        this.emwindow[div.id] = win;
490                        win.draw();
491                }
492                else
493                        win = this.emwindow[div.id];
494                win.open();     
495}
496
497cRichTextEditor.prototype.Select = function(selectname)
498{
499        var mainField = Element(this.editor).contentWindow;
500        var cursel = document.getElementById(selectname).selectedIndex;
501
502        if (cursel != 0) {
503                var selected = document.getElementById(selectname).options[cursel].value;
504                mainField.document.execCommand(selectname, false, selected);
505                document.getElementById(selectname).selectedIndex = cursel;
506        }
507        mainField.focus();
508}
509
510cRichTextEditor.prototype.show_pc = function(command)
511{
512        connector.loadScript("color_palette");
513        ColorPalette.loadPalette(this.id);
514        if (ColorPalette.div.style.visibility != "visible")
515                ColorPalette.div.style.visibility="visible";
516        else
517                this.hide_pc();
518}
519
520cRichTextEditor.prototype.hide_pc = function()
521{
522        document.getElementById("palettecolor").style.visibility="hidden";
523}
524
525cRichTextEditor.prototype.getOffsetTop = function(elm) {
526  var mOffsetTop = elm.offsetTop;1
527  var mOffsetParent = elm.offsetParent;
528  while(mOffsetParent){
529    mOffsetTop += mOffsetParent.offsetTop;
530    mOffsetParent = mOffsetParent.offsetParent;
531  }
532  return mOffsetTop;
533}
534
535cRichTextEditor.prototype.getOffsetLeft = function(elm) {
536  var mOffsetLeft = elm.offsetLeft;
537  var mOffsetParent = elm.offsetParent;
538  while(mOffsetParent){
539    mOffsetLeft += mOffsetParent.offsetLeft;
540    mOffsetParent = mOffsetParent.offsetParent;
541  }
542  return mOffsetLeft;
543}
544
545//Build the Object
546RichTextEditor = new cRichTextEditor();
Note: See TracBrowser for help on using the repository browser.