https://forum.world.st/Request-help-in-using-any-WYSIWYG-Javascript-editor-preferably-TinyMCE-tp2186507p2194553.html
On 11 May 2010 23:57, Marco A. Gonzalez <
> 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
>
[hidden email]
>
http://lists.gforge.inria.fr/cgi-bin/mailman/listinfo/pharo-users>
>