Hey, I am having an issue with saving source code and the different browsers.
If i enter this:
<div style="width:120px; height:40px; background:no-repeat url('http://static.reddit.com/reddit.com.header.png');">Testing</div>
In Firefox it gets saved to the database like this:
<div style="width: 120px; height: 40px; background: url("http://static.reddit.com/reddit.com.header.png") no-repeat scroll 0% 0% transparent;">Testing</div>
But displays in CKEditor like this:
<div http:="" no-repeat="" reddit.com.header.png="" scroll="" static.reddit.com="" style="width: 120px; height: 40px;">Testing</div>
This is fine for this first time as the data will still show on the site. But if say a client comes along and wants to change "testing" to "testing1" when it gets saved it saves into the database as:
<div http:="" no-repeat="" reddit.com.header.png="" scroll="" static.reddit.com="" style="width: 120px; height: 40px;">Testing</div>
Then it does not display on the site.
It works perfectly in Google Chrome (It saves and displays exactly like i typed it in) and is a bit weird in IE sometimes (IE seems to take the quotes out from around the image url and rearranges things slightly, which i found sometimes breaks if you have a background color in the background css.).
Has anyone know what could be wrong i have seen a couple of other posts that look similar, so i am thinking it is a bug?
Is there a way to stop CKEditor from changing the code when you save or click source again?
And i cannot use an external style sheet for this.
Thanks in advance for any help that anyone can give.
Re: Background image inline style problem
Re: Background image inline style problem
Re: Background image inline style problem
Re: Background image inline style problem
Should work fine and if it gets mangled, then there's a bug at the PHP side. Check the source of the textarea before CKEditor is executed and you should see a problem there.
The quote in the url() is added automatically by Firefox. There's a patch that might fix part of these problems in a future CKEditor, but I don't know how much work will it need until it's added to the core. (and as I said it will not fix all the problems and the syntax with quotes is correct and it should work right now)
Re: Background image inline style problem
Thanks for that. Our code only takes the HTML from the editor and saves it to the database, it certainly doesn't change
to
Attributes like reddit.com.header.png="" and static.reddit.com="" are completely wrong. Is there a way to configure CKEditor to prevent this sort of conversion?
Cheers
Re: Background image inline style problem
Look at the html of the page where CKEditor is used, check that it's valid HTML and it's indeed what you need.
How to know if it's a problem in CKEditor?:
Go to source mode, paste your content, switch back to design, and back to code.
If you get the same code that you pasted (minus spacing and new lines) then the javascript is working correctly and you have to look at the php side, check what is sent to CKEditor.
Re: Background image inline style problem
Hmm OK here's the odd thing.
I set up a new, bare HTML page with just CKEditor in it.
When this:
is posted it's sent to the database and stored as:
When editing, it's retrieved and looks the same. The HTML source of the page looks like this:
So the HTML in the textarea looks OK. But if I click Source it shows:
and if I save the changes then that altered HTML ends up in the database. So I'm not sure it's anything in the PHP causing the change, because the source HTML starts out OK and is mangled by hitting the Source button...
Re: Background image inline style problem
That strikes me as odd. In your original post, you said that firefox was taking the quote character in the url and changing it to "e;. How can the same thing be happening when you remove the quotes from the url?
And are you suggesting that even when you don't put quotes in the url, quotes are appearing in the database?
Re: Background image inline style problem
If i add this:
and then go from source mode it and back into source mode, it has been changed to this:
and the same code saves to the database.
So yes it seems to add in the quotes. But the quotes (i don't think) are what is wrong with this, as that code displays on the website fine. It is when you edit it again, some how CKEditor is changing what is in the database into that weird un-usable code.
So still stuck on this one.
Re: Background image inline style problem
Re: Background image inline style problem
This fixes it but does not make much sense to me as the code would only get all garbled if there was a background image in the code, everything else has been working fine and has been heavily used for about a year or so.
Its only when we tried to put in a background image that we had problems..
Re: Background image inline style problem
Re: Background image inline style problem
I've uploaded a test document here so anybody can check it: http://martinezdelizarrondo.com/bugs/quotes.html
If you try to validate it: http://validator.w3.org/check?uri=http% ... ne&group=0 you'll get an error, it might be a hint that putting the content of a textarea that way is not valid.
But most important: if I look just at the page, what I see inside the textarea is this:
So both of those facts should be enough for anybody to understand that you must escape correctly the contents of the textarea before trying to use CKEditor.
Re: Background image inline style problem
Re: Background image inline style problem
How do you expect that CKEditor or any other system can handle that properly?
Just look at it: First quote starts the style attribute, the second one closes the style (no, it's not part of the style because if it was it should be encoded as ", but you didn't encode the input html), after that there's some garbage that it's parsed as some strange attributes.
Re: Background image inline style problem
That's correct, but our code uses NO quotes wrapping the URL - like this:
Note that it's also valid to use single quotes like this:
When you switch to Source mode CKEditor adds the quotes as entities:
Which is still valid.