I would like my tinymce editor to allow all the html elements, include some nested kind.
I read the documents at tinymce: http://www.tinymce.com/wiki.php/Configuration:valid_elements
And also confirmed by this post on Stackoverflow: TinyMce Allow all Html tag
I use valid_elements :"*[*]", in my tinymce options:
$('.page-tinymce-editor').tinymce({
theme: 'advanced',
theme_advanced_buttons1: "fontsizeselect,bold,italic,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink,code,image,uploadimage,uploadattachment",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
width : "660px",
height: "1200",
body_id :"article",
valid_elements :"*[*]",
skin: "wp_theme",
relative_urls: false,
content_css: "http://" + location.host + "/assets/screen.css",
plugins: 'uploadimage,uploadattachment'
})
But there's a nest condition in my html is still remove by tinymce. I have a piece of html like the following:
<span class="text">
<p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</span>
which becomes this :
<p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
Tinymce removes the span outside the p tag. Other span tag are all fine. I studied the tinymce over and over, but didn't come out any idea to fix this.
Is there way to fix it?
Thanks a lot
You will need to adjust the valid_children setting! I guess p-tags are not defined/allowed al child noddes of spans by default.
I think this could not be done on tinymce side. Here is the post talking about it at Tinymce forum: http://www.tinymce.com/forum/viewtopic.php?pid=98807#p98807
Try something like extended_valid_elements : '+span[p]', in addition to the valid_children setting discussed above. And make sure to clear your cache entirely to make sure its not serving your old config file.
This should allow p to be a child of span
More information on that topic:
Alan Storm on Magento TinyMCE
Pixafy - Overcoming Magento's TinyMCE
I know this is an old topic but it still ranks high in the search results so hopefully it will help someone.
Related
I have a set of information to be rendered on my webpage using django template tags.
{% for product in sales %}
<div>
<span>Customer:{{product.to_user}}</span><br>
<span>{{product.time}}</span><br>
<p class="message">{{product.message}}</p>
</div>
{% endfor %}
The {{product.message}} template tag contains information separated by new line('\n'). But, newlines are not rendered in HTML, the information is displayed in a single line omitting to obey '\n'.
I tried capturing the information from the <p> tag and replacing \n, with <br>, and again setting the text in the same <p> tag. But it doesn't seem to work.
This was my approach, as stated above.
$(document).ready(function(){
let renderedText = $(".message").text()
//alert(renderedText)
final_txt = renderedText.replace(/\n/g,"<br>")
$(".message").val(final_txt)
})
What changes or addition should I make, in order to get this working?
Thanks in advance.
Use the template filter linebreaksbr like so :
<p class="message">{{ product.message|linebreaksbr }}</p>
In order to have the line information you can use pre tag to keep track of empty spaces and new line.
let message = `Lorem ipsum text Lorem ipsum text Lorem ipsum text.
Lorem ipsum textLorem ipsum text
Lorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum text`;
<div><pre>{message}</pre></div>
Say I have some text
"Lorem ipsum dolor sit amet,"
and I want to quickly add tags around "dolor sit". I am aware that I can type bold and press tab but then both tags will appear before the "dolor sit"
"Lorem ipsum <bold></bold>dolor sit amet,"
Is there any shortcut to just add the bold tags directly around the text? (I'm using also emmet)
Try to use Wrap With Abbreviation action: https://docs.emmet.io/actions/wrap-with-abbreviation/
I have my habits with LaTeX, then in HTML I don’t know which element can replace the LaTeX’s \subparagraph{} command. <br /> isn’t a good idea because it is the equivalent of the blank line in LaTeX. I can create a special class “subparagraph” but before I want to know if HTML didn’t have a similar element.
The \subparagrahp{} LaTeX’s command is something between the paragraph and the HTML’s <br /> element. Overapi didn’t tell me more :/
Someone have any idea please?
You could use a div element as the paragraph subsitute and p elements as subparagraphs, with additional class for styling, this could represent your LaTeX document structure.
\paragraph{Introfoo}
Introduction lorem lorem
\subparagraph*{}
Foobar lorem impsum ugh
\subparagraph*{}
Foobar lorem impsum ugh
would translate to:
The h3 tag is just a suggestion, the level depends on your other structure around this.
<div class="paragraph">
<h3 class="paragraph">Introfoo</h3>
<p class="paragraph">
Introduction lorem lorem
</p>
<p class="subparagraph">
Foobar lorem impsum ugh 1
</p>
<p class="subparagraph">
Foobar lorem impsum ugh 2
</p>
</div>
LaTeX' \paragraph is a heading element, the next-to-smallest one, so I'd map it to <h5>, leaving <h6> for subparagraphs, and use CSS to give them display:inline-block (run-in headers) and appropriate other styling as desired. This will leavel h1-h4 for title-and-or-chapter, section, subsection, subsubsection.
so im learning HTML and CSS and i have a question
im trying to put an image in an article and make it so the text that is also in the article will not write overtop of or get in the way of the image, but everything ive tried so far isnt working properly.
i was using W3Schools.com to learn how to do it.
here is they're isntructions on doing it
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_position
and here is an example of what im trying to do http://www.spacenews.com/article/launch-report/37302australian-led-scramjet-test-ends-in-failure
even with the instruction on the website i cant get it to work properly, could they possibly be the wrong instructions?
im using coffeecupfree HTML editor and loading the site up on chrome.
You can do this with simple HTML:
<img align="right" src="http://www.spacenews.com/sites/spacenews.com/files/styles/large/public/images/articles/Scramspace_4x3.jpg?itok=7JbqmW0r">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet </p>
When you see something on a site and you'd like to learn how they did it, I'd suggest viewing the source or right-clicking the element you're interested in in Chrome and selecting "Inspect Element".
JSFiddle example
To achieve what you're trying to do, you can also use float: right in your image. It will make the text surround your image.
I am trying to create a pre-formatted block of text using the pre element where there are sometimes a few blank lines in between the content. The problem is that occasionally the text breaks onto a separate line after either a forward slash(/) or colon(:)
An example is as follows:
<pre>Lorem ipsum dolor sitat: http://wwww.site.com/foo/bar</pre>
Displays as:
Lorem ipsum dolor sitat: http://wwww.site.com/foo
/bar
Does anyone know how to resolve this?
I'm with #Kyle, without seeing the page itself I think that it is too long for the container that you have it in, so maybe make the text smaller or widen the container and see if that helps.
I tried:
<html>
<pre>Lorem ipsum dolor sitat: http://wwww.site.com/foo/bar</pre>
</html>
and didn't get any line breaks.