I have a text_area field in a form which allows some text formatting through a very simple WYSIWYG (bold / underline / bullet points). This was aimed at having a consistent formatting in the description profile of the users.
<%= l.text_area :access, value: "#{t('.access_placeholder_html')}" %>
Nevertheless, some users usually filled the text_area by copy / pasting directly from their website. And their specific formatting "hypertext links", font size, etc. is after reflected on my website, which makes it a bit dirty.
How can I solve this problem. Ideally I would love that when saving the form it gets rid of all the HTML code that is not allowed instead of not allowing copy / paste. Is this possible? Was wondering if should use Sanitize but if so how? (Sorry new to code, I guess you would have understood).
You didn't say which version of Rails, but you could use #sanitize from ActionView::Helpers::SanitizeHelper module to strip all the HTML formatting. It scrubs HTML from text with a scrubber. The default scrubber allows optional whitelisting of attributes. You can even build your own custom scrubber to modify the string if you need more control over what is output. The module also contains #strip_tags and #strip_links, which are very simple scrubbers that remove all HTML tags and all HTML link tags (leaving the link text).
Note that you can wind up with malformed text if the user's input wasn't valid HTML.
Quick examples from the docs:
// remove all HTML tags except <strong> <em> <a> and the
// <href> attributes from #text
nomarkup_text = sanitize #text, tags: %w(strong em a), attributes: %w(href)
// remove all HTML markup
strip_tags("<b>Bold</b> no more! <a href='more.html'>See more here</a>...")
returns the string Bold no more! See more here...
// remove just the link markup
strip_links('Please e-mail me at me#email.com.')
returns the string Please e-mail me at me#email.com.
More detail at the API page for SantizeHelper
Related
I am working on a template generator usecase which involves a tinyMCE editor with the option to export and import to/from Microsoft Word files.
I use SpireDoc to save html files as docx and restore docx back to html.
The problem is, as this is a template generator, I need to include some metadata along some of the html nodes. Say a user's name is inserted in the tinyMCE and the html code would look like this:
<span data-type="user-name" data-id="234">Some Name</span>
Once converted to docx, all the data- tags are stripped off. Is there a way I could tell SpireDoc to preserve those tags and to put them back in the html file when I convert docx back to html?
I know I could resort to ugly placeholders like ##USERNAME|ID## but I would prefer if I could keep my metadata tags because I also need to do that for images and the user will not be able to size/format the image if it was just a text placeholder.
Several questions in one here but I suspect will all have the same answer.
Using the CKEditor in a CakePHP project where the content being edited is to make the html part of an email.
Most email applications don't fully support HTML net alone true HTML5.
An example of which is to center text in an email paragraph you use either <p align=center> or <center></center>
In the CKEditor when in source mode editing if do a <p align=center> and save it (or just toggle the source edit mode) it removes the align=center because in HTML5 that's no longer valid.
How can I allow this in the CKEditor?
Can I enable HTML4 validation instead of HTML5?
I also have a table in the template where half of it is edited in a field(textbox) called Header (the header of the email template) and another field called footer.
In the Header I want <table><tr><td>
In the Footer I want </td></tr></table>
Then my message content is placed in the TD cell between the header and footer.
However the CKEditor won't allow me to have an HTML TAG and not its closing TAG.
Any ideas on how to make this happen as well?
Regards
Ian
To change the HTML that it's accepted by CKEditor, adjust its ACF settings. The simplest way is to allow everything:
config.allowedContent = true;
That won't solve the halve tables part.
For that you can try to use config.protectedSource, defining a rule for both the opening and closing parts, but taking care to add also something there that allows you to target only that table and not any other table that might be in the content.
(Of course the best solution would be to but that table outside the editor when you create the mail with all the parts)
I have some anchor tags that are in a WYSISWYG text editor. They are empty anchor tags with just id and title attributes. They look something like this:
<a id="test" title="test"></a>
They were put into the editor using just a basic text editor and then saved. When they are imported into the WYSISWYG text editor and then saved, those anchor tags go away. I know this isn't the correct way to use an anchor tag and I know I could manually go into the anchor tag and add a name attribute to fix this problem (something like this will fix the problem:
<a id="test" name="test" title="test"></a>
My problem is that these anchor tags already occur in probably over 100 places and for me to find out where all these places are would take way too long. Is there a setting in the config that I can set so that it will ignore these empty anchor tags? Based on the documentation, it seems that $removeEmpty field should do the trick but I have had no luck. I have tried many different versions of it:
"CKEDITOR.dtd.$removeEmpty['a'] = 0;", "CKEDITOR.dtd.$removeEmpty['a'] = false;", "CKEDITOR.dtd.$removeEmpty.a = 0;", "CKEDITOR.dtd.$removeEmpty.a = false;", etc.
I have also tried using the protectedSource config setting but that will just ignore anchor tags in the WYSIWYG text editor and then it looks like there are no anchor tags on the page. Anybody have some insight? There has got to be a way to override the settings and allow empty anchor tags.
You might try adding config.allowedContent = true; to your config.js file. But that turns off the advanced content filter.
A better way is to configure extraAllowedContent to specify that you want to allow anchor tags without any attribute restrictions, like so:
config.extraAllowedContent = 'a[*]';
More information:
config.extraAllowedContent - specifications for this configuration
Allowed Content Rules – how to write allowed content rules, which are used in several places including config.allowedContent, config.disallowedContent, and config.extraAllowedContent
I am understanding this better but still not there yet.
I have a notes document with a rich text field. I want to edit it in Xpages, so that the user can enter text for an email that an agent will generate. The idea is that the user should be able to enter styled text, hopefully including pasted graphics, and this is saved to the rich text field in such a way that a later agent can copy that field to the body of an email.
On the form I have checked the field "Store contents as HTML and MIME.
In the Xpage I have bound the CKEditor directly to the field (can bind it to a scope variable if necessary).
The code in my agent is as follows:
Set rtItmFrm = emlDoc.getFirstItem("Body")
Set rtItmTo = New NotesRichTextItem(mail,"Body")
Set rtItmTo = rtItmFrm.Copyitemtodocument(mail,"Body")
Any further suggestions on reading up on MIME/CKEditor etc would also be much appreciated.
Bryan
=========================================================================
I just discovered how to modify the CKEditor in Xpages (the Rich Text Control). I have the full menu and one or two more things turned out. However, I am really puzzled by how it treats HTML. I would like to put a template for a nice HTML email (like a newsletter). Anything even a little complicated it munges and the output is messed up.
I read enough online to understand that it is not supposed to be a HTML editor, but I am really having trouble getting the results I want. I would love to put some basic skeleton HTML in there, but everything but the simplest code doesn't work.
Is there anyway to import HTML and it not get messed up using this editor?
as Per and Stephan said, Have a look at ACF filtering that is 'server side' (This is not related to CKEditor itself, but it is related to XPages).
If you have a look at the inputRichText control you will see 2 properties.
htmlFilter
htmlFilterIn
These properties determine how to filter Html on the way in to your data, and also on the way out.
This can be used to strip styling out, and also to prevent dangerous tags like some bad code here etc.
By Default the htmlFilter is set ACF (Active Content Filtering) if you look at the default rules, you will see it strips things like 'margin' out.
see /properties/acf-config.xml-sample
There is a filter called 'identity' which means don't filter anything, however beware if you use this you are not protected from and maliciously entered html.
You should look into defining your own set of rules for your ACF filter, this way you can choose which elements to remove. There is a section in Mastering XPages book about this.
If you still have any trouble, then there are some settings in CKEditor config which also control ACF (totally separate to XPages server side)
I don't think CKE changes the HTML, it is the writing back to a RT field.
Try and bind your RichText Editor to a scoped variable instead of a RichText field. This way you have access to the raw HTML and can use that to generate a MIME email. You might want to have a look at Mustache for mail merge.
Use this article series as starter how to prepare CK editor to make this possible.
And as Per mentioned: check the filtering.
I am Using CKEditor in my application where the users can write blogs, create pages etc..,
Source mode is disabled for the editor. Writing xml in the editor's text area is not retained after saving the content. I clearly see that the content got HTML Encoded and the same is supplied as input to the CKEditor's textarea.
Works as designed. Whatever you enter into the WYSIWYG area, will get HTML encoded. How would you want to behave it differently?
If you want a text editor for writing XML, maybe the answers to this question are useful: Textarea that can do syntax highlighting on the fly?
I too want CKEditor to support XML tags, but I understand that you can't just type them into the main window - anything typed here is assumed to be actual content, not tagging, and therefore gets encoded.
What I'd like to do is define a list of styles that cause a tag of my choosing to be used, e.g. if the user chooses the 'example' style, CKEDitor does <x>content</x>. Unfortunately I haven't had much success with this, despite hacking the dtd.js file.
My current solution is to define a list of styles but map them to a standard HTML tag, then put my desired XML tag name in as an attribute. I'll then need to write some XSLT that transforms the data later.
CKEDITOR.stylesSet.add('myStyles',
[{
name: 'Example sentence',
element: 'span',
attributes: {'class': 'example', 'data-xmlTag': 'x'}
}];
config.stylesSet = 'myStyles';
element specifies a standard HTML tag – I use <span> if I want the XML to be inline and <div> if I want it to be block level. The data-xmlTag attribute says what XML tag I actually wanted to use (x in this case). The class allows me to define some styles in CSS and means I can group several XML tags under one class name. To define some CSS:
config.contentsCss = CKEDITOR.basePath+'tagStyles.css';