I had used nicEdit for edit my paragraphs and questions etc.With some alignments too.
In the above I had showed you one example. This is single paragraph only. However in the rich text editor by default it will enclose each sentence with a <div>. For one drag and drop issue. I had added css code with
.nicEdit-main div {
display: inline-block;
}
So that I can drag and drop boxes.Now what is the issue because of my addition of inline-block. If people will try to delete or move forward backwards instead of moving words it's deleting content. What is the solution for this?
Thanks in advance.
http://www.nicedit.com/demos.php
Use the below code to remove all divs without class attr inside the element .nicEdit-main
$('.nicEdit-main div:not([class])').each(function(){
$(this).contents().unwrap();
});
Related
I am using ckeditor for writing articles for my website. The problem is when I add a a space within an article i get something like the following:
<p></p><br />
Can anyone help me with how to configure ckeditor such that when I press enter with the attempt to add a paragraph, I actually get a paragraph and and not the line i posted on top. As a result I am getting one paragraph and I have to go o the database to put the br tag inside the p tags for me to actually get a space to separate the paragraphs.
I press enter with the attempt to add a paragraph, I actually get a paragraph and and not the line i posted on top.
But by default you actually get a paragraph. For example if you press enter in this situation (^ represents selection):
<p>foo^</p>
You will get:
<p>foo</p>
<p>^<br /></p>
The <br> inside the empty paragraph is called a bogus <br> or filler <br> and it must be there, otherwise the block will be 0px high.
So I truly don't understand your question and I advise you to check your configuration, because by default CKEditor produces paragraphs.
PS. Setting config.enterMode to CKEDITOR.ENTER_BR is not recommended. Editor works best with ENTER_P which is the default setting. If you don't like spacing between paragraphs just edit the contents.css file and add a rule there which removes margins around block elements like p, h1, etc. Remember to clear cache after doing so. Read more here: Enter Key Configuration.
You need to press Shift + Enter in order to get just a <br> tag.
This functionality is also 100% configurable.
Demo
I am doing a text-overflow: ellipsis in a div to truncate some extremely long text values. Basically to avoid the overflow from increasing the width of the div since there is no white space in URL. What I need to do is display the following:
http://www.somewebsite.org/over-the-counter/drugs/medone.html
http://www.somewebsite.org/over-the-counter/drugs/medtwo.html
http://www.somewebsite.org/over-the-counter/drugs/medthree.html
as:
...he-counter/drugs/medone.html
...he-counter/drugs/medtwo.html
...-counter/drugs/medthree.html
Is this doable at-all in HTML/CSS? or is jQuery/PHP my only resolve?
BTW, upon mouseover the full string is displayed as a tooltip.
$short = '...'.substr($url, -20);
In tooltip just show $url
You can accomplish that with pure CSS and direction property set to rtl (right to left) on the container.
In a <div> I have some text. Because of the div-width the text is shown in multiple lines. E.g. the following code:
<div>text01 text02 text03 text04 text05 text06 text07 text08 text09 text10 text11 text12</div>
might be shown in e.g. four lines:
text01 text02 text03
text04 text05 text06
text07 text08 text09
text10 text11 text12
I wish to keep only the first two lines, and if further lines are present they must be removed and replaced with the text line ... as a new (therefore third) text line.
In other words: I wish to find the second line break (if present) and replace all text after this point with a text line saying ....
So, if I have two lines of text, nothing is changed:
text text text
text text text
But if I have more than two lines like above, I will get this:
text01 text02 text03
text04 text05 text06
...
Any good advice?
You should do that in css and if necessary add javascript.
In css you can set:
.two-line-div {
max-height: 3em; /* or whatever adds up to 2 times your line-height */
overflow: hidden;
}
That will reduce the box to the desired height.
If you always want to show ... (if the content is always more than 2 lines), just add an element with the three dots after your div.
If you want to add another line with ... if the content is bigger than what you are showing, you would need javascript to calculate the original height, see if it is more than 2 lines and add / show an element dynamically if it is.
Note that a css solution does not remove anything, all lines are there, they are just not visible.
There is a pure CSS Solution working in most of the modern browsers (some older firefox versions didn't support it):
div {
overflow: hidden; /* "overflow" value must be different from "visible" */
text-overflow: ellipsis; /* the magic dots...*/
height: <yourHeightValue>
width: <yourWidthValue>
}
Doing something like this in PHP could be a bit more complex, depending on what the DIV contains (nested HTML?, what exactly is a "line" for you -> a HTML break <br>, a line-break \n)? In most of the cases the PHP solutions split after a defined String or Word length. You can find quite a few examples for this kind of text limitations, this one is a complex solution which can handle html tags too.
You can use explode() to split your string (the contents of the div) into an array. Use <br> or /n as the split token. Then you can replace the contents of the div with the first two elements of the array.
$content = 'Hello<br>World<br>Other<br>Stuff';
$lines = explode('<br>',$content,2);
echo '<div>'$lines[0].'<br>'.$lines[1].'<br>...</div>'
I wonder if there is a way to display paragraph text with diagonal indent to be some thing like that!
Keeping in mind that this text is written in WYSIWYG editor (Contains html tags).
I was thinking if there is a way to count the words within the paragraph excluding html tags and then making some equations to increase the indent of the text every line by jQuery or Javascript.
Is there any suggestions to do that ?
You can skew the containing div
.holder{
transform:skew(-40deg);
}
<div class="holder">
<span class="rotate">Just </span>
<span class="rotate">Like</span>
<span class="rotate">This! </span>
</div>
and then unskew each word inside it.
.rotate {
transform: skew(40deg);
}
https://jsfiddle.net/dcst94sv/5/
There's a very easy way to do this with CSS. Create a list. Then use li::before to add left-side padding to the list items. Set the li::before element to be a tall and thin block floated to the left. Each one will create left side padding for its parent list item and all those below it.
Like this:
li::before {
content: "";
display: block;
float: left;
height: 50px;
width: 10px;
}
<ul>
<li>sancti et dilecti</li>
<li>viscera misericordiae</li>
<li>benignitatem </li>
<li>humilitatem</li>
<li>modestiam</li>
<li>patientiam</li>
<li>caritatem</li>
</ul>
To count the number of words within the paragraph excluding HTML tags, use:
$tagless_content=strip_tags($content);
str_word_count($tagless_content);
Update
Here is code to increase text-indent via jQuery
jQuery.fn.stripTags = function() {
return this.replaceWith( this.html().replace(/<\/?[^>]+>/gi, '') );
};
then use the String.length JavaScript property
var len = $('<p>').stripTags().length();
for(var i=0;i<len;i++)
jQuery('<p>').css('text-indent',+i+'px');
Reference
Strip tag via jQuery
strip_tag PHP function
str_word_count PHP function
There's no straight-forward solution that I am aware of, since, as you indent each line of the text more and more, the length of space that each line can take up will decrease, creating new lines.
For example:
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXT
Post-indentation:
TEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEX
T
TEXTTEXTTEXTTE
XT
TEXTTEXTTEXTT
EXT
TEXTTEXTTEXT
TEXT
This problem will exist if (1) you are processing lines created due to word wraps, and (2) if you detect all of the lines at once and then do all of your indents (as opposed to an algorithm that updates the <p>'s text. If the font family is mono-spaced font, then this can be adjusted for.
Best-case scenario is that these are <br>-terminated lines, in which case this would be very easy.
Slightly more difficult would be doing this with a mono-spaced font.
Worst-case scenario, describe above, would require searching for the first line that is not indented, then indenting it, updating the <p>'s text, and then repeating the process until the text is completely gone through or if the amount of indention exceeds with width of the <p>.
I would suggest asking your question again, providing the following information:
- are the lines terminated with <br> tags, or are they word-wrapped? If it is word-wrapped, is the font mono-spaced or variable-width?
After many Searching stuff I found something useful http://www.csstextwrap.com/examples.php
I think after some modifications it will fit my requirements. thanks for your highly appreciated Responses.
I have been asked to come up with a solution which would allow our users to create their own custom javascript dialog text. However we need it to be centered.
At the moment, we have a textarea, which the user pads using spaces and tests with a preview button. I would like to change this to allow for the text to be center aligned automatically. I think this would mean just adding the spaces myself line by line in the backend, and also adding in the correct line breaks.
The only way I can think of doing it, is getting the longest line as int, and then subtracting subsequent lines from it, and diving the result by two, and tacking that many spaces on front and back.
Is there a cleaner more elegant way to approach this problem? Are there ways of aligning text actually inside the dialog?
I had considered something like TinyMCE, but I think it's a little overkill, for what is essentially a 150 character, 4-5 line string.
On the PHP side, you can do this.
$lines=array();
foreach (explode("\n",wordwrap($str,$len=80)) as $line)
$lines[]=str_pad($line,$len,' ',STR_PAD_BOTH);
echo implode("\n",$lines);
The Javascript version should be easy to write.
This page has a useful javascript function for center-aligning a string using padding. Assuming you're displaying plain fixed-width text (using a <pre> tag or similar) then you'll need to get the length of the longest line and pad accordingly. If not, it's just a matter of setting the css: #myDiv { text-align:center; } on the div containing the text.