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

Revision 389, 17.7 KB checked in by niltonneto, 16 years ago (diff)

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