I'm implementing TinyMCE in a website and I'm having issues with pasting, I wondered if anyone has had this bug before.
The basic structure inside the textarea is like this:
<h5>I am a heading</h5>
<p>I am a paragraph</p>
So when I first start editing if I place the cursor at the beginning of the editor and hit return a couple of times, then go back to the top to paste something in above the h5, the paste wipes out the h5.
When I look in the format dropdown before I paste, it says I'm still in a heading 5 and in the status bar it says 'Path: div » h3 » span.-span', is there a common solution to this problem?
Thanks
Update - I've just noticed this happens when I insert a line break instead of pasting too.
Update 2 - It happens to the h5 if I have applied a colour to it within TinyMCE.
So I colour the heading, then put the cursor before it, press return and try to paste/line break in the new space above and that clears it out. When coloured the html of the h5 looks like this:
<h5>
<span style="color: #0000ff;">
I am a heading
</span>
</h5>
Ok, I revisited this problem and I figured it out.
It seems that through either something I did or through some bug from an action on TinyMCE (perhaps paste from Word?) a clearing div got wrapped around the content (or sometimes part of the content) and saved in the database that looked like this:
<div style="clear: both;">
The content
</div>
Whenever a paste or a linebreak insert was done inside this div it cleared the rest of the content, and removing the div fixed the issue.
I'm sorry I cannot uncover what caused this but I hope that at least helps anyone searching.
*Edit*
I think this may have to do with pasting from word and the allowed tags in tinyMCE.
Using tinyMCE as a more fully fledged web page editor I believe it is good practice to include the following line in the initialization options:
valid_elements : '*[*]'
That will make tinyMCE allow any html tags you wish, and though I have yet to test it I believe this would also fix my pasting issue.
Related
I have noticed, while looking at my page source, the characters showing just after a <div> tag. I went trough my coding and can't find where it is from; I did some research and they are saying that it is there so words can be cut.
Near the <h1> tag I have a floating image that is a little bit bigger than the title. I was wondering if that was causing it since I could extend the title on a second line because of the floating image but it remains.
How do I get rid of it? Why is it there?
Here is what the source looks like:
<div class="container">
<img src="floating_right.png">
<h1>Title</h1>
<div class="more stuff"> eventually justified text</div>
</div>
Any clues?
EDIT
This is my actual code;
echo '<div id="inputTag">';
echo '<img id="winClose" class="btn_close" src="http://images/html/bouttons/fermer.png" alt="Fermer">';
echo '<h1>'.$titre.'</h1><br>';
I might also mention that I am using Webmatrix 3.
EDIT
To fix this I have opened the file in Notepad++ and there it was;
echo '<div id="inputTag">-';
Voila!
This script will find and remove all the invisible s on your page:
document.body.innerHTML=document.body.innerHTML.replace(/\u00AD/g, '');
It works by searching for the Unicode character U+00AD. It's invisible when it doesn't sit at a line break, which is probably why you can't find it in your code.
Soft hyphen (shy) This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use to insert a soft hyphen.
If you're finding in your code, I'd recommend leaving it there, especially if it's coupled with a <wbr> tag. See example below:
**Go full page, then open your console and change the viewport width. You'll notice how the word automatically breaks where is and adds the hyphen.
<h2>AAAAAAAABBBBBBBCCCCCCCDDDDDDEEE<wbr>EEEFFFFFFGGGGGGHHHHHHIIIIIIIJJJJJJJ</h2>
You can safely get rid of the tag in the example you have posted. is known as the soft hyphen and is used to break words up across multiple lines in web pages. You would normally expect to see it in the middle of really long words in a paragraph the same as you would hyphenate a long word in a written paragraph to space it over two lines in case you run out of page as you write it.
As for how to remove it, you can open the web page up using your website editor, locate the tag and simply delete it from the file as you would any other text on a web page when you edit the page normally.
A quick Google search showed this:
https://en.wikipedia.org/wiki/Soft_hyphen
Basically, it's a - I think. I would recommend looking for a - on your web page. If you don't see one I wouldn't recommend bothering with it unless you wanna use jQuery and make a simple script that'll remove it.
EDIT
It seems you want to get rid of it. I'd recommend trying to move around your images and play with them a little until it goes away.
I need to hide a
</div>
without JavaScript or Jquery. I tried
<span style="display: none;"></div></span>
but it didn’t work at all.
Any help is much appreciated.
EDIT:
Thanks for confirming that it is NOT possible!
That’s what I wanted to know.
I solved my problem by changing my markup a little bit.
In my case it would have been logic because it simply would have saved some lines of code. (Basically I wanted to insert a div into another when a user activates an option, hiding just one closing tag and one new div opening tag when the option is disabled, showing them when the option is activated. It’s a tumblr theme with some closing tags rendered in {block:Posts} after every post. No need to get further in detail, i think it would be unnecessary complicated because the problem is already solved. Thanks!
I can think of absolutely no logical reason for doing this. even though a div tag may look like two elements to some, it is in fact one element and neither the starting nor the closing tag function on their own.
The fact that a
</div>
tag is being displayed suggests that you have an extra closing tag - there is no corresponding
<div>
opening tag. These tags should never be displayed on a page if implemented correctly.
Try looking through your code and checking every opening
<div>
has a corresponding
</div>
In html all tags must be in pairs, having one opening and one closing tag. e.g.
<div id "test">
Test text!
</div>
JP
I have a HTML fragment, a list item of a long ordered list
<li>
<p class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</p>
<p class="English">The elders discussed the matter.</p>
</li>
How do the CSS rules look like to keep the two paragraphs in the list item together when printing the document? This means that they either appear together at the end of a page or then are moved together to the next page.
How do I keep the paragraph <p class="nw"> and the paragraph <p class="English"> together so that no page breaks occurs?
I use
.nw {page-break-after:avoid;}
but does not work. There are in fact page breaks between the nw and English paragraphs. This should not be the case as far as I understand the rule. To check it I use the print preview function of Firefox.
The answer How do I avoid a page break immediately after a header was helpful to find a solution. It refers to this bug in the Mozilla bug database.
A solution is the following.
li {
page-break-inside: avoid;
}
It works fine in Firefox.
There are multiple factors in play, first in importance: The user's printer.
There is no bullet-proof way of achieving what you want (Notice how a printer will even cut images in two if it decides to).
You could use a query indicating that if it is on print, that particular piece of text moves somewhere safe on your page, but this could cause other problems, like breaking the normal flow of your layout, etc.
I suggest you read this: http://davidwalsh.name/css-page-breaks
And this :
http://www.w3schools.com/cssref/pr_print_pageba.asp
Do you mean to have no break between the p class?
You can try grouping everything in one <p> element, and then identifying each class with a <span> element. For example,
<li>
<p>
<span class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</span>
<span class="English">The elders discussed the matter.</span>
</p>
</li>
Or if you are trying to just remove the space between the two <p> elements, you can look here - remove spaces between paragraphs
Is this what you meant?
According to your edit, you mean in terms of printing. This removes the paragraph space in a web document, but not while printing - Just a note to anyone searching this question in the future. R Lacorne seems to know the answer to the edited question.
Here in my work, the previous programmer decided to use the wonderful TinyMCE on the company website.
One of the thousands of problems I'm having is:
If the original text have any span tag, when I press the backspace to delete a line (p tag only), all span tags are deleted from the text.
This error is much more specific than the other. I can delete anything, character or tag (including the p tags), using the delete button and nothing happens.
If I delete anything using the backspace button, nothing happens too.
But if I delete any p tag (even if it was created during the editing of the text), using the backspace, all span tags are deleted.
I'm looking everywhere a way to solve this problem, because the client is not able to delete a row without losing all the markings of the text, which are made by CSS applied in span tags. E.g.,
<p>
<span id="org_2" class="apoloP" onClick="myFunction(this.id);">
TEXT
</span>
</p>
Does anyone know how I can do to stop TinyMCE delete my text, beyond what is necessary?
It is not only when the original text has a span tag.
When the TinyMCE creates a span tag itself (if to underline the selected text, for example), if I delete a p tag, all span tags created also disappear.
Solution: Despite all tell me not to use version 4 because is still in beta, was this version that solved my problem.
The bug does not occur in version 4.
Looks like you should have a closer look at the tinymce setting valid_elements and valid_children. Make sure spans are valid elements and can be children to paragraphs.
I'm trying to get the paragraph text to start on a new line after the tags that I'm using for my sybtitles, but I just can't get them to budge. I've tried display:block and giving it a right margin to occupy the entire div width but nothing seems to be working!
You can see an example post here:
http://vhbelvadi.com/2012/04/21/mozilla-boot-to-gecko-good-early-too-late/
As you can see at the very first subheading, there's some of the paragraph text right next to it and it all looks shabby and unorganised! I want the paragraph to start on a new line automatically, every time.
Thanks in advance :-)
Looks fine to me. Any chance your style sheet is being cached and you're just not seeing the updates? If so, it might be worth applying the technique described here just in case. I use it on various client sites and it's saved me a few headaches.