hi marco

welcome :)
May be you should ask seaside questions to the seaside mailing-list?
Because you will have a better chance to get an answer.

stef


On May 11, 2010, at 10:57 PM, Marco A. Gonzalez wrote:

> Hi, I'm new to Pharo, and think that along with Seaside, it is so well 
> architected that it's compelling me to try it for professional web 
> development.
> 
> I've created a simple web application in Seaside into which I'd like to 
> incorporate a WYSIWYG Javascript editor for the HTML textarea tags so my 
> users can enter stylized text. I've used TinyMCE in the past in my Java-based 
> web apps, and it's been very simple to integrate. See 
> http://tinymce.moxiecode.com/.
> 
> However, I can't get it to work in my Pharo/Seaside web applications. It just 
> doesn't show up in my web browser.
> I hope I've specified everything below clearly, completely and succinctly. 
> Has anyone else incorporated TinyMCE successfully? What am I missing? What am 
> I doing wrong?
> 
> Below are the relevant snippets of code:
> ----
> #updateRoot: anHtmlRoot
>       super updateRoot:anHtmlRoot.
>       
>       "Adds tinyMCE javascript code to the document with a 'script src='      
>       anHtmlRoot addScript: self tinyMCEJavascript.
> 
> #tinyMCEJavascript
>       ^'
> tinyMCE.init({
>       // General options
>       // mode : "textareas",
>       
>       mode : "specific_textareas",
>       editor_selector : "useJavascriptWYSIWYGEditor",
>       
>       theme : "advanced",
>       plugins : 
> "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
> 
>       // Theme options
>       theme_advanced_buttons1 : 
> "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
>       theme_advanced_buttons2 : 
> "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
>       theme_advanced_buttons3 : 
> "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
>       theme_advanced_buttons4 : 
> "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
>       theme_advanced_toolbar_location : "top",
>       theme_advanced_toolbar_align : "left",
>       theme_advanced_statusbar_location : "bottom",
>       theme_advanced_resizing : true,
> 
>       // Example content CSS (should be your site CSS)
>       content_css : "css/example.css",
> 
>       // Drop lists for link/image/media/template dialogs
>       template_external_list_url : "js/template_list.js",
>       external_link_list_url : "js/link_list.js",
>       external_image_list_url : "js/image_list.js",
>       media_external_list_url : "js/media_list.js",
> 
>       // Replace values for the template plugin
>       template_replace_values : {
>               username : "Some User",
>               staffid : "991234"
>       }
> });
> '.
> 
> #renderContentOn: html
>       html document addLoadScript:'tinyMCE.init();'.
>       
>       html div class: 'AmagaviBNIEventEditor'; with: [
>               html form multipart with: [
>                       html table class: 'rolodex'; with:[
>                       
>                               html tableRow:[
>                                       html tableHeading:'Descriptive text'.
>                                       html tableData:[
>                                               html textArea
>                                                       "class: 'content';"
>                                                       class: 
> 'useJavascriptWYSIWYGEditor';
>                                                       columns: '60';
>                                                       rows: '5';
>                                                       callback: [ 
> :editedValue | self event descriptiveText: editedValue ];
>                                                       value: self event 
> descriptiveText.
>                                       ].
>                               ]. "tableRow"
>                       ]. "table"
>               
>                       html submitButton
>                               callback: [ self save. ];
>                               value: 'Save'.
>                       
>                       html submitButton
>                               callback: [self cancel];
>                               value: 'Cancel'.
>               ]. "form"
>       ]. "div"
> 
> ----
> 
> Using my web browser, when I "view source" to see the HTML, I appropriately 
> see the following HTML in between the <head></head> tags:
>       <script type="text/javascript" 
> src="/amagaviBNI?_s=UOMr33WyYGqoSDx0"></script>
> 
> Copy/Pasting the "/amagaviBNI?_s=UOMr33WyYGqoSDx0" in my browser 
> appropriately shows the tinyMCE.init() javascript method that is referenced 
> by #tinyMCEJavascript.
> 
> The textarea HTML appropriately shows
>       <textarea rows="5" cols="60" class="useJavascriptWYSIWYGEditor" 
> name="5">This is an event. </textarea>
> 
> The body tag looks like this:
>       <body onload="onLoad()">
> 
> ... and right above the closing body tag, the HTML is...
>       <script type="text/javascript">/*<![CDATA[*/function 
> onLoad(){tinyMCE.init();}/*]]>*/</script></body>
> 
> I'm using PharoCore1.0, Latest update: #10517 on a Macintosh MacBookPro with 
> OS X v10.5.8.
> Using "printIt" on SmalltalkImage current vmVersion, I get
> 'Squeak3.8.1 of ''28 Aug 2006'' [latest update: #6747] Squeak VM 4.2.2b1'
> 
> I think I'm using Seaside 3.0a5 since I have a window entitled "Seaside 
> 3.0a5" but since I've used the World menu > System > Software update to 
> update my system, I don't know if it's been updated. I also don't know what 
> to evaluate to determine what actual version of Seaside I'm running so I'd be 
> grateful if someone could tell me how to do that too. If there's a newer 
> version of Seaside that I've not been getting using "Software update", then 
> would you tell me how to get the most recent, "usable" version also?
> 
> Finally, thanks to everyone who has developed all the above-mentioned 
> components, as well as the people using Pharo and Seaside and have been 
> posting and answering questions. I hope to get to a point of expertise where 
> I can contribute as well.
> 
> - Marco A.
> ---------
> Marco A. Gonzalez
> web: http://www.amagavi.com/
> 
> 
> _______________________________________________
> Pharo-users mailing list
> [email protected]
> http://lists.gforge.inria.fr/cgi-bin/mailman/listinfo/pharo-users


_______________________________________________
Pharo-users mailing list
[email protected]
http://lists.gforge.inria.fr/cgi-bin/mailman/listinfo/pharo-users

Reply via email to