Smalltalk › Pharo › Pharo Smalltalk Users

Request help in using any WYSIWYG Javascript editor, preferably TinyMCE

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

4 messages Options

Marco A.

Request help in using any WYSIWYG Javascript editor, preferably TinyMCE

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

Stéphane Ducasse

Re: Request help in using any WYSIWYG Javascript editor, preferably TinyMCE

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
> [hidden email]
> http://lists.gforge.inria.fr/cgi-bin/mailman/listinfo/pharo-users

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

Igor Stasenko

Re: Request help in using any WYSIWYG Javascript editor, preferably TinyMCE

In reply to this post by Marco A.

I don't know if it would help,
but i think FireBug (for Firefox browser) will make your life much easier,
to debug things and determine why it not works :)

On 11 May 2010 23:57, Marco A. Gonzalez <[hidden email]> 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
> [hidden email]
> http://lists.gforge.inria.fr/cgi-bin/mailman/listinfo/pharo-users
>
>

--
Best regards,
Igor Stasenko AKA sig.

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

Miguel Cobá

Re: Request help in using any WYSIWYG Javascript editor, preferably TinyMCE

In reply to this post by Marco A.

El mar, 11-05-2010 a las 16:57 -0400, Marco A. Gonzalez escribió:

> 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?

I use tinyMCE but I don't import the javascript code into the Seaside
app. I put them on the web server in a given path and then in the
Seaside code I put a reference to it:

updateRoot: anHtmlRoot
super updateRoot: anHtmlRoot.
anHtmlRoot javascript
resourceUrl: '/javascript/tiny_mce/tiny_mce.js'

I use a resource url but you can use a full path by using url: (I
think).

Then in the text area component:

script
^ '
tinyMCE.init({
mode : "textareas",
theme : "advanced"
});
'

and then something like:

renderContentOn: html
html label with: self session l10n text.
html break.
html textArea
class: 'span-13';
rows: 6;
on: #text of: self note

And this activates the editor on all the text areas on the page.

Hope this help.

--
Miguel Cobá
http://miguel.leugim.com.mx

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