PrimeFaces Extensions CKEditor: attempts to set encoding to UTF-8 unsuccessful - jsf

Why I am using this editor:
In the past I used PrimeFaces p:editor which is however deprecated and lacks functions that the users desperately want. I cannot use the new PrimeFaces p:textEditor because of this: Primefaces textEditor: converting text to HTML with JavaScript not working.
What is it used for:
I am using pe:ckEditor from PrimeFaces Extensions in my program, in which the editor is used by the user to create an e-mail message content. Then by click on a send button, the HTML from the editor is taken and sent via e-mail to a client.
What is the issue:
When using p:editor, I got the HTML by JavaScript function saveHTML and it worked perfectly even when the text contained Czech characters (ěščřžýáíéó), I did not even have to set enconding or anything else and it worked.
Now however when user writes "V případě dalších dotazů se na nás můžete obracet každý den na telefonním čísle", the gotten HTML has the text like this:"V pÅípadÄ dalších dotazů se na nás můžete obracet každý den na telefonním Äísle" - complete rubbish that the user obviously cannot send to a client...
My research:
EDIT: Based on some comments, I tried to add the <meta charset="utf-8> and <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> but that did not help. In pom.xml I have found also this <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>, so I do not think that there is a problem in the HTML page, but in settings of the editor itself...
So I figured, that the encoding must be set especially for the editor in its config. I finally figured how to make the editor access the custom config, but nothing that I found on the Internet and added to the config worked for me:
config.language='cs';
And:
config.entities_latin = false;
And:
config.entities = false;
And:
config.basicEntities = false;
And all its combinations.
ANOTHER EDIT:
Based on some other comments here, I also installed OmniFaces and tried to solve this by CharacterEncodingFilter, but nothing changed and it is still not working.
I also found out that my problem seems to be very related to this issue: Unicode input retrieved via PrimeFaces input components become corrupted, but the accepted answer there gives 3 ways how to solve it, one is the CharacterEncodingFilter, other way is not applicable for Tomcat users (me) and the last "solution" seems to be reporting this to PrimeFaces Extensions developers (which I did: https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/756 ).
Please let me know if you know how to fix this or if there is any workaround.
PrimeFaces Extensions - version 7.0.2;
PrimeFaces - version 7.0.7

I and my colleague found out what the issue was based on the test code that #melloware provided.
The original editor p:editor, which we had been using and which we are trying to replace by pe:ckEditor, could provide us with its content in HTML only in case we used JavaScript function saveHTML.
But with pe:ckEditor, anytime the user hit the Send button, whose onstart contained the saveHTML, the saveHTML corrupted the content. Once we erased the saveHTML and took the pe:ckEditor content as it was (which is already in HTML), it was fine without corrupted characters.

Related

Azure B2C injects different html despite LoadUri having the same html content

I am using custom policies and all is working great except that I do not understand the following wierd behavior of the injected html. I am working on a password reset flow and adapted the starterpack.
In a ContentDefinition and indpendent from the layout version (here 2.1.2, but the problem occurs also for 2.1.0)
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.2</DataUri>
I get a different injected html based only on whether I use the default page
<LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
or my custom one,
<LoadUri>https://mytenant.blob.core.windows.net/b2cweb/selfasserted.html</LoadUri>
But this custom page contains excatly the same html as the AzureBlue one. Specifically,
I navigated to the page /tenant/templates/AzureBlue/selfAsserted.cshtml , copied the html content and pasted it in my custom file in blobstorage.
Expected result
I expect the html page where the id="api" div is injected to be exactly the same if I call the LoadUri one or two. Nothing else in the custom policy files is changed.
Result
If I use the default LoadUri, the cancel button is shown just below the div id="api", as expected for a proper html document format
If I use my custom page, which again contains the same html but lives in blobstorage, the cancel button appears below the continue button in the html (but is rendered on top via css absolute positioning)
Also notice the appeareance of an empty div with class="buttons" at the beginning of the div id="api".
I need to understand what is happening for the purpose of understanding and ideally I would like the generated cancel button to appear just like the default AzureBlue.
I checked out that the old, classic userflow puts the button at the bottom, so it is as if I am using version 1.2.0 but only for my custom page, whereas my content definition is always 2.1.2 or 2.1.1.
Thanks Octopus and please find the same response here.
This is expected because of policy engine and location of storage with predefined CORS server and corresponding linked metadata files for rendering. So please use as best practices provided in the document - https://learn.microsoft.com/en-us/azure/active-directory-b2c/page-layout

SPA approach not working if page contains b:carousel

Environment:
I'm writing a SPA with JSF2.2, Bootsfaces 0.9.1, Primefaces 6.0, JEE7 and Hibernate 5.2 in combination with MySQL 5.7 DB.
What I have:
My SPA has a navbar on the upper part and a specific menu based on the selection of the navbar on the left. On the right side and under the navbar I've my main "content page". Similar to this picture but with the difference that my menu is dynamic:
For updating the content page I'm using AJAX.
Everything around the navigation is working as I expected as long as my content page does not contain a b:carousel!
What I tried to do:
As I mentioned above my SPA and all navigation is working correctly unless I add a b:carousel to a content page.
Please consider following example:
I got 2 content pages. Page 1 contains a single label with some text. Page 2 contains a b:carousel with some images. Page 1 is the welcome page.
As soon as I navigate from page 1 to page 2 nothing happens. I need to completely refresh the whole page to see page 2 and even this is not working everytime.
My main question:
Is there any trick to update the content page with ajax if there's a b:carousel on it?
What am I doing wrong?
EDIT:
I created a sample project on github so you're able to see what I mean. I used Java 1.8, Tomcat 8.0.36 and Netbeans IDE, however the project is a Maven project an should work in eclipse, too.
Project: https://github.com/mweber96/stackoverflow39128418
SPA Approach I partly used: http://www.beyondjava.net/blog/single-page-applications-with-bootsfaces/
This question is related to my previous question: Use ui:repeat with b:carousel?
It's a combination of two bugs:
Your example at GitHub uses PrimeFaces, but it doesn't seem to use a PrimeFaces component. The effect is that PrimeFaces adds some fancy JavaScript to load the missing CSS files dynamically (which is great!), but it doesn't add the PrimeFaces core library, so Mojarra runs into an exception it silently hides. You can fix this by adding a (possibly hidden) PrimeFaces component to your page, by including the PrimeFaces core.js file directly (although I wouldn't recommend that) or - of course - by removing the PrimeFaces dependency if you really don't need it.
BootsFaces relies on the HTML attributes to initialize the carousel. To my surprise, this even works, at least partially. However, to start the sliding automatically, you still need to initialize the JavaScript widget manually. In your case, that's
$("#myCarousel").carousel();
BTW, I suggest you open a bug on our bug tracker to fix the latter point (https://github.com/TheCoder4eu/BootsFaces-OSP/issues). Thanks in advance!

JSP response content type Excel - file downloaded twice on IE8

When I set response content type as Excel, the Open/Save dialog is shown twice , just on IE8. It works fine on other browsers (tested on Chrome/Firefox/Opera).
The code for setting response content type is:
response.setContentType("application/vnd.ms-excel");
response.setHeader("Content-disposition","attachment;filename=abc.xls");
I searched for solutions/workarounds. Turning off Smartscreen didn't help.
Also, another suggestion was to wait for 5-10 sec before clicking Save/Open. That too didn't work.
What's the cause of this? Are there any IE specific workarounds?
It's a pain but IE8 is still widely used by the users.
This is just a guess, but it could have something to do with the way Office (used to) embed itself in IE with plugins.
A workaround might be putting it in a zip file before sending it over to the user.

Mobile Safari fails to scroll to named anchor

I have a big SVG document here, containing a map of all the quests in a certain online game. Each quest node is inside a SVG <a> element, linking to a distinct named anchor in a big HTML document that loads in another tab, containing further details about that particular quest. This works exactly as desired in desktop Safari, and I'd expect it to work just as well in any browser that supports SVG at all since I'm using only the most basic form of linking, but it fails badly on Mobile Safari (iOS 6) - which is my single most important browser target, considering that the game in question is for the iPad. It only scrolls to the correct anchor on the initial load of the HTML page; clicking a different quest in the SVG tab will cause a switch to the HTML tab, and the hash (fragment ID) in the address bar changes, but the page doesn't auto-scroll.
This appears to be a known limitation in Mobile Safari - hash-only changes in the URL apparently used to force a page reload, and that got over-fixed such that nothing gets triggered at all now. The fixes I've found online all seem to be applicable only in cases where the URL change is being generated programatically, from within the same document, rather than static links from a different document.
Further details:
I've tried doing the named anchors in both the old <a name="..."> form, and the newer <h1 id="..."> form. No difference.
I've tried adding an onhashchange handler, to force the scrolling to take place, but the handler isn't being called at all (verified by putting an alert() in it).
I could presumably fix the problem by having each quest's details in a separate HTML file, but that would severely affect usability - with all the details in a single file, you can use your browser's Find feature to search through them all at once. (Also, deploying 1006 files to my web hosting after each update would be a bit of a pain...)
Anybody have an idea for a work-around?

disabling chrome translation for javascript

I am writing a Google Chrome extension. The targeted pages are written in Russian. Chrome translates to English. I can see some inconsistencies appear that seem to be linked to translation. For example, in the following code I check to see if I am in a particular folder:
if (searchResult[0].innerHTML.indexOf("Общая папка")!=-1) alert("You are in Shared Folder."); else (alert(searchResult[0].innerHTML));
If I reload the exact same page several times, the result is inconsistent. Sometimes it detects "Общая папка" but other times it does not. When it does not detect this phrase, the alert says I am in "Shared Folder" which is the translation for ""Общая папка." There appears to be no consistency here. Sometimes I am dealing with the original text (which is preferred) but sometimes I am dealing with crappy translations that are useless for my script because the translations change all the time.
Does anyone know how to fix this? Turning it off would probably fix it but actually the translations are useful and necessary for other aspects of the extension. I understand that the translation works with some secondary layer of the HTML (I have not researched this very well). Can I simply refer to the original in my script?
According to this answer, you can disable translation by placing the following element in the head portion of your web page:
Insert this to the head section of your web page.
<meta name="google" value="notranslate">
If you needed to programmatically disable translation, you could add that tag through JavaScript.
Not sure about disabling it, but looks like after a translation Chrome adds class="translated-ltr" to <html> element, so maybe you at least can detect when the page was translated and either warn a user that the extension might not work properly on this page or just disable it.

Resources