I'm using CKEditor in OpenCart 1.4.9.3. My problem is with the paragraph tags it automatically add and how it handles applying header tags. Say I have this text:
Example text here
This is some example text.
CKEditor has them both in the same paragraph block even though they're on different lines. I highlight Example text here and select h1. It makes both lines h1 instead of just my selected line.
How can I fix this? I imported over 1000 products so I can't very well go through and replace every p with a br, especially since in any new product, the editor will add p tags anyway. I am aware I can add the header styles in Source, but my coworkers can not handle html. They need to be able to highlight a line and change it to h1 or h2 without hassle.
Thanks!
Are you sure that it works if there's a br to make a linefeed, but not when there's a paragraph?
As I've figured, the h1 would apply to the whole paragraph, ie change the p to h1.
Try the same in your Word Processor, with linefeed (ctrl+enter) or new paragraph (enter).
Related
The pre tag is used for defining block of preformatted text in order to preserve the tab, text space, line break e.t.c.
But I don't really know while this is not working for me. Am having excess WhiteSpace in all my blog posts.
I have provided a screenshot for view as well as a live url to see the effect of what am trying to explained.
I tried this:
.pre-blog{white-space:pre-line;white-space:-moz-pre-line;white-space:-pre-line;white-space:-o-pre-line;word-wrap:break-word;word-break:keep-all;line-height:1.5em; display:inline;margin:0}
But no luck with it cos it couldn't solve the issue.
Here is one of the blog posts that you can access and see what I am trying to explain.
Screenshot:
the whitespace you show in the screenshot is the space between li items. This is default styling applied for these html elements.
Easiest way to get rid of the space would be to apply display: flex and flex-direction: column to the parent, which is the ol element
You seem to be trying to put <div>s and other elements inside the <pre>. As far as I know that's not how <pre> works; it's only meant to contain plaintext that you want preformatted in a certain way as described here. It's usually used for displaying things like computer code that need all their indentation preserved.
Your screenshot and linked web page seem to be ordinary formatted text. I'm not sure what exactly you're trying to achieve, but <pre> is not the right way to do it; you'll have better luck with proper use of <p> and <br> tags and CSS styling with properties like margin, padding, and line-height. (Depending on your use-case, if you want to avoid manually typing tags, you might want to consider something like Markdown to automatically add the formatting tags for you).
I suggest you replace your <pre> with a <div>, and then post a different question regarding the whitespace if you're not able to figure it out yourself.
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 insert a div element inside the tinyMCE editor, but each time I insert one it's inserted in a separate line!
what I want is to insert the div inline with the text already existing!
Can anyone help?
P.S: text is included directly in the editor's body (I've eliminated p elements)
Thanks
Tinymce needs those root elements in order to be able to style lines of text.
There are several means to get rid of unwanted tags onSubmit, but that depends on the use case.
I have recently been playing with contenteditable quite a lot. I've knocked up a simple editor prototype which I'm fairly happy with. There is one thing that's puzzling me.
If I have a paragraph and my cursor (caret) is inside it like so:
<p>some text |</p>
How do I break out of the paragraph? Is there a key combination or a execCommand that can be used to break out of it on the next line?
If I place the cursor (caret) at the end of the paragraph and press enter a new empty p tag is generated. This is fine normally when writing text blocks. But say I want to insert an image or codeblock. I don't want this to be inside a p tag but I can't see a way to break out.
I've tried highlighting the whole p block and then use:
document.execCommand('removeFormat', false, null);
Which works for other inline formatting (e.g. bold) but doesn't do anything in this case.
Here is a JsFiddle example, that might make more sense.
Thanks
For some reason my paragraphs are displaying line breaks when there is no <br/> tag being used! So if I type content into the HTML and hit return a few times it gets formatted that way.
How can I prevent that? Can I not just get it to flow?
Browsers will automatically render paragraph tags to have some padding unless you explicitly style it not to... is this the problem?
If so, p {padding: 0; margin:0;}
If not, try giving us some of your code and a better explanation of exactly what the problem is.
Put this into your stylesheet:
p {white-space:normal;}
The <pre> tag will cause white space to display. So will a CSS rule like this:
p {white-space: pre;}
Could either of those be the problem?
If the text is being broken to make it fit, you cannot / should not try to stop the text from breaking. However, if your problem is that the text is breaking at an undesirable point and you would rather have it break at a more appropriate point, use the following:
<nobr>... Unwanted break point here ...</nobr>
enclose the unwanted break point with nobr tags.
And, add the following at the appropriate break point:
... some text ... Text on next line