source: trunk/expressoMail1_2/js/rich_text_editor.js @ 279

Revision 279, 15.9 KB checked in by niltonneto, 16 years ago (diff)

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