So, I’ve started updating the 30 open source web edition controls I offer over at XDS, as all the Xojo 2015 editions have seemed to break a few of them, and cannot seem to figure out why all of a sudden TinyMCE does not appear correctly. It renders perfectly, and all the functions work as intended, yet the control always re-positions itself negative top and negative left (regardless of where it is placed on the webpage) so that only part of the control exposes itself on the webpage.
If anyone could take a look at the source for the control and find a solution, I, as well as many developers, would greatly appreciate it
Yes. For some reason the div repositions on its own. Besides this control’s instance, I’ve noticed when loading many many custom WebSDK controls simultaneously, errors begin appearing left and right, yet loading a few and using them on their own, no errors will ever appear… not just the controls I’ve devised, but other developer controls as well; almost like something in the framework begins to conflict… all namespaces are unique. The issue first began with the second 2015 release. This one particular code’s source is available at the link provided above. I’ve inspected the tinymce javascript code, and no where in it is any positioning code, merely application of css to the specified div created in the WebWrapperControl. How our why it repositions to a negative x, y position on the page is a mystery and makes no sense.
2015r2?[quote=208023:@Matthew Combatti]…merely application of css to the specified div created in the WebWrapperControl. How our why it repositions to a negative x, y position on the page is a mystery and makes no sense.[/quote]
Are you using the ControlID Property that the framework provides to you or something different?
I’ve just had a look at the release notes. The only thing that it appears could possibly had an affect on controls this manner is case 38284, which fixed a bug in how Namespaces were being created at runtime.
The controlid is being used yes. I’ll take a look at the feedback system for that particular bug #. With tinymce in particular, not much code is required to initialize it…TinyMCE.Init (divname), then the styles are applied to the specified div. Of course, then all the features and addons are implemented and captuted by the events methods. But I’ve stripped the code down to literally the required namespace, javascript setup, and ititialization on the div…maybe 3 lines of code?.. and it fails to work in web edition. The included source above is the full control. I’m surprised that no one else has taken a look to chime in, although most are probably the same developers who’ve requested I attempt to find a fix. I’ve even attemped forcing the positioning via javascript at runtime, but it stays firmly glued in place in every platform, every device. Thanks for looking and your efforts Greg.
I’m taking a look now. I’ve done quite a lot with the WebSDK and I haven’t seen this problem.
First things I noticed was that on your control you need to change the following styles:
position: relative //currently ‘absolute’
left: 74 //currently negative 258
top: 41 //currently negative 163
This puts it in the proper location and renders the control correctly. I’ll do some more digging
[code] Case “Top”
ExecuteJavaScript me.JqeurySelector+".css(‘top’,’"+str(me.Top)+“px’);”
Case “left”
ExecuteJavaScript me.JqeurySelector+".css(‘left’,’"+str(me.left)+“px’);”[/code]
And it throws an error when run:
[quote] Could not execute returned javascript: $ is not defined
Source: var langdir = document.getElementsByTagName(‘body’)[0]; if(langdir) { langdir.removeAttribute(‘dir’); }
var langdir = document.getElementsByTagName(‘body’)[0]; if(langdir) { langdir.setAttribute(‘lang’,‘en’); }
$(’#MI8L9BoG’).css(‘left’,‘74px’);
$(’#MI8L9BoG’).css(‘top’,‘41px’);
$(’#MI8L9BoG’).css(‘left’,’-258px’);
$(’#MI8L9BoG’).css(‘top’,’-163px’);
Xojo.createNamespace(“XDS.jQuery.TinyMCE”);
Xojo.loadLibraries(“http://www.xojodevspot.com/rsds/js/jquery-ui-1.11.0/external/jquery/jquery.js”, function() {
Xojo.loadLibraries(“http://tinymce.cachefly.net/4.1/tinymce.min.js”, function() {
RSCustom.XDS.jQuery.TinyMCE.LP9WDib7_constructor();
});
…
[/quote]
A few things to note about this. Jquery isn’t loaded yet which is why I get this error. I prefer to load Jquery in the header of the app so I can use it right away. Fortunately you can do this using the WebSDK now with the shared hook method “HTMLHeader(CurrentSession as WebSession) as String”
It’s just a recommendation but personally I would add this to your control. I sometimes just have a single webControl that is never placed anywhere and all it does is add Jquery and other libraries to the header file. Don’t forget about the “IsLibraryRegistered” shared method.
Secondly you’ll notice that the control is indeed getting those wrong negative coordinates for left and top after receiving the correct coordinates. Because this is being triggered in the FrameworkPropertyChanged event we know the values of left and top are somehow being set to these values. I’m still investigating why this could be happening.
So I decided to open up one of my custom WebControls. It looks like I’m having similar issues.
My controls render in the correct position but I never use to have to implement the FrameworkPropertyChange for changes to Top and Left. Now the control doesn’t update its position unless I do. I didn’t catch this bug because I normally don’t update the location of a control once its placed. I’m still not sure why your control gets the wrong left and top being passed altogether. Not good. Hopefully @Greg Olone can look further into this…
====Side note how do I properly tag Greg when there’s an apostrophe in your last name: @Greg O’Lone
As a hack around you can capture the left and top properties in the Open event and then in the Shown event you can set them back using javascript or Jquery. It’s not pretty but if you need it working, this should do the trick.
I have no clue why they’re getting those random negative values, I wonder if there’s a framework conflict or something in javascript rendering the control that is changing this…
Has there been any update to this? I am needing a text editor for an internal web tool I’m working on now, and I like the look of TinyMCE vs the YUI editor, but I noticed this issue and found this thread searching the forum.
I’m trying to decide if I should spend some time figuring out a work around for this issue, or if there is a fix in the works, or if I should just look at using something else until the next release comes out.
