CKEditor breaking images on XPages - ckeditor

I've been trying to solve this issue for a week now, and so far not so good.
An XPages application mimics an email client, with a <xp:inputRichText> connected to a RichText field in a Form. Nothing out of the ordinary.
When an image file gets embedded via the Insert Image button on CKEditor, and the filename has non-ASCII characters, the resulting MIME bodies register discrepant names, breaking the mail.
In this case, the original filename was atenção.jpg, but names get messy on Body field.
I sincerely appreciate any advice

I did a few tests and I see inconsistencies even in v12. Strangely, the Notes client seems to be able to open such emails. (I tried external email on v9.0.1 and Outlook could not display the image).
As Per suggested, you should open a support case with HCL. They have implemented some fixes in this area recently for 12.0.2.

Related

Is it possible to resize an image when pasted into a rich text field

I am working on an xpages app, where the client wants to restrict the size of images that are pasted into the document. I have restricted docs with the upload component, but not with a pasted image.
Has anyone done anything like this?
Thanks
walt
Yes it is possible, I haven't done this but there are a few ways you could go about it.
Excuse me if you already know this, but it is worth pointing out for anyone who comes across this question in the future, RichText as we knew it from Notes/Domino is not used XPages, it is all MIME. When I started Xpages I knew nothing about MIME so after understanding it all I have written a little summary on my blog to help anyone get used to the idea. If you are going to do anything with the InputRichText control and File Uploads etc. it is worth getting familiar with MIMEEntity's.
http://camerongregor.com/2016/04/21/webmail-ui-you-must-learn-about-mime/
There are 2 ways that images can make it into the 'rich text field', either uploaded using the 'Image' button on the editor toolbar, or alternatively in some web browsers, the image can be pasted from the clipboard. The 2 different methods will include the image in 2 different ways
Uploaded
If the image is uploaded, then the image becomes a multipart/related mime entity of some sort of image/jpeg, image/png etc., related to the text/html. Between the time that the image is uploaded, and the time that the Document is saved, the image file will be located on the server's disk, in the xpages persistence folder associated with the Document e.g.
xsppers_directory/application-id/session-id/document-id/someimage.png
Pasted
When pasted the image is not uploaded as a file to the server's persistence folder, but is instead included within the text/html as a data URI image (as Stephan mentioned in the comment above).
So, if you want a true solution you will need to address both avenues.
Handling Pasted images
I have shared a plugin on my blog which blocks pasted images, so this could be used to eliminate the 'paste' avenue altogether, and force users down the upload avenue.
http://camerongregor.com/2016/11/14/preventing-pasting-of-images-in-ckeditor/
Alternatively, if you are happy with having smaller pasted images, you could just 'restrict' it by modifying the plugin so that it checks the 'length' of the data URI (as Stephan suggested above) and allows the paste if the length is below your predetermined limit.
If even more alternatively, you could find some sort of client side javascript library that will resize images and do it there in the client before the paste.
Or another server-side option is you could process the contents of the 'text/html' MIMEEntity when saving, and find any img tag's that used Data URI's and strip it out, resize the image using some server side library such as ImageMagick and replace it.
Handling Uploaded Images
For uploaded images, an intense solution would be to extend the InputRichText control (similar to how the have demonstrated in the Mastering Xpages 2nd edition) and override the processAjaxRequest event so that it resizes the image during the process of uploading of the image and putting it in the persistence folder. You could resize it there and then using something like ImageMagick.
Or a less intense version would be to process the 'pending' attachments during a before save event. If you get the DominoRichTextItem from the DominoDocument, you should be able to iterate through the Attachments, checking their attachment state, there will be a state which means 'pending/about to upload' and for these ones you can process them while they are in the persistence folder, before they are finally attached to the document.
Finally if you don't want the xpages runtime / persistence directory to be involved, you could do it all after save, just using the backend NotesDocument and MimeEntity processing. Extract the Image MimeEntities to disk, process them with ImageMagick or similar, and then re-attach them.
Someone else may have a simpler solution that I haven't thought of but at least this gives you some idea of what may be involved.

Hotmail.com strips out formatting and hyperlinks from HTML message

I'm struggling to figure out how to defeat this process on Hotmail.com.
When I send an e-mail using a PHP script (and PHPMailer libraries, using Sendmail), recipient viewing the message from Hotmail.com gets a very bare message. Images are there, but all of the HTML formatting (styles, attributes, hyperlinks) is stripped away. Not even the <td> attributes remain (such as colspan, cellpadding, etc).
However, when I send the exact same message directly from a regular mail client (or webmail interface), all formatting and styling is preserved intact.
My PHP script sends a customised HTML message to a group of recipients, but it does it one by one (customising parts of the message for each recipient).
It appears that Hotmail doesn't seem to trust my server with the messages and is removing attributes and links as a security precaution. However, there is no way for receiving user to override this. Adding the sender to the whitelist does nothing. I have posted this on a Microsoft forum, without much success. I'm hoping someone here might have fought with the same problem and found a solution, or at least work-around.
I tried various things. I put a time delay of a few seconds between sending of two messages, thinking that Hotmail doesn't like mass mailing, and if two or more messages arrive from same sender at the same time, it will activate this blocking. It didn't help. I tried using SMTP script, sending the message through g-mail's SMTP server. Same problem -- stripped-out formatting.
[update]: I have even tried using Microsoft's own SMTP servers for hotmail, using a valid outlook.com user account to send (from that PHPMailer script). When viewed through hotmail.com web interface, the message is still stripped of all formatting and links.
Meanwhile, when these problem messages are viewed through a mail client (iOS, OSX, Windows, Android, MS Outlook), all is perfectly fine. [/update]
Right now, my work-around is pasting a long URL for this one important link that I want users to use, for recipients who have 'hotmail' or 'outlook' or 'live' in their e-mail address.
Any creative thoughts?
[update 2]After a lot of tinkering, I was able to re-format the message so that at least some of the formatting is preserved, so now, I got <table> tags to work. What's weird is, <bgcolor> also works, but <center> doesn't, nor do any css style attributes (neither to <tr>, nor to <td> or <table> itself). Fortunately, I now have <a href> tags working properly, so the links are functional again. I have basically given up on the whole thing and have developed a separate bare-bones template only for hotmail/outlook recipients.
Frustrating![/update 2]
I'm not sure this is still an issue for you but since I didn't find ANY resources around that matter I thought it was useful to post it here.
I had the same problem and I figured it was that my links were dummies (only href="#") and that outlook stripped them (whereas gmail rewrites the href).
Apparently if there isn't a valid href tag, it strips the link, even if it's been used just for cosmetic.
I would advice not to use them for anything else than links (obviously).
Hope it'll help.

Pasting images from clipboard in Firefox suddenly enabled (tinymce)

I'm using TinyMCE for richtext editing in a webmail client. Suddenly, after years and years of begging us to build something like this, customers are able to paste images directly from the clipboard in tiny. While I always try to achieve to be as smart as Google, I immediately logged in to my Gmail account and started pasting away.. Yep, paste also worked in Gmail and, yep, images were also broken in the sent e-mail.
Here is a shortened part of the html, as generated by firefox after pasting my screenshot into the textarea:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAA<andsoonfor100k>"/>
I have to say, I'm very excited about this new feature, but I cannot seem to find anything (literally!) about this topic, so any suggestions about when this was added to firefox, or even how to make this actually work in e-mail clients will be really appreciated!
This is a bit old, but this was added to Firefox since version 4, and Thunderbird (sort-of) since version 6 (it seems it could read them since version 3).
In the case of Thunderbird, even if Thunderbird support Data URIs, other email clients may not, so Thunderbird convert them to classic MIME attachments (with CIDs as URL).
In the case of GMail, as of today (march 2013), pasted image data is included as data URIs, while drag-and-droped images (at least in Linux, with Gnome, from Nautilus to Firefox) include them as common MIME attachments. So, if you send an email with a data URI image, some email clients will display it correctly, some will not. (Ironic thing, Gmail cannot display them, at least not with Firefox and Chrome).
BTW, in Thunderbird at least, as the data URI don't have full information about the image, if you try to save it you need to provide the name or use the "image.jpeg" generic name.
Information about Data URIs:
https://www.rfc-editor.org/rfc/rfc2397
http://en.wikipedia.org/wiki/Data_URI_scheme
Information about how to remove or convert Data URIs from pasted data in CKEditor (some people don't like them for some [valid] reasons):
http://ckeditor.com/forums/Plugins/ImagePaste-plugin-for-Firefox
http://dev.ckeditor.com/ticket/8208
So, there is much information, maybe just searching for "data uri" would return more results.

Putting our logo in the Email Notifications that system sends out

We want to be able to show our logo, but it always comes out with "Download Image" prompt instead of showing the email in the body..
Emails are built using the Oracle Mail_pkg... How do I add the image to the HTML body so that it shows without a user having to download the image like it's an attachment? (also want to show it in blackberry)
I know it's possible since if you add an image to the outlook signature, you can see those pictures on outlook and blackberry
Along with a nice answer sleske provided I can suggest you to create a message you want to look like in Outlook or elsewhere, take a look at the message source and try to reproduce it in Oracle.
Also bear in mind that using utl_mail package you can send messages with body only 4 000 chars long (the size of varchar2 type in SQL). I can suggest you try utl_smtp package, though it requires a little more coding and accuracy, it gives you much more flexibility in creating fancy e-mails.
You need to include the image itself inside the email, usually as an attachment.
To have it show inside the email, you need to link to the attachment from inside your email. This is commonly done using the cid scheme.
See e.g. http://mailformat.dan.info/headers/mime.html for more information.
Or straight to the source:
Content-ID and Message-ID Uniform Resource Locators

HTML codes showing in viewpage HTML data

I’m a new to Codeigniter. Just using it in my project from last 2 months. I’ve a comment section in my project. Where any one can give comments. Every things are going perfect but when ever any one putting HTML content(image/videos) & then when those are showing back in the comment section… direct HTML codes are showing in the comment page rather than HTML content(image/videos).
ex: when i’m saving any “embed youtube video code” in the comment box & save that the out put comes as “raw Embed Video codes” rather than Youtube Video…..
I feel like it must be a minor thing but really can’t understand where the fault has occurring. Plz, if any body have the solution reply me back as soon as possible.
Couldn't one devise a system where somebody just posts the youtube link itself and through a combination of regular expressions your own system generates the object/embed code itself so there's no security risk possible?
I had a similar problem a while back - wanting to give end users the ability to post YouTube videos, but not allow them to just post anything without some sort of XSS protection.
I ended up using htmlpurifier - http://htmlpurifier.org/ to filter the contents being submitted in the form.
There is a modification that can be made to the whitelist that allows YouTube code through the purifier.
http://htmlpurifier.org/docs/enduser-youtube.html
So far, that's working well, but my system is still in development.
As a quick hack you can do htmlspecialchars_decode when displaying the comment in your view. This is very dangerous though without the use of sanitization when you receive the comment - search xss_clean on this page. You should also use strip_tags to remove all the HTML tags you don't need (everything except the video tags) prior to inserting the comment in the database.

Resources