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

Revision 53, 8.8 KB checked in by niltonneto, 17 years ago (diff)

Vide change_log.txt

  • Property svn:eol-style set to native
  • Property svn:executable set to *
Line 
1function cRichTextEditor(){
2        this.editor;
3        this.table;
4        this.id;
5        this.buildEditor();
6}
7
8cRichTextEditor.prototype.loadEditor = function(ID) {
9        this.id = ID;
10        parentDiv = document.getElementById("body_position_"+this.id);
11        this.editor = "body_"+this.id;
12       
13        if(this.table.parentNode)
14                this.table.parentNode.removeChild(this.table); 
15
16        if(parentDiv.firstChild){
17                parentDiv.insertBefore(this.table,parentDiv.firstChild);
18        }
19        else
20                parentDiv.appendChild(this.table);
21
22        if(!Element(this.editor)){
23                iframe = document.createElement("IFRAME");
24                iframe.id = this.editor;
25                iframe.name = this.editor;
26                iframe.width = "99%";
27                iframe.height = 300;
28                iframe.setAttribute("unselectable","on");
29                iframe.setAttribute("tabIndex","1");
30                var checkbox = document.createElement("INPUT");
31                checkbox.id = 'viewsource_rt_checkbox';
32                checkbox.type = "checkbox";
33                checkbox.setAttribute("tabIndex","-1");
34                checkbox.onclick = function () {RichTextEditor.viewsource(this.checked)};
35                var text = document.createTextNode(get_lang('View HTML source') + '.');
36                parentDiv.appendChild(iframe);
37                parentDiv.appendChild(checkbox);
38                parentDiv.appendChild(text);
39        }
40        else{
41                Element("viewsource_rt_checkbox").checked=false;
42        }
43
44        document.getElementById('fontname').selectedIndex = 1;
45        document.getElementById('fontsize').selectedIndex = 1;
46}
47
48cRichTextEditor.prototype.viewsource = function(source) {
49        var html;
50        var mainField = document.getElementById(this.editor).contentWindow;
51        if (source) {
52                if (is_ie){
53                        connector.loadScript('html2xhtml');
54                        html = frames[this.editor].document.body;
55                        var xhtml = get_xhtml(html, 'en', 'iso-8859-1');
56                        frames[this.editor].document.body.innerText = xhtml;
57                        document.getElementById("table_richtext_toolbar").style.visibility="hidden";
58                }
59                else{
60                        html = document.createTextNode(document.getElementById(this.editor).contentWindow.document.body.innerHTML);
61                        document.getElementById(this.editor).contentWindow.document.body.innerHTML = "";
62                        html = document.getElementById(this.editor).contentWindow.document.importNode(html,false);
63                        document.getElementById(this.editor).contentWindow.document.body.appendChild(html);
64                        document.getElementById("table_richtext_toolbar").style.visibility="hidden";
65                }               
66        } else {
67                if (is_ie){
68                        var output = escape(frames[this.editor].document.body.innerText);
69                        output = output.replace("%3CP%3E%0D%0A%3CHR%3E", "%3CHR%3E");
70                        output = output.replace("%3CHR%3E%0D%0A%3C/P%3E", "%3CHR%3E");
71                        frames[this.editor].document.body.innerHTML = unescape(output);
72                        document.getElementById("table_richtext_toolbar").style.visibility="visible"; 
73                }
74                else{
75                        html = document.getElementById(this.editor).contentWindow.document.body.ownerDocument.createRange();
76                        html.selectNodeContents(document.getElementById(this.editor).contentWindow.document.body);
77                        document.getElementById(this.editor).contentWindow.document.body.innerHTML = html.toString();
78                        document.getElementById("table_richtext_toolbar").style.visibility="visible"; 
79                }
80        }
81}
82
83cRichTextEditor.prototype.buildEditor = function() {
84        this.table = document.createElement("TABLE");
85        this.table.id = "table_richtext_toolbar";
86        this.table.className = "richtext_toolbar";
87        this.table.width = "100%";
88        var tbody = document.createElement("TBODY");
89        var tr = document.createElement("TR");
90        var td = document.createElement("TD");
91        var div_button_rt = document.createElement("DIV");
92       
93        selectBox=document.createElement("SELECT");
94        selectBox.id="fontname";
95        selectBox.setAttribute("tabIndex","-1");
96        selectBox.onchange = function () {RichTextEditor.Select("fontname");};
97        selectBox.className = 'select_richtext';
98        var option1 = new Option(get_lang('Font'), 'Font');
99        var option2 = new Option('Arial', 'Arial');
100        var option3 = new Option('Courier', 'Courier');
101        var option4 = new Option('Times New Roman', 'Times');
102        if (is_ie){
103                selectBox.add(option1);
104                selectBox.add(option2);
105                selectBox.add(option3);
106                selectBox.add(option4);
107        }
108        else{
109                selectBox.add(option1, null);
110                selectBox.add(option2, null);
111                selectBox.add(option3, null);
112                selectBox.add(option4, null);
113        }
114        div_button_rt.appendChild(selectBox);
115
116        selectBox=document.createElement("SELECT");
117        selectBox.id="fontsize";
118        selectBox.setAttribute("tabIndex","-1");
119        selectBox.setAttribute("unselectable","on");
120        selectBox.className = 'select_richtext';
121        selectBox.onchange = function () {RichTextEditor.Select("fontsize");};
122        var option1 = new Option(get_lang('Size'), 'Size');
123        var option2 = new Option('1 (8 pt)','1' );
124        var option3 = new Option('2 (10 pt)','2');
125        var option4 = new Option('3 (12 pt)','3');
126        var option5 = new Option('4 (14 pt)','4');
127        var option6 = new Option('5 (18 pt)','5');
128        var option7 = new Option('6 (24 pt)','6');
129        var option8 = new Option('7 (36 pt)','7');
130        if (is_ie){
131                selectBox.add(option1);
132                selectBox.add(option2);
133                selectBox.add(option3);
134                selectBox.add(option4);
135                selectBox.add(option5);
136                selectBox.add(option6);
137                selectBox.add(option7);
138                selectBox.add(option8);
139        }
140        else{
141                selectBox.add(option1, null);
142                selectBox.add(option2, null);
143                selectBox.add(option3, null);
144                selectBox.add(option4, null);
145                selectBox.add(option5, null);
146                selectBox.add(option6, null);
147                selectBox.add(option7, null);
148                selectBox.add(option8, null);   
149        }
150        div_button_rt.appendChild(selectBox);
151       
152        var buttons = ['bold', 'italic', 'underline', 'forecolor', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull',
153                                   'undo', 'redo', 'insertorderedlist', 'insertunorderedlist', 'outdent', 'indent', 'link', 'signature'];
154
155        for (var i=0; i<buttons.length; i++){
156                var img = document.createElement("IMG");
157                img.id = buttons[i];
158                img.className = 'imagebutton';
159                img.align = 'center';
160                img.src = './templates/default/images/'+buttons[i]+'.gif';
161                img.title = get_lang(buttons[i]);
162                img.style.cursor = 'pointer';
163
164                if (buttons[i] == 'forecolor')
165                        img.onclick = function () {RichTextEditor.show_pc('forecolor')};
166                else if (buttons[i] == 'link')
167                        img.onclick = function () {RichTextEditor.createLink();};
168                else
169                        img.onclick = function () {RichTextEditor.editorCommand(this.id,'');};
170               
171                img.onmouseover = function () {this.style.border="outset 2px";};
172                img.onmouseout = function () {this.style.border="solid 2px #C0C0C0";};
173                div_button_rt.appendChild(img);
174        }
175
176        td.appendChild(div_button_rt);
177        tr.appendChild(td);
178        tbody.appendChild(tr);
179        this.table.appendChild(tbody);
180}
181
182cRichTextEditor.prototype.editorCommand = function(command, option) {
183        var mainField = document.getElementById(this.editor).contentWindow;
184        try {
185                mainField.focus();
186                if (command == 'signature'){
187                        if (is_ie){
188                                var sel = document.selection;
189                                if (sel!=null)
190                                {
191                                    var rng = sel.createRange();
192                                    if (rng!=null)
193                                rng.pasteHTML(preferences.signature.replace(/\n/g, "<br>"));
194                                }
195                        }
196                        else{
197                                mainField.document.execCommand('inserthtml', false, preferences.signature.replace(/\n/g, "<br>"));
198                        }
199                }
200                else
201                        mainField.document.execCommand(command, false, option);
202                //mainField.focus();
203    } catch (e) {}
204}
205
206cRichTextEditor.prototype.createLink = function(){
207        var mainField = document.getElementById(this.editor).contentWindow;
208        if (is_ie){
209                if ((mainField.document.selection.createRange().text) == ''){
210                                alert(get_lang('Chose the text you want transform in link before.'));
211                        return;
212                }
213        }
214        else{
215                if (mainField.window.getSelection() == ''){
216                                alert(get_lang('Chose the text you want transform in link before.'));
217                        return;
218                }
219        }
220                var szURL = prompt(get_lang('Enter with link URL:", "http://"'));
221        if ((szURL != null) && (szURL != "")){
222                this.editorCommand("CreateLink", szURL);
223        }
224}
225
226cRichTextEditor.prototype.Select = function(selectname)
227{
228        var mainField = Element(this.editor).contentWindow;
229        var cursel = document.getElementById(selectname).selectedIndex;
230
231        if (cursel != 0) {
232                var selected = document.getElementById(selectname).options[cursel].value;
233                mainField.document.execCommand(selectname, false, selected);
234                document.getElementById(selectname).selectedIndex = cursel;
235        }
236        mainField.focus();
237}
238
239cRichTextEditor.prototype.show_pc = function(command)
240{
241        connector.loadScript("color_palette");
242        ColorPalette.loadPalette(this.id);
243        if (ColorPalette.div.style.visibility != "visible")
244                ColorPalette.div.style.visibility="visible";
245        else
246                this.hide_pc();
247}
248
249cRichTextEditor.prototype.hide_pc = function()
250{
251        document.getElementById("palettecolor").style.visibility="hidden";
252}
253
254cRichTextEditor.prototype.getOffsetTop = function(elm) {
255  var mOffsetTop = elm.offsetTop;1
256  var mOffsetParent = elm.offsetParent;
257  while(mOffsetParent){
258    mOffsetTop += mOffsetParent.offsetTop;
259    mOffsetParent = mOffsetParent.offsetParent;
260  }
261  return mOffsetTop;
262}
263
264cRichTextEditor.prototype.getOffsetLeft = function(elm) {
265  var mOffsetLeft = elm.offsetLeft;
266  var mOffsetParent = elm.offsetParent;
267  while(mOffsetParent){
268    mOffsetLeft += mOffsetParent.offsetLeft;
269    mOffsetParent = mOffsetParent.offsetParent;
270  }
271  return mOffsetLeft;
272}
273
274//Build the Object
275RichTextEditor = new cRichTextEditor();
Note: See TracBrowser for help on using the repository browser.