https://www.eaje.eu/vendors/public/rtelight/jquery.rte.js

1
2(function($) {
3
4if(typeof $.fn.rte === "undefined") {
5
6    var defaults = {
7        media_url: BASE_URL+"js/rtelight/img/",
8        content_css_url: BASE_URL+"js/rtelight/rte.css",
9        dot_net_button_class: null,
10        max_height: 350
11    };
12
13    $.fn.rte = function(options) {
14
15    $.fn.rte.html = function(iframe) {
16        return iframe.contentWindow.document.getElementsByTagName("body")[0].innerHTML;
17    };
18
19    // build main options before element iteration
20    var opts = $.extend(defaults, options);
21
22    // iterate and construct the RTEs
23    return this.each( function() {
24        var textarea = $(this);
25        var iframe;
26        var element_id = textarea.attr("id");
27
28        // enable design mode
29        function enableDesignMode() {
30
31            var content = textarea.val();
32
33            // Mozilla needs this to display caret
34            if($.trim(content)=='') {
35                content = '<br />';
36            }
37
38            // already created? show/hide
39            if(iframe) {
40                console.log("already created");
41                textarea.hide();
42                $(iframe).contents().find("body").html(content);
43                $(iframe).show();
44                $("#toolbar-" + element_id).remove();
45                textarea.before(toolbar());
46                return true;
47            }
48
49            // for compatibility reasons, need to be created this way
50            iframe = document.createElement("iframe");
51            iframe.frameBorder=0;
52            iframe.frameMargin=0;
53            iframe.framePadding=0;
54            iframe.height=200;
55            if(textarea.attr('class'))
56                iframe.className = textarea.attr('class');
57            if(textarea.attr('id'))
58                iframe.id = element_id;
59            if(textarea.attr('name'))
60                iframe.title = textarea.attr('name');
61
62            textarea.after(iframe);
63
64            var css = "";
65            if(opts.content_css_url) {
66                css = "<link type='text/css' rel='stylesheet' href='" + opts.content_css_url + "' />";
67            }
68
69            var doc = "<html><head>"+css+"</head><body class='frameBody'>"+content+"</body></html>";
70            tryEnableDesignMode(doc, function() {
71                $("#toolbar-" + element_id).remove();
72                textarea.before(toolbar());
73                // hide textarea
74                textarea.hide();
75
76            });
77
78        }
79
80        function tryEnableDesignMode(doc, callback) {
81            if(!iframe) { return false; }
82
83            try {
84                iframe.contentWindow.document.open();
85                iframe.contentWindow.document.write(doc);
86                iframe.contentWindow.document.close();
87            } catch(error) {
88                //console.log(error);
89            }
90            if (document.contentEditable) {
91                iframe.contentWindow.document.designMode = "On";
92                callback();
93                return true;
94            }
95            else if (document.designMode != null) {
96                try {
97                    iframe.contentWindow.document.designMode = "on";
98                    callback();
99                    return true;
100                } catch (error) {
101                    //console.log(error);
102                }
103            }
104            setTimeout(function(){tryEnableDesignMode(doc, callback)}, 500);
105            return false;
106        }
107
108        function disableDesignMode(submit) {
109            var content = $(iframe).contents().find("body").html();
110
111            if($(iframe).is(":visible")) {
112                textarea.val(content);
113            }
114
115            if(submit !== true) {
116                textarea.show();
117                $(iframe).hide();
118            }
119        }
120
121        // create toolbar and bind events to it's elements
122        function toolbar() {
123        	h = "<div class='rte-toolbar' id='toolbar-"+element_id+"'><div>\n";
124        	
125            h+="<p style='display:none'>\n";
126            h+="    <select>\n";
127            h+="        <option value=''>Block style</option>\n";
128            h+="        <option value='p'>Paragraph</option>\n";
129            h+="        <option value='h3'>Title</option>\n";
130            h+="        <option value='address'>Address</option>\n";
131            h+="    </select>\n";
132            h+="</p>\n";
133            
134            //tb+="<p>\";
135            h+="    <a href='#' class='bold'><img style='width:12px;height:12px;' class='sethover' src='"+opts.media_url+"bold.png' alt='bold' /></a>\n";
136            h+="    <a href='#' class='italic'><img style='width:12px;height:12px;' class='sethover ' src='"+opts.media_url+"corsivo.png' alt='italic' /></a>\n";
137            //tb+="</p>\";
138            //tb+="<p>\";
139            h+="    <a href='#' class='unorderedlist'><img style='width:12px;height:12px;' class='sethover' src='"+opts.media_url+"elenco.png' alt='unordered list' /></a>\n";
140            h+="    <a href='#' class='link'><img style='width:12px;height:12px;' class='sethover' src='"+opts.media_url+"link.png' alt='link' /></a>\n";
141            //h+="    <a href='#' class='image'><img src='"+opts.media_url+"image.png' alt='image' /></a>\n";
142            h+="    <a href='#' class='disable'><img style='width:12px;height:12px;' class='sethover' src='"+opts.media_url+"cancel.png' alt='close rte' /></a>\n";
143            //tb+="</p>";
144            
145            h+="</div>";
146            h+="</div>";
147        	
148        	
149            var tb = $(
150				h
151            );
152			
153
154            $('select', tb).change(function(){
155                var index = this.selectedIndex;
156                if( index!=0 ) {
157                    var selected = this.options[index].value;
158                    formatText("formatblock", '<'+selected+'>');
159                }
160            });
161            $('.bold', tb).click(function(){ formatText('bold');return false; });
162            $('.italic', tb).click(function(){ formatText('italic');return false; });
163            $('.unorderedlist', tb).click(function(){ formatText('insertunorderedlist');return false; });
164            $('.link', tb).click(function(){
165                var p=prompt("URL:");
166                if(p)
167                    formatText('CreateLink', p);
168                return false; });
169
170            $('.image', tb).click(function(){
171                var p=prompt("image URL:");
172                if(p)
173                    formatText('InsertImage', p);
174                return false; });
175
176            $('.disable', tb).click(function() {
177                disableDesignMode();
178                var edm = $('<a class="rte-edm" href="#">Enable design mode</a>');
179                tb.empty().append(edm);
180                edm.click(function(e){
181                    e.preventDefault();
182                    enableDesignMode();
183                    // remove, for good measure
184                    $(this).remove();
185                });
186                return false;

187            });
188
189			$(".sethover",tb).hover(function(e){
190				a = $(this).attr("src");
191				b = a.replace(".png","_roll.png");
192				$(this).attr("src",b);
193			},function(e){
194				a = $(this).attr("src");
195				b = a.replace("_roll.png",".png");
196				$(this).attr("src",b);
197				
198			});
199
200
201            // .NET compatability
202            if(opts.dot_net_button_class) {
203                var dot_net_button = $(iframe).parents('form').find(opts.dot_net_button_class);
204                dot_net_button.click(function() {
205                    disableDesignMode(true);
206                });
207            // Regular forms
208            } else {
209                $(iframe).parents('form').submit(function(){
210                    disableDesignMode(true);
211                });
212            }
213
214            var iframeDoc = $(iframe.contentWindow.document);
215
216            var select = $('select', tb)[0];
217            iframeDoc.mouseup(function(){
218                setSelectedType(getSelectionElement(), select);
219                return true;
220            });
221
222            iframeDoc.keyup(function() {
223                setSelectedType(getSelectionElement(), select);
224                var body = $('body', iframeDoc);
225                if(body.scrollTop() > 0) {
226                    var iframe_height = parseInt(iframe.style['height'])
227                    if(isNaN(iframe_height))
228                        iframe_height = 0;
229                    var h = Math.min(opts.max_height, iframe_height+body.scrollTop()) + 'px';
230                    iframe.style['height'] = h;
231                }
232                return true;
233            });
234
235            return tb;
236        };
237
238        function formatText(command, option) {
239            iframe.contentWindow.focus();
240            try{
241                iframe.contentWindow.document.execCommand(command, false, option);
242            }catch(e){
243                //console.log(e)
244            }
245            iframe.contentWindow.focus();
246        };
247
248        function setSelectedType(node, select) {
249            while(node.parentNode) {
250                var nName = node.nodeName.toLowerCase();
251                for(var i=0;i<select.options.length;i++) {
252                    if(nName==select.options[i].value){
253                        select.selectedIndex=i;
254                        return true;
255                    }
256                }
257                node = node.parentNode;
258            }
259            select.selectedIndex=0;
260            return true;
261        };
262
263        function getSelectionElement() {
264            if (iframe.contentWindow.document.selection) {
265                // IE selections
266                selection = iframe.contentWindow.document.selection;
267                range = selection.createRange();
268                try {
269                    node = range.parentElement();
270                }
271                catch (e) {
272                    return false;
273                }
274            } else {
275                // Mozilla selections
276                try {
277                    selection = iframe.contentWindow.getSelection();
278                    range = selection.getRangeAt(0);
279                }
280                catch(e){
281                    return false;
282                }
283                node = range.commonAncestorContainer;
284            }
285            return node;
286        };
287        
288        // enable design mode now
289        enableDesignMode();
290
291    }); //return this.each
292    
293    }; // rte
294
295} // if
296
297})(jQuery);