Changeset 45
- Timestamp:
- 11/03/06 17:11:55 (4 years ago)
- Location:
- branches/jf.hovinne/0.3
- Files:
-
- 4 modified
-
index.html (modified) (1 diff)
-
wymeditor/iframe.html (modified) (2 diffs)
-
wymeditor/wymeditor.html (modified) (1 diff)
-
wymeditor/wymeditor.js (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
-
branches/jf.hovinne/0.3/index.html
r43 r45 4 4 <title>WYMeditor</title> 5 5 <style type="text/css"> 6 .wym editor_iframe { width: 600px; }7 .wym editor_menu ul { padding:0; margin: 0; }8 .wym editor_menu li { list-style: none; float: left; margin-right: 0.7em; }9 .wym editor_content { clear: both; }6 .wym_iframe { width: 75%; } 7 .wym_menu ul { padding:0; margin: 0; } 8 .wym_menu li { list-style: none; float: left; margin-right: 0.7em; } 9 .wym_content { clear: both; } 10 10 </style> 11 11 <script type="text/javascript" src="wymeditor/jquery.js"></script> 12 12 <script type="text/javascript" src="wymeditor/wymeditor.js"></script> 13 <script type="text/javascript"> 14 $(function() { 15 16 //create wymeditor instance(s) 17 //we replace each matched element by a Wymeditor instance 18 //this code is customizable 19 20 var elements=$(".wymeditor"); 21 var options = { 22 htmlToInsert: "<div class='wymeditor'></div>", 23 pageToLoad: "wymeditor/wymeditor.html", 24 iframeClass: ".wym_iframe", 25 execClass: ".wym_exec", 26 toggleClass: ".wym_toggle" 27 } 28 29 $(elements).each(function(i) { 30 var wymeditor=new Wymeditor($(this),i,options); 31 }); 32 33 }); 34 </script> 13 35 </head> 14 36 15 37 <body> 16 38 <textarea id="txt1" rows="8" cols="40" class="wymeditor"><p>First textarea !</p></textarea><br/> 17 <textarea id="txt2" rows="8" cols="40" class="wymeditor"><p>Second textarea</p></textarea> 39 <textarea id="txt2" rows="8" cols="40" class="wymeditor"><p>Second textarea</p></textarea><br /> 40 <input type="text" id="txt3" class="wymeditor" value="<p>First input text</p>" /> 18 41 </body> 19 42 -
branches/jf.hovinne/0.3/wymeditor/iframe.html
r43 r45 9 9 function init() 10 10 { 11 document.body.innerHTML=window.parent.wym editor_iframeGetContent();11 document.body.innerHTML=window.parent.wym_instance().html(); 12 12 document.designMode="on"; 13 13 if(window.parent.jQuery.browser.mozilla) document.execCommand("styleWithCSS",'',false); … … 15 15 </script> 16 16 </head> 17 <body c lass="wymeditor_iframe_body" contentEditable="true" onload="init()"></body>17 <body contentEditable="true" onload="init()"></body> 18 18 </html> -
branches/jf.hovinne/0.3/wymeditor/wymeditor.html
r42 r45 1 <div class="wymeditor_menu"> 2 <ul> 3 <li><a href="#" onClick="wymeditor_execCom(this,'Bold')">Strong</a></li> 4 <li><a href="#" onClick="wymeditor_execCom(this,'Italic')">Emphasis</a></li> 5 <li><a href="#" onClick="wymeditor_execCom(this,'Superscript')">Superscript</a></li> 6 <li><a href="#" onClick="wymeditor_execCom(this,'Subscript')">Subscript</a></li> 7 <li><a href="#" onClick="wymeditor_execCom(this,'InsertOrderedList')">Ordered List</a></li> 8 <li><a href="#" onClick="wymeditor_execCom(this,'InsertUnorderedList')">Unordered List</a></li> 9 <li><a href="#" onClick="wymeditor_execCom(this,'Undo')">Undo</a></li> 10 <li><a href="#" onClick="wymeditor_execCom(this,'Redo')">Redo</a></li> 1 <div class="wym_menu"> 2 <ul class="wym_execs"> 3 <li><a href="#" class="wym_exec" name="Bold">Strong</a></li> 4 <li><a href="#" class="wym_exec" name="Italic">Emphasis</a></li> 5 <li><a href="#" class="wym_exec" name="Superscript">Superscript</a></li> 6 <li><a href="#" class="wym_exec" name="Subscript">Subscript</a></li> 7 <li><a href="#" class="wym_exec" name="InsertOrderedList">Ordered List</a></li> 8 <li><a href="#" class="wym_exec" name="InsertUnorderedList">Unordered List</a></li> 9 <li><a href="#" class="wym_exec" name="Undo">Undo</a></li> 10 <li><a href="#" class="wym_exec" name="Redo">Redo</a></li> 11 <li><a href="#" class="wym_toggle">Toggle</a></li> 11 12 </ul> 12 13 </div> 13 <div class="wym editor_content">14 <iframe src="wymeditor/iframe.html" class="wym editor_iframe"></iframe>14 <div class="wym_content"> 15 <iframe src="wymeditor/iframe.html" class="wym_iframe"></iframe> 15 16 </div> 16 <div class="wymeditor_submit">17 <ul>18 <li><a href="#" onClick="wymeditor_submit(this)">Submit</a></li>19 </ul>20 </div> -
branches/jf.hovinne/0.3/wymeditor/wymeditor.js
r44 r45 1 1 /* WYMeditor - http://www.wymeditor.org/ */ 2 2 3 var wymeditor_content=new Array(); 4 var wymeditor_counter=-1; 3 //Wymeditor object 4 function Wymeditor(elem,index,options) { 5 5 6 function wymeditor_iframeGetContent() 7 { 8 wymeditor_counter++; 9 return(wymeditor_content[wymeditor_counter]); 6 var _html=null; 7 var _editor=null; 8 var _wymeditor=this; 9 10 this.version = "0.3-alpha-002"; 11 this.element = elem; 12 13 this.init = function() { 14 15 this.html(elem.val()); 16 elem.hide(); 17 elem.after(options.htmlToInsert); 18 wym_instances[index]=this; 19 20 var div_editor=elem.next(); 21 this.editor(div_editor); 22 this.element=elem; 23 24 $(div_editor).load(options.pageToLoad,null,function(){ 25 26 var iframe=$(div_editor).find(options.iframeClass).get(0); 27 var elem=$(div_editor).prev(); 28 var wymeditor=_wymeditor; 29 30 $(div_editor).find(options.execClass).click(function(){ 31 32 wymeditor.execCommand(iframe,$(this).name()); 33 }); 34 35 $(div_editor).find(options.toggleClass).toggle(function(){ 36 37 var html=wymeditor.iframeHtml(iframe); 38 wymeditor.html(html) 39 $(elem).val(html); 40 41 $(elem).toggle(); 42 43 },function(){ 44 45 var html=$(elem).val(); 46 wymeditor.html(html); 47 wymeditor.iframeHtml(iframe,html); 48 49 $(elem).toggle(); 50 }); 51 }); 52 } 53 54 this.init(); 10 55 } 11 56 12 function wymeditor_execCom(elem,cmd,opt) 13 { 14 var div_editor=$(elem).ancestors("div.wymeditor"); 15 var iframe=$(div_editor).find("iframe.wymeditor_iframe").get(0); 16 if(jQuery.browser.mozilla) iframe.contentDocument.execCommand(cmd,'',opt); 57 //Set or Get html property 58 Wymeditor.prototype.html = function(s) { 59 if(s)this._html=s; 60 else return(this._html); 61 } 62 63 //Set or Get iframe innerHTML 64 Wymeditor.prototype.iframeHtml = function(iframe,s) { 65 if(s) { 66 if(jQuery.browser.mozilla) iframe.contentDocument.body.innerHTML=s; 67 else if(jQuery.browser.msie) iframe.contentWindow.body.innerHTML=s; 68 } 69 else { 70 var html=""; 71 if(jQuery.browser.mozilla) html=iframe.contentDocument.body.innerHTML; 72 else if(jQuery.browser.msie) html=iframe.contentWindow.body.innerHTML; 73 return(html); 74 } 75 } 76 77 //Exec command (bold,italic,...) 78 Wymeditor.prototype.execCommand = function(iframe,cmd) { 79 if(jQuery.browser.mozilla) iframe.contentDocument.execCommand(cmd,'',null); 17 80 else if(jQuery.browser.msie) iframe.contentWindow.document.execCommand(cmd); 18 81 } 19 82 20 function wymeditor_submit(elem) 21 { 22 var div_editor=$(elem).ancestors("div.wymeditor"); 23 var iframe=$(div_editor).find("iframe.wymeditor_iframe").get(0); 24 var wymeditor_area=$(div_editor).prev(); 25 26 if(jQuery.browser.mozilla) $(wymeditor_area).val(iframe.contentDocument.body.innerHTML); 27 else if(jQuery.browser.msie) $(wymeditor_area).val(iframe.contentWindow.document.body.innerHTML); 28 29 $(wymeditor_area).show(); 83 //Set or Get editor property 84 Wymeditor.prototype.editor = function(o) { 85 if(o)this._editor=o; 86 else return(this._editor); 30 87 } 31 88 89 //Little hack to set iframe(s) content 90 var wym_instances=new Array(); 91 var wym_counter=-1; 32 92 33 jQuery.wymeditor = { 34 35 build : function(options) { 36 37 var settings = { 38 appendCode: "<div class='wymeditor'></div>", 39 loadPage: "wymeditor/wymeditor.html" 40 }; 41 42 if(options) jQuery.extend(settings,options); 43 44 return this.each(function(i){ 45 46 $(this).after(settings.appendCode); 47 wymeditor_content[i]=$(this).val(); 48 49 var div_editor=$(this).next(); 50 $(div_editor).load(settings.loadPage); 51 }); 52 } 53 54 }; 55 56 jQuery.fn.wymeditor = jQuery.wymeditor.build; 57 58 59 60 $(function() { 61 62 //hide textareas 63 var wymeditor_area=$("textarea.wymeditor"); 64 $(wymeditor_area).hide(); 65 $(wymeditor_area).wymeditor(); //create wymeditor instance(s) 66 67 }); 68 69 70 93 function wym_instance() 94 { 95 wym_counter++; 96 return(wym_instances[wym_counter]); 97 }
