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

Revision 646, 17.5 KB checked in by niltonneto, 15 years ago (diff)

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