Posted by
Marco A. on
May 11, 2010; 8:57pm
URL: https://forum.world.st/Request-help-in-using-any-WYSIWYG-Javascript-editor-preferably-TinyMCE-tp2186507.html
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.
_______________________________________________
Pharo-users mailing list
[hidden email]
http://lists.gforge.inria.fr/cgi-bin/mailman/listinfo/pharo-users