Page 2 of 3

Re: best solution for creating formatted text in the client?

PostPosted: Tue Jul 08, 2014 10:14 am
by tgs
Hi Harjo,
thank you again for your support!
I think I will get this working, but I'm struggeling on the first step: Installing the svy Module. I can't find any documentation about that.... This is the main problem for me...
Regards
Thomas

Re: best solution for creating formatted text in the client?

PostPosted: Tue Jul 08, 2014 11:13 am
by david
Maybe it's because nobody is investing resources into JavaFX....

Re: best solution for creating formatted text in the client?

PostPosted: Tue Jul 08, 2014 12:25 pm
by tgs
Hi David,
this can be, but I don't understand what this has to do with the missing documentation on Servoy GitHub?
I can download the svyJFXWebView Module, but how can I integrate/install it?
Regards
Thomas

Re: best solution for creating formatted text in the client?

PostPosted: Wed Jul 09, 2014 10:49 am
by LXS
You have to add svyJFXWebView and svyUtils (as well from Servoy GitHub) as modules to your solution.
Then you put a tabless panel to a form and call

var webView = new scopes.svyJFXWebView.WebViewPanel(elements.webView); // elements.webView is your tab panel
webView.load(urlToYourTinyMCEInstallation);

Re: best solution for creating formatted text in the client?

PostPosted: Wed Jul 09, 2014 11:29 am
by tgs
LXS wrote:You have to add svyJFXWebView and svyUtils (as well from Servoy GitHub) as modules to your solution.

Hi Alexander,
I have downloaded the svyJFXWebView from Servoy GitHub, but how can I add this as module in my solution?
I can't import this as a solution and than add as a module because it is a folder with objects and not a solution file.

Once more, I'm struggeling on the first step to add the module in my solution.

Regards
Thomas

Re: best solution for creating formatted text in the client?

PostPosted: Wed Jul 09, 2014 12:09 pm
by LXS
I've directly checked out the modules with the SVN connector in my Servoy.
In the SVN Repositories view i've added a new repository (you can copy the repository url from Servoy GitHub - https://github.com/Servoy/svyJFXWebView)

I hope this can help you!

Regards
Alex

Re: best solution for creating formatted text in the client?

PostPosted: Wed Jul 09, 2014 1:17 pm
by tgs
Hi Alex,
this should help me! Thank you!

To add the modules via SVN now I have to install the SVN stuff in Servoy and JavaHL on Mac (OSX 10.9, Java 1.7.0_60)... To get this running is a nightmare, but this is another topic...

Regards
Thomas

Edit:
I could now install the modules from Servoy GitHub in my Servoy 7.4.1 solution successful on the Mac:
- installing 'http://subclipse.tigris.org/update_1.6.x'
- connecting 'SVN interface: SVNKit (Pure Java) ..)
- added the SVN Repositories: svyJFXWebView & svyUtils
- checked it out and added as Modules

Re: best solution for creating formatted text in the client?

PostPosted: Sun Jul 13, 2014 7:23 pm
by tgs
LXS wrote:var webView = new scopes.svyJFXWebView.WebViewPanel(elements.webView); // elements.webView is your tab panel
webView.load(urlToYourTinyMCEInstallation);

Hi Alex,

the TinyMCE will not run. This is what I get in the Console:
Code: Select all
DEBUG load executed
DEBUG State Changed: SUCCEEDED > READY (location: )
DEBUG webEngineReady: false
DEBUG DocumentProperty Changed: [object HTMLDocument] >
DEBUG State Changed: READY > SCHEDULED (location: /Volumes/iMacOSX/Applications/Servoy741_bc/application_server/tinymce/tinymce.min.js)
DEBUG webEngineReady: false
DEBUG State Changed: SCHEDULED > RUNNING (location: /Volumes/iMacOSX/Applications/Servoy741_bc/application_server/tinymce/tinymce.min.js)
DEBUG webEngineReady: false
ERROR Exception loading
DEBUG State Changed: RUNNING > FAILED (location: /Volumes/iMacOSX/Applications/Servoy741_bc/application_server/tinymce/tinymce.min.js)
DEBUG webEngineReady: true

Do you have a hint what could be wrong respectively how do I get it working? This would be very appreciated.

Other content like http-urls are working well.

Regards
Thomas

Re: best solution for creating formatted text in the client?

PostPosted: Mon Jul 14, 2014 9:47 am
by LXS
what url are you calling for you tineMce?
Does this url work, if you call it directly in the browser, not Servoy?
I've created a html file, which configures and loads the TinyMce and load this html-file in the JFXWebView.
It looks like this:

http://localhost:8080/tinymce/tiny.html
(i've put the tinymce files to <servoy>/application_server/server/webapps/ROOT/tinymce)

Re: best solution for creating formatted text in the client?

PostPosted: Mon Jul 14, 2014 9:50 am
by LXS
This is my tiny.html code:

Code: Select all
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">

tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: [
"advlist autolink lists link image charmap preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons paste textcolor fullpage"
    ],
    toolbar1: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",
    toolbar2: "forecolor backcolor emoticons | link image table",
   menubar: "edit insert view format table tools",
    image_advtab: true,
   menubar: "edit insert view format table tools",
    statusbar : false,
   mode : "textareas",
   valid_children : "+body[style]",
   paste_retain_style_properties : "all",
   paste_remove_styles_if_webkit : false,
    setup: function (ed) {
        ed.on('init', function(args) {
            tinyMCE.execCommand('mceFullScreen', true, ed.id);
        });
   }
});
</script>

</head>
<body>

<form method="post" action="somepage">
    <textarea name="content" style="width:100%"></textarea>
</form>
   
</body>
</html>

Re: best solution for creating formatted text in the client?

PostPosted: Mon Jul 14, 2014 10:39 am
by tgs
Hi Alex,
thank you very much for your replys!
The hint for taking the tinyMCE stuff to the webapps/ROOT location was the goal. Now the tinyMCE editor is working as expected.
Also thank you for your html code. It saves a lot of time to setup the editor.

Regards
Thomas

Re: best solution for creating formatted text in the client?

PostPosted: Mon Jul 14, 2014 10:51 am
by LXS
nice to hear the good news! :)

Re: best solution for creating formatted text in the client?

PostPosted: Mon Jul 14, 2014 1:39 pm
by Harjo
@LXS: curious how you set and get(save),the html content

Re: best solution for creating formatted text in the client?

PostPosted: Mon Jul 14, 2014 2:35 pm
by LXS
@Harjo:

get the content:
Code: Select all
fvWebView.executeScriptAndWait("tinyMCE.activeEditor.getContent()");


set the content - here it is important to remove the line breaks and escape the html:
Code: Select all
vHtml = globals.escapeJavaScript(vHtml);
var vScript = "tinyMCE.activeEditor.setContent( '" + vHtml + "' );"
fvWebView.executeScriptLater(vScript);


Code: Select all
function escapeJavaScript(vContent) {
   vContent = utils.stringReplace(vContent, "\n", "");
   vContent = Packages.org.apache.commons.lang.StringEscapeUtils.escapeJavaScript(vContent);
   return vContent;
}


(fvWebView is a form variable)

Re: best solution for creating formatted text in the client?

PostPosted: Tue Jul 15, 2014 5:13 pm
by tgs
Hi Alex,

your code examples are confusing me a bit.
I'm loading the TinyMCE by the onLoad function of the form where the tabless panel element is set.
function onLoad():
Code: Select all
var _textEditor = new scopes.svyJFXWebView.WebViewPanel(elements.tmceEditor);
   _textEditor.load("http://localhost:8080/tmce1.html");

To get the content of the TinyMCE I have to add:
LXS wrote:get the content:
Code: Select all
fvWebView.executeScriptAndWait("tinyMCE.activeEditor.getContent()");

as codeline in the onLoad function?
If yes, this is not working with a form variable like your 'fvWebView'.
And in the tinymce documentation I cannot find the 'tinyMCE.activeEditor.getContent()'. There is only the 'tinymce.selection.activeEditor.getContent()' and '...setContent()'.

As I understand, you will get and set the content to the form variable, or?
LXS wrote:set the content - here it is important to remove the line breaks and escape the html:
Code: Select all
vHtml = globals.escapeJavaScript(vHtml);
var vScript = "tinyMCE.activeEditor.setContent( '" + vHtml + "' );"
fvWebView.executeScriptLater(vScript);

But how is the getting of the tinymce content be executed?
Where are your codelines above are? Also in the 'onLoad' function?

It would be very kind of you to make this more clear.

Thomas