CK Editor strange characters - ckeditor

I have just installed CK Editor onto a form that submits data to a database, when I want to use an apostrophe ' It is displaying as & #39; on my web page instead.
How can I get it to display an apostrophe instead?

What's happening is that somewhere along the line, CKEditor (or maybe another part of the system) is going through and converting characters that might potentially cause problems (due to having special meaning in HTML) into their HTML entity representations.
This is normal behaviour and if you don't need to do any string manipulation inside your database you can happily leave it as is for that stage. Indeed you can have them in along with normal HTML text and it should render just fine.
Clearly your setup is sufficiently different that something isn't happening. So, you'll want to use something like PHP's html_entity_decode() to convert back to normal unescaped text. There should be an equivalent function available in any language with a half-decent standard library.

Related

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.

regarding image downloading function

Can anyone help me to solve my issue regarding the image downloading function? The situation goes like this: actually I wanna download a gantt chart image from a site that generates some string url as the image! not even http://www.example.com/img/image.png but something like http://www.example.com/img/index.php?=task&d=&Work=0...
Disregarding what language or environment you are working in, simply using the full URL with all the GET variables in place will provide you with the image.
It should not matter.
Judging from your comments below, your code is not working because you are using PHP's htmlspecialchars function.
Htmlspecialchars will turn symbols that you cannot represent in HTML output simply by adding them to the source of an html document (such as &, < and >) into identifiers that will let the browser know what kind of character to render.
for instance the ampersand (&) could be rendered by & the HtmlSpecialChars function does this for you.
When your backend code is outputting parts of html source that aren't visible to the user, such as the source of an image in this case, you do not want to use that function.
It will invalidate the URL by replacing all the & instances in the url by &
Simply do this:
<?php print($url); ?>

MathJax renders strange in my post-edit page with AJAX post-preview functionality

I have something like the StackOverflow's "Ask Question" page, where a text-box is used to put source markup code and, below, another text-box (non-editable) is used to render a preview of the post/question being typed.
Consider that my application not only lets me use a simple tiny markup language for my posts' content; it also provides me with the possibility to type math in it using MathJax. But the syntax is simple Latex syntax (however this is not the problem, so do not let this thing bother you too much).
The problem
The problem is the following. The page is a little different from the StackOverflow's one because it uses ASP.NET with AJAX in order to call a server-side procedure that performs the markup language translation in HTML (this is my choice, I have the code server-side, there is no implementation in javascript of the markup translation code).
When the asynchronous script runs (every 10 secs), the non-editable text-box is re-filled with the translated markup. The Latex code as well is put there (no translation performed on it) and MathJax script is called everytime the AJAX procedure returns (so the latex code will be rendered after the markup language, this latex rendering happens client-side).
The problem is that, sometimes, rendered math is strange especially considering equation numberings. Numbers do increase every new AJAX call. I guess there must be a way to reset, completely, the status of the MathJax object instantiated in the page or whatever... Is there a way to reset MathJax?
I assume that AJAX here is the problem... Thankyou for your help, hope I was clear.
If you have loaded a configuration file that includes the AMSmath extension, you can use
MathJax.InputJax.TeX.resetEquationNumbers()
to reset the equation numbering and the labels used for \ref and \eqref. If you want to start the numbering at a particular equation number, use
MathJax.InputJax.TeX.resetEquationNumbers(n)
where n is the starting number minus 1 (the default is 0).

New Line in localization string in C#

I have a site developed in C#.net and VS2010. It is is localized and works well overall. However, some of the localization strings don't look the best.
For example, I have a message at the top of the login page
Currently it appears like this:
Your session has expired. Please login to
continue.
I would like it to appear like this:
Your session has expired.
Please login to continue.
I can't change the size of the containing div because the width could be different for each language.
I am looking for a way to put layout capabilities in the localization file. The simplest approach (on the surface) is to put new line characters in the string. However, \n, \r\n, and <br/> all appear in the string because it is rendered with " around the string.
Is there another approach that will work? Is this a bad idea? How else can we compensate for length differences accross the many languages?
The best approach in this case is to use HTML formatting in your string (both in English and in your translation) and where necessary adjust the translation.
There is no reason why you could not include <br /> in your string and have it rendered as intended. I don't know if you are using WebForms or ASP.NET MVC, but in the case of MVC you can avoid the default behaviour (automatic HTML encoding of your string) by using the Html.Raw helper, for example instead of this:
<div class='whatever'>#Resources.MyString</div>
Do this:
<div class='whatever'>#Html.Raw(Resources.MyString)</div>

ckeditor escapes all text - how can I prevent it from doing so

I dont want the ckeditor to escape text written. I use the editor such that customers can write their their own mailtemplates, and I give them code snippets they can paste in the around in the text in the editor to merge in dynamic data, ala ${customer.name}.
The text is then persisted to database and retrieved again other places in code and filled with data through Freemarker. And here the problem amerge - Freemarker uses < and > characters, but the ckeditor escapes them. How can I configure ckeditor to not do this?
thanks in advance
CKeditor is creating HTML, so the < and > characters are reserved, and if it wasn't escaping them, the text wouldn't display.
Personally, I would put a translator between what the browser sends to the server and what is being sent to FreeMarker, either when the template is stored, or when it's rendered. If your users are familiar with FreeMarker, continue to allow them to use > and <, but then unescape them before trying to render them.

Resources