How to preserve html comments in Ckeditor when editing an existing document - ckeditor

How can I make sure that user typed in html comment is visible when editing an older document in Ckeditor? Use case is that users want to discuss about html formatting and they want others to see exactly what they wrote. I tried disabling the ACF by using config.allowedContent = true; but that had no effect in this case. Maybe the escaping of the document in html response must done differently? Or am I forced to instruct users to use some special formatting to avoid losing written html tags for later editing?

There was a check for double encoding the message on server side that lead the response be <p><!-- This is an example when it should have been <p>&lt;!-- This is an example I removed the check and now it works.

Related

Django mardownx not displaying header and blockquotes

Simple blog in Django (1.11.7 - Python3) in which I have impemented the Markdownx plugin. The plugin works for most of the markdown in preview in my 'edit_article' page, and in the normal view where users can read an article. BUT some of the markup isn't working in either:
Not working:
blockquotes using >
headers using one or more # or _
double-space and carriage return doesn't add a line-break
Links, images, numbered lists, emphasis and bold etc all work.
I posted my markdown in here, but of course it all worked here...
Don't really have any code to post, because most things work, so I'm guessing there isn't any problem with my model/view etc.
Anyone experienced this?
# So, let's try a header
doesn't work, neither does
> this type of blockquote
but they shoud produce
So, lets try a header
and
this type of blockquote
So I found the answer to this myself. I am using a CSS framework that resets the styling on the 'broken' markup tags. Until I add back the framework's CSS classes to the H1-H6 tags for example, the reset makes all headers appear as plain text.
So I have to add some custom CSS to the css framework's styling for those tags that are being overridden, or use html in the textarea in the form which should also work.

Laravel Save Markdown to Database - Don't Understand

I am reluctant to post this, but I am having trouble understanding how markdown actually "saves" to a database.
When I'm creating a migration, I will add columns and specify the type of value (i.e. integer, text, string, etc.) and in the course of operation on the website, users will input different information that is then saved in the DB. No problem there.
I just can't seem to wrap my head around the process for markdown. I've read about saving the HTML or saving the markdown file, rendering at runtime, pros and cons all that.
So, say I use an editor like Tiny MCE which attaches itself to a textarea. When I click "Submit" on the form, how does that operate? How does validation work? Feel free to answer my question directly or offer some resource to help further my understanding. I have an app built on Laravel so I'm guessing I'll need to use a package like https://github.com/GrahamCampbell/Laravel-Markdown along with an editor (i.e. Tiny MCE).
Thanks!
Let's start with a more basic example: StackOverflow. When you are writing/editing a question or answer, you are typing Markdown text into a textarea field. And below that textarea is a preview, which displays the Markdown text converted to HTML.
The way this works (simplified a little) is that StackOverflow uses a JavaScript library to parse the Markdown into HTML. This parsing happens entirely client side (in the browser) and nothing is sent to the server. With each key press in the textarea the preview is updated quickly because there is no back-and-forth with the server.
However, when you submit your question/answer, the HTML in the preview is discarded and the Markdown text from the textarea is forwarded to the StackOverflow server where is is saved to the database. At some point the server also converts the Markdown to HTML so that when another user comes alone and requests to view that question/answer, the document is sent to the user as HTML by the server. I say "at some point" because this is where you have to decide when the conversion happens. You have two options:
If the server converts the HTML when is saves it to the Database, then it will save to two columns, one for the Markdown and one of for the HTML. Later, when a user requests to view the document, the HTML document will be retrieved from the database and returned to the user. However, if a user requests to edit the document, then the Markdown document will be retrieved from the database and returned to the user so that she can edit it.
If the server only stores the Markdown text to the database, then when a user requests to view the document, the Markdown document will be retrieved from the database, converted to HTML and then returned to the user. However, if a user requests to edit the document, then the Markdown document will be retrieved from the database and returned to the user (skipping the conversion step) so that she can edit it.
Note that in either option, the server is doing the conversion to HTML. The only time the conversion happens client-side (in the browser) is for preview. But the "preview" conversion is not used to display the document outside of edit mode or to store the document in the database.
The only difference between something like StackOverflow and TinyMCE is that in TinyMCE the preview is also the editor. Behind the scenes the same process is still happening and when you submit, it is the Markdown which is sent to the server. The HTML used for preview is still discarded.
The primary concern when implementing such a system is that if the Markdown implementation used for preview is dissimilar from the implementation used by the server, the preview may not be very accurate. Therefore, it is generally best to choose two implementations that are very similar or, if available, use the same implementations for both.
It is actually very simple.
Historally, in forums, there used be BBCodes, which are basically pseudo-tags that allow you to format your text in some say. For example [b][/b] used to mean "make this text bold". In Markdown, it happens the exact same thing, but with other characters like *text* or **text**.
This happens so that you only allow your users to use a specific formatting, otherwise if you'd allow to write pure HTML, XSS (cross-site scripting) issues would arise and it's not really a good idea.
You should then save the HTML on the database. You can use, for example, markdown-js which is a Markdown parser that parses Markdown to HTML.
I have seen TinyMCE does not make use of Markdown by default, since it's simple a WYSIWYG editor, however it seems like it also supports a markdown-like formatting.
Laravel-Markdown is a server-side markdown render helper, you can use this on Laravel Blade views. markdown-js is instead client-side, it can be used, for example, to show a preview of what you're writing in real-time.

CKEditor and HTML in Xpages

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.

Disable html validation and cleanup in CKEditor

We have additional placeholders, which are embeded in conent edited by CKEditor and we need to be possible to place such placeholders before and after TR-tag, so we could organize repeating of data in the table. But CKEditor probably find that is not valid HTML and take out repeater placeholders before the table.
For example I write next html in source mode:
<table><tbody>{start}<tr><td>...</td></tr>{end}</tbody></table>
I switch to html mode and back to source, now my html is treated to the next view:
<p>{start}{end}</p> <table><tbody><tr><td>...</td></tr></tbody></table>
Possibly there is a CKEditor switch to turn off all syntax cleanup or specially for tables?
Try Adding this line to Config.js file:
config.allowedContent = true;
CKEditor is not a source code editor, but a WYSIWYG editor which uses browsers' contenteditable implementations for its editing feature. Therefore, it needs to work on valid and real HTML.
Although, check the config.protectedSource setting. You'll be able to hide those {start|end} tags from parser.

CodeIgniter santizing POST values

I have a text area in which I am trying to add youtube embed code and other HTML tags. $this->input->post is converting the <iframe> tags to < and > respectively but not the <h1> and <h2> tags.
Any idea how I can store these values?
If you only have a small number of forms that you need to allow iframes in, I would just write a function to restore the iframe (while validating that it's a valid YouTube embed code).
You can also turn off global_xss_filtering in your config (or not implement it if you're using it), but that's not the ideal solution (turning off all of your security to get one thing to work is generally a horrible idea).
$config['global_xss_filtering'] = FALSE;
To see all of the tags that get filtered out, look in the CI_Input class and search for the '$naughty' variable. You'll see a pipe-delimited list (don't change anything in this class).
Why don't you avoid CIs auto sanitizing and use something like htmlspecialchars($_POST['var']); ? Or make a helper function for sanitizing youtube urls...
Or you could either just ask for the video ID code or parse the code from what you are getting.
This would let you use both the URL or the embed code.
Also storing just the ID takes less space in you database, and you could write a helper function to output the embed code/url.
In this case, use $_POST instead of $this->input->post to get the original text area value, and then use HTML Purifier to clean the contents without losing the <iframe> tag you want.
You will need to check HTML Purifier documentation for details. Please, check this specific documentation page about "Embedding YouTube Videos".

Resources