Good day.
I have this code:
<div class="align-center">
<a href="#" class="client">
<div><img src="./client0.png" alt="" /></div>
<p class="italic comm"> Test Test Test Test</p>
</a>
</div>
I paste this code in a textarea ckeditor, but after pressing the tab "source" and back to view page I get changed code:
<div class="align-center">
<div>
<a class="client" href="#"><img alt="" src="./client0.png" /></a>
</div>
<p class="italic comm"><a class="client" href="#"> Test Test Test Test</a></p>
</div>
Please tell me how to stop changing the code?
The reason for such behavior is that your markup is invalid.
HTML 4.01 specification (also xHTML 2.0) doesn't allow block elements like <div> inside <a> (see this answer). CKEditor follows those specs so, of course, it also finds your code invalid. Still, CKEditor's parser tries to fix your HTML and the result is what you call "changed code".
Your code could be valid in HTML5 though. CKEditor doesn't support HTML5 DTD yet because it's complex and dynamic as opposed to HTML 4.01 (xHTML 2.0).
At the moment, the only solution is to change your code.
Related
This code is from view-source in Chrome:
<div class='pedSpouse'>Relation med <a class='familylink' file='157' pers='24351162'><strong>KARL EMRIK Jakobsson</strong> f. 1897</div></div><div> <img id='pedMore' src='cmn/prg/pics/hpil.png'></div></div></div>
In inspect the img is embedded within a copy of the previous a tag:
<div><a class='familylink' file='157' pers='24351162'><img id='pedMore' src='cmn/prg/pics/hpil.png'></div>
The same thing occurs in two other places.
With other data the code is as expected.
Same thing happens in Edge.
I have no idea where the extra code comes from.
Your HTML is broken. Examine its structure:
<div class='pedSpouse'>
Relation med
<a class='familylink' file='157' pers='24351162'>
<strong>
KARL EMRIK Jakobsson
</strong>
f. 1897
<!-- You didn't close the "a" element -->
</div>
</div> <!-- You close a "div" element that was never opened -->
<div>
<img id='pedMore' src='cmn/prg/pics/hpil.png'>
</div>
</div> <!-- You close a "div" element that was never opened -->
</div> <!-- You close a "div" element that was never opened -->
The rendered HTML is different from the page source because the page source is invalid and the browser is doing its best to make sense of it. Use well-formed HTML for more control over how the HTML is interpreted by the browser.
Hint: When your HTML isn't doing what you expect, the very first step is to validate it. The runtime behavior of invalid code is always undefined.
I want to control when to put figures on a new line in php. I can keep posting figures like so:
<A HREF="./images_local/figname.gif">
<img height=196 width=128 src="./images_local/figname.gif"/></A>
<A HREF="./images_local/figname2.gif">
<img height=196 width=128 src="./images_local/figname2.gif"/></A>
<A HREF="./images_local/figname3.gif">
<img height=196 width=128 src="./images_local/figname3.gif"/></A>
But they all post left to right, until they run out of space, at which point they begin a new line. How do I control when to start posting those figures on a new line?
Thanks.
It is a simple HTML issue and has nothing to do with php, but even if you code HTML in php you could just use the <br> tag for line break.
By the way, it is considered a good practice to keep all HTML tags (<a>) and attributes (href="") in lower case. It just makes your code more readable and consistent with proper HTML markup recommendations. :)
as mentioned above, the <br> works just fine, alternatively you can list your images with :
<ul><li><A HREF="./images_local/figname.gif"></li>
<li><img height=196 width=128 src="./images_local/figname.gif"/></A>
<A HREF="./images_local/figname2.gif">
<img height=196 width=128 src="./images_local/figname2.gif"/></A>
<A HREF="./images_local/figname3.gif">
<img height=196 width=128 src="./images_local/figname3.gif"/></A></li>
</ul>
etc
I am using ckeditor to insert some html structure into db. I firstly use code view to paste html structure into editor, after inserting into mysql db, until echo at webpage, the html structure data are still maintained.
However, when the same data is called into the same ckeditor again for updating, the structure is destroyed, and I found the ckeditor has automatically changed html tags to the codes, below is an extract:-
A) html code to be pasted to editor code view for inserting (good)
<a href="#">
<img src="../catalog/view/theme/default/images/services/b1.jpg" alt="" />
<div class="btn-gradient-yellow">Details
<div class="btn-arrow"></div>
</div>
<div class="cat-title-bg">
SERVICES
</div>
</a>
B) db data (good)
<a href="#">
<img src="../catalog/view/theme/default/images/services/b1.jpg" alt="" />
<div class="btn-gradient-yellow">Details
<div class="btn-arrow"></div>
</div>
<div class="cat-title-bg">
SERVICES
</div>
</a>
C) webpage data called from db (good)
called by html_entity_decode($record["content"],ENT_COMPAT, 'UTF-8');
<a href="#">
<img src="/catalog/view/theme/default/images/services/b1.jpg" alt="" />
<div class="btn-gradient-yellow">Details
<div class="btn-arrow"></div>
</div>
<div class="cat-title-bg">
SERVICES
</div>
</a>
D) code view in ckeditor, with contents filled from the above data (changed)
called by html_entity_decode($record["content"],ENT_COMPAT, 'UTF-8');
<img alt="" src="../catalog/view/theme/default/images/services/b1.jpg" />
<div class="btn-gradient-yellow">Details
<div class="btn-arrow"> </div>
</div>
<div class="cat-title-bg">SERVICES</div>
How can I ask ckeditor not to add changes to the data?
CKEditor modifies your HTML because it is incorrect. You cannot put block elements inside of <a> unless you use HTML5 which isn't supported by CKEditor yet.
See my answer for related question. Also take a look at this one regarding blocks in <a>.
I have a div structure that looks like this...
<div class="gallery_lightview">
<div id="lg_image">
<a href="http://www.website.com/?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" class="lightview_main" title="TITLE HERE">
<img class="alignnone" src="HEADER.jpg" alt="" />
</a>
</div>
</div>
What I want to do is remove the <a> tags that show up ONLY between div class "gallery_lightview" and leave the <img> tag. So once its all stripped out it would look like...
<div class="gallery_lightview">
<div id="lg_image">
<img class="alignnone" src="HEADER.jpg" alt="" />
</div>
</div>
Basically making this a non clickable image. Is this possible?
$('.gallery_lightview').find('img').unwrap();
Find the element with class gallery_lightview, find all of its children elements (no matter how deeply nested) that are 'img' elements, then remove each of their immediate parent elements (in this case 'a' tags).
$('img').insertAfter('a');
Get and insert the element 'a' after 'img'
$('a').remove();
Remove the element 'a'
Sorry, just thought about it a little more. It's actually going on a mobile site. So...I choose not to use jQuery (cut down on the load and because I won't need most of the jQuery functionality).
Anyway this can be done in a self contained Javascript, no in the <head>?
I was thinking it would sit right before the Wordpress "the_content" call, since this is where the div is in. Any help?
Sorry for the confusion.
Maybe the answer to this question is less complicated than I am making it...
I have a Zend Framework PHP web application. I am going to create a simple API that will output a report for the user's account. The content will be as simple as this:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
I want to offer a code snippet that the user can use to embed the report on their own site.
I'm thinking this can be done with an iFrame, but I've never done this before so I don't know the best way to do this.
Update: If possible, I would also like to offer the ability for the user to style the content. Is that possible with an iFrame? I want the embedded content to look as much like the rest of the page as possible.
At its very simplest:
Create a .js file with:
document.write("<ul>");
document.write(" <li>Item 1</li>");
document.write(" <li>Item 2</li>");
document.write("</ul>");
Your users would then include this code wherever they wanted your embedded code to appear:
<script type="text/javascript" src="http://example.com/path/to/file.js"></script>
This approach allows them to style content. They wouldn't be able to style an IFRAME, but some sites providing IFRAMEable widgets solve this by allowing the user to pick colours, background images, etc. on a setup page.
Ceejayoz & Joe have already covered the 2 basic options, Javascript or IFrame.
If you want to check out some examples, take a look at the StackOverflow flair feature, that does exactly what you are trying to do and allows a user to embed the StackOverflow user info box on their own website.
If you want to see how it's implemented, check out the html which a user would link to with an IFrame, or this Javascript, which the user would call from their page. (see the notes under "how do I use it" on the SO flair page.)
[You need to insert your user number in those links to see the relevant html/js files for yourself.]
In the case of SO, the js/html is generated specifically for each user. For completeness I've included the StackOverflow js/html that achieves this.
JavaScript: You can see when executed this basically writes a script element into the users html page that injects a link to the SO css file into the head. Then it just includes some fairly simple div/span tags which get styled by the css. Obviously, the user could in this case provide their own css instead if they wanted to style it differently.
document.write('
<script>
var link = document.createElement(\"link\");
link.href = \"https://stackoverflow.com/content/flair-Default.StackOverflow.css\";
link.rel = \"stylesheet\";
link.type = \"text/css\";
var head = document.getElementsByTagName(\"head\")[0];
head.appendChild(link);
</script>
<div class=\"valuable-flair\">
<div class=\"gravatar\">
<a title=\"See my profile on Stack Overflow\" target=\"_blank\" href=\"https://stackoverflow.com/users/1/jeff-atwood\">
<img src=\"http://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=50&d=identicon&r=PG\" height=\"50\" width=\"50\" alt=\"\">
</a>
</div>
<div class=\"userInfo\">
<span class=\"username\">
<img src=\"http://sstatic.net/so/favicon.ico\" />
Jeff Atwood
<span class=\"mod-flair\" title=\"moderator\">♦</span>
</span>
<br />
<span class=\"reputation-score\" title=\"reputation score\">16,907</span>
<br />
<span title=\"5 gold badges\"><span class=\"badge1\">●</span>
<span class=\"badgecount\">5</span></span><span title=\"55 silver badges\">
<span class=\"badge2\">●</span><span class=\"badgecount\">55</span></span>
<span title=\"72 bronze badges\"><span class=\"badge3\">●</span>
<span class=\"badgecount\">72</span></span>\r\n </div>\r\n</div>'
);
Html - for an IFrame: You can see this is a full HTML document (XHTML actually to be pedantic) that includes everything needed including the link to the css in the head and the content in the body.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://sstatic.net/so/flair-Default.StackOverflow.css" />
</head>
<body>
<div class="valuable-flair">
<div class="gravatar">
<a title="See my profile on Stack Overflow" target="_blank" href="https://stackoverflow.com/users/1/jeff-atwood"><img src="http://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=50&d=identicon&r=PG" height="50" width="50" alt=""></a>
</div>
<div class="userInfo">
<span class="username"><img src="http://sstatic.net/so/favicon.ico" />Jeff Atwood<span class="mod-flair" title="moderator">♦</span></span>
<br />
<span class="reputation-score" title="reputation score">16,907</span>
<br />
<span title="5 gold badges"><span class="badge1">●</span><span class="badgecount">5</span></span><span title="55 silver badges"><span class="badge2">●</span><span class="badgecount">55</span></span><span title="72 bronze badges"><span class="badge3">●</span><span class="badgecount">72</span></span>
</div>
</div>
</body>
</html>
iFrame will work best. An ajax call would work, but you'd have to do what Google does and have them include a src script from your site as well. iFrames are basically div tags that load a page into the content area. They take all the CSS arguments like any other block level element save for the internal content such as font, color, etc.