source: sandbox/expressoMail1_2/corretor_ortografico/js/rich_text_editor.js @ 2489

Revision 2489, 19.4 KB checked in by nathalie.silva, 14 years ago (diff)

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