I have used CKEditor for a few years without really understanding it. I now want to use it to display text which will include HTML, CSS, JavaScript and PHP example code. None of that needs to execute it is just to show the code to others.
Currently I used the textarea replace method to edit content and I need to carry on that way. When I add the content first time it is sanitised (mysqli_real_escape_string) and stored in a MySQL database correctly. It also then displays correctly with the CKEditor markup working as markup and the HTML/PHP showing as a code example. However, when I edit the content a second time the HTML examples become "real" HTML and are no longer visible as examples.
For example this:
<?php echo "hello"; ?>
<p>Hello</p>
is correctly (?) stored as:
<p><?php echo "me"; ?></p>
<p><p>Hello</p></p>
and displays on the page as shown in the first code snippet (which is what I want). When I then hit edit again the code examples vanish into the background as real HTML (part of the page). If I put the code examples in as code snippets (which I would rather not have to do because of the intended users) the result in the editor (second edit) looks like this:
<!--?php echo "me"; ?-->
Hello
I am sure i am missing a basic understanding of what is going on behind the scenes but can anyone explain how to allow users to type in text which includes HTML, CSS, JavaScript, PHP and MySQL code examples which must then appear as examples and not markup (and be editable as examples).
I have played with config.entities and config.protectedSource after some research but they do not seem to be relevant (or to work). Weirdly a couple of times it seemed to work fine and I thought I had cracked it but then stopped with no further changes to the config. That means I now have less idea what I am doing than when I started!
You don't mention which version you are using, but if it's relatively new (4.4+) you can use the Code Snippets plugin that was designed exactly for this. See the demo at http://ckeditor.com/demo#widgets. It might help with the encoding issues too. There's docs on it too.
Th help with the current encoding issue, it would help a LOT if you showed us how you output the data and load it into CKEditor. For example "When I then hit edit again" doesn't really describe anything without context. For example, do you use setData() with AJAX? Do you use an inline editor? Code examples would be the best.
Related
(More specific Giorgio Bozio)
I have been using Rotativa for the last year to print simple html to pdf and its been working fantastic. Very happy with product, but now recently i have been trying to do something a little more advance and i keep having the same issue.
Normally i would send Rotativa a simple invoice view (Predefined HTML) with model data populated via Razor and this worked well, but now i am trying to implement template's for my invoices. Customers can create their own template layouts with a custom 3rd party form designer and then upload its template file into my site. I take this file and parse it and generate the elements of the invoice with stringbuilder and div tags. I then send the generated HTML to the view that uses a #HTML.Raw() to populate the invoice html. Rotativa then takes this View and generates a pdf, but when it generates the pdf its quality of the text is horrible and blurry. Thus it generates the template correctly, but does some sort of shrinking or something to make the text not look crisp.
I have tried everything, from playing with custom switches to playing with the dimensions of the html.
When i copy the generated html to a view and just generate the pdf plainly then it prints fine, but as soon as i push the html to the view with HTML.Raw i seem to land up with fussy text.
Giorgio Bozio, does Rotativa have a issue with Html.Raw? or can you perhaps open a dialog with me to try and resolve this issue? Really hope you can help me...or someone can help me. Desperate and dont really want to change Rotativa for something else.
Please help.
Resolved Text printing issue by removing background-color definitions on Div containers.
Resolved extra blank page printing issue by reducing PageHeight on Rotativa Customswitches
:-)
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.
when there is some error in view, L4 shows a nice trace, but cached filename:
open: /var/www/webpage/app/storage/views/1154ef6ad153694fd0dbc90f28999013
howto during view-rendering-to-cache save view's path/name (in a comment or something)?
Or better yet - to show it in the debug-error-page (its called whoops or something?)
Thanks ;)
I don't know how to de encrypt view names , but one method i do is to
{{dd('will you reach here ')}}
Trying to move this line from view to another to watch where php render reach .
I know it is not the right way nor the professional one , but it may help in some cases .
This is not exactly a problema, this is a compiled version of your view.
Laravel Blade System will compile all your views and subviews into a single file and, if you didn't change anything on them it will always try to use the compiled version, to speed up your system.
Sometimes is hard to know wich one of our views is related to that error. Using Sublime text, what I do is to hit CTRL-P (windows) and paste the number of the compiled view (1154ef6ad153694fd0dbc90f28999013) and it will bring it to me right away.
Of course, you won't do any changes on it. This is just way to find the view you have problems in, so you can then find the real file and fix it. If you know wich file is the problematic one, you don't have to do this, go directly to your file.
One way to tackle this problem is add a html comments (not blade ones as they will not be rendered in compiled view) in sections which get echoed.
#section('content)
<!-- FILE: app/views/main/index.blade.php -->
<Your Content Goes Here>
#stop
This html comment will get rendered in the compiled source of the view. Of course you will have to inspect the compiled view first to identify which view is the problematic one. But in my experience, this method work almost all the time.
I created a helper that checks to see if you are working locally or in development mode, It then outputs an HTML comment.
{{ printViewComment('mockup/reports#content') }}
<!-- Template: mockup/reports#content -->
I chose to name the comments like this path.file_name#yeild_name but I only wish this was an automated featured.
I found my answer after looking into source,
when on the Whoops! page, just look for render in the sidebar, there will be the name of the view file...
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).
Not sure if what I want to do is possible, but what I am hoping to do is somehow gather certain pieces of text from a website, remove the header, footer, background, all formatting, and place it into my application in a scrollview or something similar...
I'll give you an example... Imagine I was making wikipedia's iPhone app, I want to download the information about the wiki on dogs, without the header, side bars etc, just the text. How would I go about doing this?
I understand that for this I have not provided any example code or what I've tried or started, but that's just because in this case I'm lost! That doesn't mean I want full chunks of code either. Any help will do. If this doesn't work, I will just have to make a 'mobile optimised' version of the webpages I want to include in my app.
Thanks
(Edit: the term I was trying to use was 'strip the web page of its HTML coding')
You may be going about this the wrong way, or perhaps even asking the wrong question.
Does the target website have an API or datafeed of some kind?
Can you get the information you need in JSON or XML format directly from the site?
I think you've misunderstood the technology. HTML is merely the framwork on which the formatting and data is hung.
Parsing the HTML page seems like an awfully big headache, I doubt you'll ever be able to get it to work, because almost all sites these days are partially or wholly generated on the server side, the page is only the result.
Some sites hide the information in memory and others get it dynamically through ajax for example, which means that simply trying to get the data by parsing the HTML will get zero data.
Another issue you should be aware of though, is that simply copying the data from generated websites may open yourself up to copyright issues.
You have to parse the html code and search for the part that you want and "throw" away the part that you do not need. This is more or less like bruteforcing and the code of the website should not change otherwise you are screwed. So you have to write the parser by hand with this method. But maybe there is a atom or rss feed and you can parse this one. This will be much more easier and you are not depending on the website layout because the rss/atom feed is just about the data. For parsing rss you could try out NSXMLParser.
And then you have to make a valid html page out of the data and present it in the UIWebView