I use the templates plugin for my ckeditor and I input a 2 column structure like this:
<div class="row">
<div class="two_col half">
<p>Info Block One. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="two_col half">
<p>Info Block Two. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
My content editors then edit the content of each div and input whatever text they need to.
The issue I'm having is that when my editors highlight the lorem ipsum text and delete it to start their content, the delete action also deletes the actual div itself, resulting in this:
<div class="row">
<div class="two_col half">
<p>Info Block One. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
Is there something I can do to stop that from happening, I would like the div to remain after the user deletes the lorem ipsum placeholder text.
I'm using version 4.5.4
I don't know how to prevent it from the CK Editor perspective, but from Kentico point of view, you can style the template to have two Editable texts next to each other for those two columns. You can either have two web part zones - one editable text per each or two texts in one zone.
Related
I am trying to target all the p tags, where there is no strong tag as a child or grandchild(child of the child) of the p tag.
here is the sample
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a>
</p>
<p>
<strong>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a></strong>
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a><strong>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</strong></a>
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a>
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a><strong>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</strong></a>
</p>
In the above code, the 2nd, 3rd, and last one are the ones that I don't want but I want the rest of them. I have gotten as far as this XPath:
//p[not(child::strong)] which removes the 2nd paragraph, but when i add the a>strong like //p[not(child::strong) or not(child::a > strong)] the second part is being ignored. Can anyone point out where am I going wrong and how to fix this issue?
You want //p[not(strong) and not(*/strong)].
Is there a convention saying how long a line of comment should be?
Different line lengths will not work for any monitor size, or even font size, and other collaborators reading the code will have to scroll back and forth horizontally to read the entire line. I am wondering how this type of stuff is solved in the real world where people collaborate with other coders. Or is there some kind of auto formatter where people can change this kind of stuff on-the-fly to their own taste maybe?
For example:
/**
* Lorem ipsum dolor sit amet, consectetur
* adipisicing elit. Libero pariatur maxime
* praesentium. Similique qui, non aliquam
* nulla libero tenetur voluptatibus delectus,
* ex ab, aspernatur nam animi ipsa. Beatae
**/
versus:
/**
* Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam iste magni optio
* impedit rem labore minima cumque quaerat corrupti suscipit dicta, possimus commodi
* laudantium ipsam, tenetur. Omnis qui, veritatis eligendi dignissimos rem quos
* voluptatum quaerat neque at excepturi quod fugit veniam sapiente sunt blanditiis,
* autem illum alias delectus illo, nostrum, dolore aspernatur culpa. Omnis ea deserunt,
* vero odio praesentium repellendus enim recusandae at temporibus officia, obcaecati
**/
(I apologise if this is the wrong stackexchange site to ask this, I honestly didn't know where to put it)
Is it possible to create such a design with Bootstrap: the image taking the top left and surrounded by text on wide devices and the image on top of the text on narrow devices? I am not sure how this positioning would be called and couldn't find a similar example.
I can't say too much without seeing your HTML or CSS. But I can provide an example of how this may work. I will assume your image will be large enough to fill a narrow device.
The CSS attribute and the terminology you would be looking for is "float" some documentation can be found here.
The HTML below is an example of an image with some text in it.
<p>
<img src="example.png" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id pulvinar urna. Cras scelerisque finibus aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut nec interdum metus. Donec iaculis, nisl quis dignissim tincidunt, lorem nulla rhoncus turpis, eu fermentum ante orci a libero. Suspendisse varius nisl ut dui tincidunt, et feugiat eros egestas. Sed rhoncus viverra tellus ut pulvinar. Morbi id enim eget mauris bibendum tristique. Duis gravida ligula metus, quis porta massa mattis facilisis.
<p>
Now for some CSS.
/* This will align your image to the left within a p tag */
.image {
float: left;
margin: 10px;
}
/* To accommodate a smaller screen you will need a media query */
#media screen and (max-width: 640px) {
.image {
width: 100%;
margin: 10px auto;
}
}
I have made a quick JSfiddle with an example here. Hopefully I have provided you with enough to help you with your problem.
I assume it is some serialized version of an html form, but past that...
O:15:"ColoradoReindeer":23:{s:8:"repID";i:166;s:10:"*created";N;s:9:"slumber";s:7:"2398863";s:10:"cucumber";s:10:"73100.000";s:4:"name";s:8:"Test PTO";s:7:"company";s:12:"Test Company";s:7:"address";s:35:"1120 Avenue of the Test, 16th Floor";s:4:"city";s:8:"New York";s:5:"state";s:2:"NY";s:3:"zip";s:5:"10036";s:5:"phone";s:12:"212 555 5555";s:5:"email";s:17:"aa#example.com";s:12:"serialnumber";s:7:"testing";s:14:"dateofpurchase";s:0:"";s:7:"product";s:7:"testing";s:11:"accessories";s:7:"testing";s:9:"packaging";s:44:" Lorem ipsum dolor sit amet, consectetur adipiscing elit..";s:15:"troublereported";s:7:"testing";s:6:"backup";s:34:" Lorem ipsum dolor sit amet, consectetur adipiscing elit..";s:8:"estimate";s:0:"";s:19:"*packagingOptions";a:4:{i:0;s:0:"";i:1;s:25:" Lorem ipsum dolor sit amet, consectetur adipiscing elit.";i:2;s:44:" Lorem ipsum dolor sit amet, consectetur adipiscing elit.";i:3;s:39:"Computer is generic.";}s:16:"*bOptions";a:4:{i:0;s:0:"";i:1;s:71:" Lorem ipsum dolor sit amet, consectetur adipiscing elits.";i:2;s:34:"Not accessible.";i:3;s:52:" Lorem ipsum dolor sit amet, consectetur adipiscing elit.";}s:15:"delivery_method";s:17:"They will deliver";}
It looks like the output of the serialize() function from PHP. In this case, it is not syntactically correct.
I use this jquery plugin for "see more" text:
http://keith-wood.name/moreRef.html
I save from tinymce editor html text into mysql database. Then I display html text in a php page, and I use "see more" text jquery plugin for show only 100 words of text.
My problem is that that plugin doesn't retain html formatted text, but it changes html formatted text into simple text, it remove html tag.
How can I retain text with html tag for display formatting text properly and have also "see more" link?
You can do it with pure css and keep the html in place. Here is a JS fiddle (less and more will not be displayed on IE6,7,8 and the content will be expanded)
http://jsfiddle.net/6sj4e/45/
.text {
height: 50px;
overflow: hidden;
height: 100%\9;
}
input.less-more,
input.less-more:checked ~ label.more,
input.less-more:not(:checked) ~ label.less {
display: none;
}
and the html :
<input id="chbox" class="less-more" type="checkbox">
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>
<label for="chbox" class='more'>more</label>
<label for="chbox" class='less'>less</label>