I use ckeditor and I would like to wrap every line with span tag.
For example, when I enter text in the editor I get:
this is the first line
<br>
this is the second line of text
<br>
and the third one
I want it to be by default:
<span style="font-size:12px;">this is the first line</span>
<br>
<span style="font-size:12px;">this is the second line of text</span>
<br>
<span style="font-size:12px;">and the third one</span>
I know there is something called "dataProcessor" but I don't understand how to use it.
If it is possible to add this rule also to pasted text it will be even better.
Thanks!
Related
I am trying to add an empty line between two text spans
<span> The models have random values that I dont understand and it is not sufficenit but whatever </span>
{'\n'}
<span>Lots of text here </span>
The {'\n'} does not seem to work. What else can I try?
use <br/> tag for this purpose
<span> The models have random values that I dont understand and it is not
sufficenit but whatever </span>
<br />
<span>Lots of text here </span>
As ali said you can use <br>
Or instead you can put them into <p> tag because they are text ... span is not usually used on Lots of text
Code should be like this
<p> The models have random values that I dont understand and it is not sufficenit but whatever </p>
<p>Lots of text here </p>
I'm trying to create a small script that would wrap some parts of text from e.g. <p> tag like this one: <p>... 'displayed text'[popup content] ...</p> in a span wrapper.
The end result would look like this:
<span class='wrapper'>
displayed text
<span class='popup'>popup content</span>
</span>
At the moment I'm able to find and replace the text between apostrophes like this:
some_string.replace(/'(.*?)'/g,'<span>$1</span>');
But I would really like to wrap the popup content part first and then wrap it together with displayed text inside the wrapper element.
Would that be possible?
Sure - how about this?
some_string.replace(/'(.*?)'\[(.*?)\]/, "$1<span class='popup'>$2</span>");
Add a \s* between the two parts of the regex if they could be separated by whitespace:
/'(.*?)'\s*\[(.*?)\]/
When you press button it calls randomQuote() function using onClick method in html. It works fine , changes the background color and the text of quotes[rand] also works. But there is no change in by id element. Also, it is not a array problem because if i type the same by statement outside the randomQuote(), it works fine.
Here is the code:
function randomQuote(){
var rand =Math.floor(Math.random()*(quotes.length));
$("#qu").html(quotes[rand]);
$("#by").html(by[rand]);
$("body").animate({backgroundColor: colorr[rand]}, 1000);
};
(Go to https://codepen.io/TheCoder21/pen/XVVxvo) for full code
The issue in your markup:
<div class="quote">
<blockquote id="qu">
Here are some of my favourite quotes.Hope you enjoy them!
<p id="by">
random text
</p>
</blockquote>
</div>
container with id="by" overwrites by this jquery method $("#qu").html(quotes[rand]);
If you want to prevent this behaviour just wrap your text in new paragraph with id="qu":
<blockquote>
<p id="by">
Here are some of my favourite quotes.Hope you enjoy them!
</p>
<p id="by">
random text
</p>
</blockquote>
The problem is that your by element belongs inside blockguote i.e id=qu element when you did $("#qu").html(quotes[rand]);
It's html structure got changes. you no longer have a by element.
Therefore, when you try to $("#by").html(by[rand]); nothing happens. Because no by element was found.
Solution: move your by element outside the blockquote
Working code: https://codepen.io/anon/pen/MrLodd
You have to separate the id in two paragraphs inside the blockquote. You can't give the blockquote and id and then expect the paragraph tag to also pick up an id inside of it. The blockquote overrides it.
<blockquote>
<p id="qu">
Here are some of my favourite quotes.Hope you enjoy them!
<p>
<p id="by">
random text
</p>
</blockquote>
<div>
some text
<img />
<br>
text I want to select
<br>
<img />
some text
</div>
The HTML is like above, I want to select the text between the two images, is there anyway to do this?
Some background: I am trying to format some poorly written HTML so it can be further stylized. There are too many pages of them to hardcode it one by one, they have some certain pattern though, so I am trying to write a javascript function to make the whole procedure easier. The text between <br> is actually the description of the first image, I want to wrap it with <div> so I can add class to it and stylize it. But first I need to select it, right?
Simplest solution using core jQuery functions:
$('img').nextUntil('img').doSomething();
Jonathan Snook pointed me to the jQuery 1.4 function that solves this:
nextUntil()
Check out it's sibling functions:
prevUntil
parentsUntil
Inspired by:
nextAll
prevAll
For other reference check this one :How to select all content between two tags in jQuery
<div>
some text
<img />
<br>
<span>text I want to select <span>
<br>
<img />
some text
</div>
add tag for this and get "div span" . If have more span in "div" . add id or class for them.
Because execCommand doesn't work as expected I want to build a similar function on my own. It should be possible to apply different styles to a text. If I want to add a style it is easy as I can simply use range.surroundContents which let me put for example a span-tag around the selection. I also can remove tags by removing parent nodes from the current cursor position. The only think I can't find a solution to is how to handle the following cases with overlapping tags:
Case A:
<span class="bold">This is some text</span> that goes on <span class="italic">and on until the end</span>
Imagine User selects the text from some to until and applies a underline. The change should be like:
<span class="bold">This is <span class="unterline">some text</span></span><span class="underline"> that goes on </span><span class="italic"><span class="underline">and on until</span> the end</span>
Case B:
<span class="bold">This is some text</span> that goes on <span class="italic">and on until the end</span>
Imagine User selects the text from some to until and applies a bold. The change should be like:
<span class="bold">This is some text that goes on </span><span class="italic"><span class="bold">and on until</span> the end</span> ... or similar valid output.
Case C:
<span class="color-orange">This is some text</span> that goes on <span class="color-blue">and on until the end</span>
Imagine User selects the text from some to until and applies a yellow color. The change should be like:
<span class="color-orange">This is </span><span class="color-yellow">some text that goes on and on until</span><span class="color-blue"> the end</span>
How can I achieve that?
As it seems like a common problem I'm pretty sure that someone already figured this out but I couldn't find anything yet. Hopefully someone around SO can at least point me in the right direction. Thank you!
Short answer: it's hard to do this sensibly and reliably for the general case. I started work on a Rangy module for this, got bogged down and abandoned it.
Take a look at the draft HTML Editing specification Aryeh Gregor of Google worked on a couple of years ago. He also wrote an unoptimized JavaScript implementation of the algorithms in his spec targeted at the latest browsers of the time.