PRO 69 Posted May 26, 2017 Report Share Posted May 26, 2017 Dear fellow botters, I am working to integrate "Summernote WYSIWYG Editor" ( http://summernote.org/) into UBot via UI HTML Panel. I got all the JavaScript parts working fine and the variables get passed between WYSIWYG Editor and UBot Logic in both directions, in real time (which is awesome). I have only one Issue with the Icon Font(s) used to render the WYSIWYG controls inside the UI HTML Panel. The TTF / WOFF / EOT Font Icons are not rendering inside the UI HTML Panel. If I execute the same HTML, JS and CSS combination outside of UBot in a normal Browser or even with "load HTML" command, the Icons work. As soon I load the same Code inside UI HTML Panel, for some reason it just doesn't render the Icons Can someone give me a head start on this? Someone had the same problem already with Icon fonts and HTML Panel? P.S.: If someone helps me to get just this right, I will release the complete working code (real time read / write setup, working both ways between Ubot Logic and JS / WYSIWYG) as a gift here :-) Thanks & Greetings Quote Link to post Share on other sites
HelloInsomnia 1103 Posted May 26, 2017 Report Share Posted May 26, 2017 I just copied their basic example into a UI HTML Panel and it renders correctly for me using latest Ubot, not sure exactly how you added it but this works for me: ui html panel("<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>Summernote</title> <link href=\"http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css\" rel=\"stylesheet\"> <script src=\"http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js\"></script> <script src=\"http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js\"></script> <link href=\"http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.css\" rel=\"stylesheet\"> <script src=\"http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.js\"></script> </head> <body> <div id=\"summernote\"><p>Hello Summernote</p></div> <script> $(document).ready(function() \{ $(\'#summernote\').summernote(); \}); </script> </body> </html>",500) 1 Quote Link to post Share on other sites
PRO 69 Posted May 26, 2017 Author Report Share Posted May 26, 2017 Greetings Insomnia, thanks for your code example, I 'll try it right now and let you know the outcome (I dont use latest UBot Version right now, I consider updating it just now). I'll let you know my findigs. Thanks! Quote Link to post Share on other sites
PRO 69 Posted May 26, 2017 Author Report Share Posted May 26, 2017 Apparently the given Code does not work on my end (with UB Version 5.9.18), see screenshot attached. In my previous implementation I now found a work around. Solution was to include the Fonts directly with Base 64 Encoding. Right now I am in the process of updateng Ubot to the latest Version, I will test it again after that. P.S.: I hope you will enjoy summernote. It seems a much more straight forward approach, compared to TinyMCE. I started to prefer it for Text centric processes that only need a basic HTML Markup. Quote Link to post Share on other sites
PRO 69 Posted May 26, 2017 Author Report Share Posted May 26, 2017 I updated UBot to latest version (5.9.50) now your given sample code just works out of the box (to render the initial WYSIWYG components correctly). In my previous implementation I avoid loading external ressources, it is slightly a different approach. Updating was in fact a good idea either way :-) 1 Quote Link to post Share on other sites
PRO 69 Posted May 26, 2017 Author Report Share Posted May 26, 2017 The working solutions (loading font ressources @font-face via UI HTML Panel) in my case were, to use latest Version of UBot and/or to load the WOFF as an Base64 encoded String. Both worked. This topic should be solved now. Quote Link to post Share on other sites
Varo 28 Posted May 27, 2017 Report Share Posted May 27, 2017 I using 5.9.33 (not the latest version) and @font-face render correctly. Quote Link to post Share on other sites
PRO 69 Posted May 27, 2017 Author Report Share Posted May 27, 2017 This might be. I noticed that the UI HTML Panel seems to be processed through another application (exe) in the background, compared to the built in browser and "load html" command which at least partly get executed by Browser.exe. Considering this, the possibility is there, that any installed firewall might block the background process (exe) that is running the UI HTML Panel (which is trying to fetch external ressources over the internet). So it can technically happen, that one of the two background processes (exes) are enabled in firewall settings to communicate outwards, while in the same time, the other process (exe) might be not allowed in FW.So double checking the Firewall settings might also be considered in such a case. Quote Link to post Share on other sites
zozo31 10 Posted May 27, 2017 Report Share Posted May 27, 2017 Try to set advanced ubot 2 plugin inactive.. Quote Link to post Share on other sites
PRO 69 Posted May 27, 2017 Author Report Share Posted May 27, 2017 Try to set advanced ubot 2 plugin inactive.. Why are you suggesting this? Is there any evidence that Adv UBot 2 Plugin will affect UI HTML Panel behaviour in default, or such? By the way, it is working already (base problem got solved). Quote Link to post Share on other sites
zozo31 10 Posted May 27, 2017 Report Share Posted May 27, 2017 Been there done that.. and no i don't know why it behaves like that.. My problem was inability to set variables with UI HTML panel (always go back to default) while using external jQuery. It's one of many ways to troubleshoot in ubot, by disabling all of our plugins and start plugin-less, if the problem's solved, try enable the plugin one by one.. Quote Link to post Share on other sites
PRO 69 Posted May 28, 2017 Author Report Share Posted May 28, 2017 You're right. And yes, the HTML variables going back to default is really annoying :-) Quote Link to post Share on other sites
PRO 69 Posted May 28, 2017 Author Report Share Posted May 28, 2017 Been there done that.. and no i don't know why it behaves like that.. My problem was inability to set variables with UI HTML panel (always go back to default) while using external jQuery. It's one of many ways to troubleshoot in ubot, by disabling all of our plugins and start plugin-less, if the problem's solved, try enable the plugin one by one..To prevent the "going back to default", the only work around I found, is to "focus" the input element right after the data got changed. In this way the value should not get set back to default. But it creates a new problem: the focus of the user (the cursor / selector) will change to the input element (that holds the variable), due to the "focus". This will interrupt the user, cause the cursor / selector moved away from where it was previously in most cases. Solution can be: 1. Save the cursor / selection position right before the update of the value takes place2. Focus (with JS) the HTML input element instantly after updating its value, to prevent changing back to default3. Restore the focus position back where it was at step 1 This work around has resolved it for me. The user does not recognize the focus change, cause it takes place in Milliseconds. I have tested it with those steps in 3 seperate "setTimeout" functions and it works in my scenario. E.g. Step 1 at 1ms, Step 2 at 2ms, step 3 at 3ms. 1 Quote Link to post Share on other sites
zozo31 10 Posted May 28, 2017 Report Share Posted May 28, 2017 To prevent the "going back to default", the only work around I found, is to "focus" the input element right after the data got changed. In this way the value should not get set back to default. But it creates a new problem: the focus of the user (the cursor / selector) will change to the input element (that holds the variable), due to the "focus". This will interrupt the user, cause the cursor / selector moved away from where it was previously in most cases. Solution can be: 1. Save the cursor / selection position right before the update of the value takes place2. Focus (with JS) the HTML input element instantly after updating its value, to prevent changing back to default3. Restore the focus position back where it was at step 1 This work around has resolved it for me. The user does not recognize the focus change, cause it takes place in Milliseconds. I have tested it with those steps in 3 seperate "setTimeout" functions and it works in my scenario. E.g. Step 1 at 1ms, Step 2 at 2ms, step 3 at 3ms. My solution is using local jquery file instead of using external url (download and saved it in app folder).. and everything's works again 1 Quote Link to post Share on other sites
PRO 69 Posted June 21, 2017 Author Report Share Posted June 21, 2017 I found a strange solution: Try to put all JavaScript / jQuery directly below the closing </body> tag. This has resolved almost all JavaScipt related issues in UI HTML Panel for me. 1 Quote Link to post Share on other sites
deliter 203 Posted June 21, 2017 Report Share Posted June 21, 2017 I found a strange solution: Try to put all JavaScript / jQuery directly below the closing </body> tag. This has resolved allmost all JavaScipt related issues in UI HTML Panel for me.yes Jquery should always be put at the end also other jquery plugins, after the jquery, as the jquery needs to be loaded before the plugins can work Quote Link to post Share on other sites
.thumb.png.f2868084411be2bb2623159e8eb6898c.png)
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.