wxWebView + Javascript

Natulux · Post by **Natulux** » Fri Aug 18, 2017 6:01 am

Hey guys,

I recently wrote an HTML-Editor as a tool to create email templates. I used an HTML file with JQuery(Javascript) and TinyMce as 'plugin'.
I now want to display it in the wxWebView to have it embedded in my wxWidgets project. So I took the wxWebView sample from wxWidgets 3.1.x and came to realize, that it only displays the html part of my file. I tried to run functions of my file with

Code: Select all

wxString sJsCode = wxT("InitTinyMce();");
m_browser->RunScript(sJsCode);

but it's not working this way.
The JQuery Part initializes the Editor-Include from TinyMCE like this:

Code: Select all

<head>
  <title>TinyMCE Test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<script src="jquery-3.2.1.min.js"></script>
	<script src="jquery.tinymce.min.js"></script>
	<script src="tinymce.min.js"></script>

  <script type="text/javascript">	

	function InitTinyMce()
	{

    tinyMCE.init({
	mode : "specific_textareas",
    editor_selector : "mceEditor",
  	
	selector: 'textarea',  // change this value according to your HTML
	language: 'de',

	valid_elements: "@[id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|"
+ "onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|"
+ "onkeydown|onkeyup],a[rel|rev|charset|hreflang|tabindex|accesskey|type|"
+ "name|href|target|title|class|onfocus|onblur],b,i,strike,u,"
+ "#p,-ol[type|compact],-ul[type|compact],-li,br,img[longdesc|usemap|"
+ "src|border|alt=|title|hspace|vspace|width|height|align],-sub,-sup,"
+ "-blockquote,-table[border=0|cellspacing|cellpadding|width|frame|rules|"
+ "height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|"
+ "height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,"
+ "#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor"
+ "|scope],#th[colspan|rowspan|width|height|align|valign|scope],caption,-div,"
+ "-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],-font[face"
+ "|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite],"
+ "object[classid|width|height|codebase|*],param[name|value|_value],embed[type|width"
+ "|height|src|*],script[src|type],map[name],area[shape|coords|href|alt|target],bdo,"
+ "button,col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|"
+ "valign|width],dfn,fieldset,form[action|accept|accept-charset|enctype|method],"
+ "input[accept|alt|checked|disabled|maxlength|name|readonly|size|src|type|value],"
+ "kbd,label[for],legend,noscript,optgroup[label|disabled],option[disabled|label|selected|value],"
+ "q[cite],samp,select[disabled|multiple|name|size],small,"
+ "textarea[cols|rows|disabled|name|readonly],tt,var,big",


	plugins: [
    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars',
    'insertdatetime nonbreaking save table contextmenu directionality',
    'emoticons paste textcolor colorpicker textpattern imagetools codesample toc' ],
    toolbar1: 'undo redo | insert | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'print preview | forecolor backcolor emoticons | fontselect |  fontsizeselect ',
    
  image_advtab: false,
    });
	}
</script>
	
<script type="text/javascript">	InitTinyMce()</script>
	
</head>

Several questions out of this:
- Is it true, that I can run JS with RunScript(wxString), but it needs to be all in C++ (no access to external HTML-File, like calling a function would be)?
- If so, why is the TinyMCE browser example running, if I start the wxWebView sample and navigate to: https://www.tinymce.com/ or https://www.tinymce.com/docs/demo/basic-example/?
- What then is with my includes (sources) from html/js? Do I somehow have to load or link it to C++?

Code: Select all

<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.tinymce.min.js"></script>
<script src="tinymce.min.js"></script>

[EDIT]: I basically dont want to change the source of the displayed content, thus I need no address bar. Is there another wxElement, which is even more suitable for my purpose? (Maybe wxHtmlWindow?)

[EDIT2]: ok, I found out that the source include somehow worked, because this returns an object only if I dont change "tinyMCE":

Code: Select all

m_browser->RunScript("if (tinyMCE) alert(tinyMCE); else alert(\"No tiny\");");

and tinyMCE comes from an source "include" in my html file. If I call the

Code: Select all

sJsInit = "tinyMCE.init({mode : \"textareas\", theme : \"simple\"});";
m_browser->RunScript(sJsInit);

it even replaces my textarea - unfortunately only with a big blanc.
I am not sure, what the calling function is, because I call the method "init" of "tinyMCE", which I have not written myself in C++. And since I can't call my own functions from my html file, I'm a little confused, that it had an effect at all...

Have a pleasant day
Natu

Post by **doublemax** » Fri Aug 18, 2017 9:08 am

If you're under Windows, this code taken from the "webview" sample is important:

Code: Select all

{
   wxLogNull nolog;   // suppress error messages
   wxRegKey rk( wxT("HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\Main\\FeatureControl\\FEATURE_BROWSER_EMULATION") );
   rk.SetValue( wxT("webview.exe"), 11001);
}

It ensures that the embedded web control runs as IE 11. Without it, you will only get IE7. The name of the exe must match yours.

Load https://www.whatismybrowser.com inside your app to check if it worked.

Natulux · Post by **Natulux** » Fri Aug 18, 2017 11:38 am

Hey doublemax,

thank you. This solved quite a bit of problems, even though I try to be backward compatible and cross platform.
Do you have any experience, as to what happens, if this code runs on iOS/iOSX? Is it just ignored (hopefully)?
Which browser (version) is used on iOS?

Also Im havin an error, which prevents me from using the editor now:

An error occurred loading javascript:(function(){
document.open();
document.domain="";
var ed = window.parent.tinymce.get("mce_0");
document.write(ed.iframeHTML);
document.close();
ed.initContentBody(true);})()

It seems to be an error from TinyMCE itself, though Im really not sure, what of the shown code is the source of this error.
[EDIT:]Clever me! There is the logging window from the sample, which gives even more usefull output:

13:39:14: Navigation complete; url='C:\wxWidgets-3.1.0\projects\webview\HTML-Editor\tinymce\js\tinymce\index.html'
13:39:14: Title changed; title='TinyMCE Test'
13:39:14: Navigation request to 'javascript:(function(){document.open();document.domain="";var ed = window.parent.tinymce.get("mce_0");document.write(ed.iframeHTML);document.close();ed.initContentBody(true);})()' (target='')
13:39:15: Error; url='javascript:(function(){document.open();document.domain="";var ed = window.parent.tinymce.get("mce_0");document.write(ed.iframeHTML);document.close();ed.initContentBody(true);})()', error='wxWEBVIEW_NAV_ERR_CONNECTION ()'
13:39:15: Title changed; title='TinyMCE Test'

[EDIT2]: I knew, I had seen this message somewhere before:
http://trac.wxwidgets.org/ticket/15639
It seems to be an known error since 2013. Seems like the webview just died as alternative.

Greetings
Natu

Post by **doublemax** » Fri Aug 18, 2017 12:26 pm

I'm not yet sure it's a webview problem. Does TinyMCE work in any browser when you load it locally?

Do you have any experience, as to what happens, if this code runs on iOS/iOSX? Is it just ignored (hopefully)?

If this code is used like this in the sample, it's probably ok. Although i personally would wrap it in a "#ifdef __WXMSW__"

coderrc · Post by **coderrc** » Fri Aug 18, 2017 12:47 pm

the IE emulator stuff is extraordinarily picky about what it will and will not do.

try changing the registry key to each of the values here https://msdn.microsoft.com/library/ee33 ... _emulation
starting from 0x1F40 and working your way up

ONEEYEMAN · Post by **ONEEYEMAN** » Fri Aug 18, 2017 2:19 pm

Hi,
Don't know if you are aware:
There is a JavaScript integration GSoC project going on this year. When its completed the JS support will be complete on all 3 major platforms.
If you check the GitHub repo I'm sure you will see the branch that belongs to the project and which you can clone. You can also check wxWiki for any and all updates.
Unfortunately, it will be available only in 3.2. But I'm almost sure you will be able to just grab the sources, put them inside your project and recompile.

In the meantime try to clone that branch and give the new wxWebView a shot. Jose Lorenzo (a student who did the coding) would be very much interested in if you give him some {positive} feedback.

Thank you.

Natulux · Post by **Natulux** » Mon Aug 21, 2017 6:47 am

doublemax wrote:I'm not yet sure it's a webview problem. Does TinyMCE work in any browser when you load it locally?

Yes, if I start the used index.html manually (and locally), it runs flawlessly.

coderrc wrote:the IE emulator stuff is extraordinarily picky about what it will and will not do.
try changing the registry key to each of the values here https://msdn.microsoft.com/library/ee33 ... _emulation
starting from 0x1F40 and working your way up

I'll try that and report here, thanks.

ONEEYEMAN wrote:Hi,
Don't know if you are aware:
There is a JavaScript integration GSoC project going on this year. When its completed the JS support will be complete on all 3 major platforms.
If you check the GitHub repo I'm sure you will see the branch that belongs to the project and which you can clone. You can also check wxWiki for any and all updates.
Unfortunately, it will be available only in 3.2. But I'm almost sure you will be able to just grab the sources, put them inside your project and recompile.

Sooner or later, I will have a look at that, too. Thanks for the hint, I wasn't aware of that. If I can just integrate the new wxWebView into my project, I'd be delighted of course.

Generally the wxWebView version 3.1 is able to display the ckEditor (competitor of TinyMCE) correctly, so that might be the quickest solution for now.

I report back as soon as I have updates on the topic. Have my thanks, guys!
Natu

Natulux · Post by **Natulux** » Wed Nov 15, 2017 8:11 am

Hey again,

after having some other projects, I am back at this topic.
I checked out wxWidgets from Github (code, that is going to belong to wxWidgets 3.2 I guess) and grabbed that new webview functionality.
Now RunScript returns a value for me, just as I wished.
c++

Code: Select all

wxString s_htmlContent = RunScript("getHtmlData();");

html/js

Code: Select all

function getHtmlData() {
	var myinstances = [];

//this is the foreach loop
for(var i in CKEDITOR.instances) {

   /* this  returns each instance as object try it with alert(CKEDITOR.instances[i]) */
	CKEDITOR.instances[i]; 
   
	/* this returns the names of the textareas/id of the instances. */
	CKEDITOR.instances[i].name;

	/* returns the initial value of the textarea */
	CKEDITOR.instances[i].value;  
 
   /* this updates the value of the textarea from the CK instances.. */
   CKEDITOR.instances[i].updateElement();

   /* this retrieve the data of each instances and store it into an associative array with
	   the names of the textareas as keys... */
   return myinstances[CKEDITOR.instances[i].name] = CKEDITOR.instances[i].getData(); 

}

};

Using the ckeditor, I load my html at startup using webview as a display.

I think this is fine enough. The only downsides:
I need to carry a directory with html and js files with me, plus I cant include my webview-editor code into my main project, because it has to be built with the experimental build of wxWidgets and my main project is not. I just load the editor as a compiled app and use files to return values.
When wxWidgets 3.2 is stable, I may update both and work them into one project as intended.

Thanks guys.
Natu

ONEEYEMAN · Post by **ONEEYEMAN** » Wed Nov 15, 2017 3:36 pm

Hi,
I have a suggestion.
Could you please send an e-mail to the wx-dev ML indicating that you just tried the new JS code along with wxWebView and it works correctly?

First of all it will prove that the work of the GSoC student (Jose Lorenzo) was good, and second it will encourage core devs (Vadim, mostly) to speed up the release so no one will screw things up). Moreover it will indicate that the new functionality will be used at least i one project and it was tested in the real life application.

Thank you.

Natulux · Post by **Natulux** » Wed Dec 06, 2017 2:04 pm

Hey Oneeyeman,

I guess I could do that. I need some more testing though. I develop under win10x64 and have some trouble with the RunScript in win7. But that might as well be the JS functions im calling:
func1:

Code: Select all

CKEDITOR.instances.editor.insertHtml

func 2:

Code: Select all

return myinstances[CKEDITOR.instances[i].name] = CKEDITOR.instances[i].getData();

func 3:

Code: Select all

var edt = CKEDITOR.instances['editor'];
if (edt) {
	 edt.resize('auto', height);
}

I need to check, if those functions should be available for the internet explorer versions ( 8, 9 ) back in the day which I might find on a Win7 system.
If those functions are supposed to work, I should try calling them from the old RunScript and/or with another browser enginge (maybe I finally get chromium up and running).
My Win7 test machine show for example, that I cant even load my html editor in the native installed IE, no need to try my webview then ...

Have a good day
Natu

eranon · Post by **eranon** » Wed Dec 06, 2017 3:36 pm

Natulux wrote: I recently wrote an HTML-Editor as a tool to create email templates. I used an HTML file with JQuery(Javascript) and TinyMce as 'plugin'.
I now want to display it in the wxWebView to have it embedded in my wxWidgets project. So I took the wxWebView sample from wxWidgets 3.1.x and came to realize, that it only displays the html part of my file. I tried to run functions of my file with
Code: Select all
wxString sJsCode = wxT("InitTinyMce();");
m_browser->RunScript(sJsCode);
but it's not working this way.

Some years ago (2009) I wrote a TinyMCE plugin (EasyImage) and a tool (BlosHome to manage a blog powered by the Blosxom engine) embedding it for local/offline editing. I don't remember the barriers I encountered (and worked around), but it's a fact TinyMCE was primarily designed for online working.

For sure, it certainly has changed (a lot or not, don't know) since 2009 (eg. it didn't relay on JQuery), but there's some chance the overall concept remained. You can donwload BlosHome at http://www.ffh-lab.com/bloshome.html?en and take a look at the local HTML template I used (in the "timy_mce" subdir) and code (in VB6, so nothing incomprehensible) around for launching/initialization.

Also, I remember I had to work around its usual working to be able to save the TinyMCE content (ie. blog article) locally.

Natulux · Post by **Natulux** » Thu Dec 07, 2017 8:26 am

Thank you eranon,

I never heard about Blosxom to be honest, so it might be worth to check that out.
Just for now I fear, that I have to go with my solution of ckeditor as far as I can, because I need to finish that project for now.
But it sounds like you have had about the same problems that I encountered, eg. saving the content locally. I was able to solve that in my project, but as of now it only works only for IE11 backend of webview. On a Win7 system, it will crash, which is not acceptable.

Does anybody of you know, if there is a new backend of chromium already? When I try to change my backend to chromium, I get the compiler error:

error C2259: 'wxWebViewChromium': Instanz von abstrakter Klasse kann nicht erstellt werden (can not create instance of abstract class)
aufgrund folgender Member: (following member causes it)
"bool wxWebView::RunScript(const wxString &,wxString *)": ist abstrakt (is abstract)
c:\wxWidgets_webview\include\wx/webview.h(165): Siehe Deklaration von 'wxWebView::RunScript'

And the compiler is right. "RunScript" among other functions of the webview are heavily altered, most (or all) virtual functions are flagged with "wxOVERRIDE" in the new "webview_ie.h". Do I need to rewrite "webview_chromium.h" myself? :-/

And if I do, there is one thing I dont really understand. Using the IE backend, I need an Internetexplorer (Trident) installed on the system. If I now take chromium instead, do I need Google Chrome installed on the target host in order to run my script? Can't I provide a portable browser for the webview myself? Because I can't get chrome rolled out to all computers, which want to execute my script.

Thank you.
Natu

Natulux · Post by **Natulux** » Thu Dec 07, 2017 8:44 am

ONEEYEMAN wrote:Hi,
I have a suggestion.
Could you please send an e-mail to the wx-dev ML indicating that you just tried the new JS code along with wxWebView and it works correctly?

Actually, I wasn't able to find an Email Adress or similar to contact Vadim directly. Do you have a hint for me? Maybe PM me, if you know it?

Thanks
Natu

Post by **doublemax** » Thu Dec 07, 2017 9:01 am

https://groups.google.com/forum/#!forum/wx-users

eranon · Post by **eranon** » Thu Dec 07, 2017 12:39 pm

Natulux wrote:I never heard about Blosxom to be honest, so it might be worth to check that out.
Just for now I fear, that I have to go with my solution of ckeditor as far as I can, because I need to finish that project for now.
But it sounds like you have had about the same problems that I encountered, eg. saving the content locally. I was able to solve that in my project, but as of now it only works only for IE11 backend of webview. On a Win7 system, it will crash, which is not acceptable.

Blosxom is a lightweigth blog engine written in Perl. It didn't been updated since a very long time, but its concept (no database, small base, lot of plugins) is so simple (awesome) that there's no necessary update... It should work while Perl interpreter is provided by the hosting companies

Well, but back to your topic: yes, about TinyMCE, init and saving (w/o local web server) were the two main obstacles.

About the crash, did you try every possibility of IE emulation? Again, I don't know the current status of TinyMCE, but I remember that some years ago it better worked with old IE rather than most recent ones. So, maybe (and even if it's not really a "go forward" spirit) it could worth trying with older possibilities of IE emulation.

Also, a completely other way would be to embed a light web server in you app

wxWidgets Discussion Forum

wxWebView + Javascript Topic is solved

wxWebView + Javascript

Re: wxWebView + Javascript

Re: wxWebView + Javascript

Re: wxWebView + Javascript

Re: wxWebView + Javascript

Re: wxWebView + Javascript

Re: wxWebView + Javascript

Re: wxWebView + Javascript

Re: wxWebView + Javascript

Re: wxWebView + Javascript

Re: wxWebView + Javascript

Re: wxWebView + Javascript

Re: wxWebView + Javascript

Re: wxWebView + Javascript

Re: wxWebView + Javascript