If you copy some html on a page that has a custom html attribute e.g.
<p foo='bar'>this is a paragraph with custom attribute</p>
then paste it into a contenteditable element, Firefox will remove the foo attribute. It will retain any html-compliant attributes like id, name etc but none that do not conform.
Is there any way to prevent this and allow it to be pasted? IE and Chrome both allow this.
You can use data elements, see here:
http://html5doctor.com/html5-custom-data-attributes/
<li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
Related
I have the following HTML markup
<video poster="home-bg.jpg" autoplay="autoplay" loop="loop" muted="" data-autoplay="" playsinline="" width="982" height="552">
<source src="short.mp4" type="video/mp4">
</video>
The problem is that the Joomla editors, at least the two main ones tinyMCE and JCE, are eliminating the attribute playsinline from the Video tag.
I already tried adding exceptions or adding this attribute to valid attributes but I have had not success.
The attribute gets eliminated no matter what.
If I disable all editors the attribute remains but I need the editors active.
Any help?
You can modify how an element is filtered by TinyMCE using the extended_valid_elements in init method, you can specify the html attributes you want to keep:
tinymce.init({selector:'textarea',
extended_valid_elements : 'video[autoplay|muted|loop|playsinline|class]'
});
SOLVED. Update - I was mistaken in my original assumption. See my answer below.
I have an app where I initialise inline ckeditors on various contenteditable divs.
I am well aware that CKEditor needs to add
<p><br><p>
to the markup of an empty editor to prevent content collapse, however I have a specific situation where contenteditable div that contains ONLY this html:
<h2>This is a heading</h2>
Has its markup modified to this:
<p><br></p><h2>This is a heading</h2><p><br></p>
When I call
CKEDITOR.inline(element, config);
Where element is the contenteditable div
I am using 4.4.1
This only happens when the markup in the contenteditable div is purely a heading. If there is also a paragraph in the markup this does not happen.
It appears that CKEditor is ignoring the heading when determining whether or not it needs to add content to an empty editor.
To be clear everything else works as I would expect, just this very specific issue.
Any ideas how to fix this?
Ok I figured out this was not ckeditor at all but some of my own code that was adding the tags.
I had some script which was checking whether the innerHtml of the element was a p tag, and if not, it was wrapping the whole thing in p tags.
The reason this was not more obvious is because the p tags were empty and hence collapsed. Only when calling CKEDITOR.inline(element, config) on the element did CKEditor do its thing and fillEmptyBlocks, which created the height of the p tags. This seemed then that they only appeared when the editor was instantiated.
In fact they were there already.
I'm having a little inline editor which uses a contenteditable div. If you have something like this: http://jsfiddle.net/6psJ4/1/ is it possible to make the image not deletable?
<div contenteditable="true">hi<img src="http://tinyw.in/BH9V" contenteditable="false"></div>
Worked for me on Firefox and Chrome, but it's not very usable - e.g. moving caret after the image wasn't possible without ecitable content after it.
AFAIK without custom delete key handler and bogus brs/spaces corrections it won't be possible to implement this as well as e.g. CKEDITOR.
Check this: http://nightly.ckeditor.com/7529/_samples/placeholder.html
I want a sidebar on article page, with additional info. Is there such a solution for Joomla 1.5.
I mean that I add an article and the info is pulled from my text between the tags e.g.
{info_for-sidebar}
Lorem ipsum....
{/info_for-sidebar}
And this info shows in sidebar for current article with actual info.
Is this possible?
Setting up something like what you are asking for require some sort of workarounds.
First, lets agree that what you are calling a "sidebar" is nothing but a content... You enter that content as a part of your article.
So, to achieve what you are asking for I would recommend you use what is called CCK - Content Construction Kit - extension for Joomla using Form2Content. There's a free light edition that would be enough.
Form2Content let you setup a content type. You define what fields you want for each content. Then you create a template that will use the info you are going to enter on the fields to built an article layout.
So let's say you are going to create 3 fields like this :
1- Intro text
2- Full text
3- Sidebar
You are going to create a template as we said. each content type will have 2 templates an intro text template and a full text template
The full text template shall be like this :
<div class="content-container">
<div class="content-sidebar">{$SIDEBAR}</div>
<div class="content-fulltext">{$FULLTEXT}</div>
<br clear="both" />
</div>
The {$SIDEBAR} and {$FULLTEXT} are the text you entered in the form and Form2Content will use it to create a regular content with layout.
If you don't want to use another extension or that solution looks too complicated, you could use a javascript solution. For example you could create an HTML module in Joomla and assign its to the sidebar. On this module switch the view to HTML code and enter this:
<div class="content-sidebar"></div>
When you enter an article, switch the view to HTML code and enter the text you want to show on the sidebar and add a class to the paragraph or the div like this :
<p class="special-content">Lorem ipsum dolor<p>
Then use jQuery to append this special text to the sidebar like this :
jQuery(".content-sidebar").append(".special-content");
Note: Joomla does not load jQuery by default, you have to add it on your template or use a plugin.
I have a structure which is as follows:
<a href="#">
<footer>
<p>Some text</p>
<h2>A Heading</h2>
</footer>
</a>
This works and displays as expected in all browsers (even IE6 with the HTML5shiv.js) except Firefox 3.6. In Firefox 3.6 the display is completely screwed and if you use Firebug to inspect the DOM, the <footer> element is empty and the elements which should be inside it are outside of it.
All the tags are closed correctly. The <a> is set to display:block in the CSS.
The W3C validator validates the document and does not mark this structure as incorrect.
The spec states that an <a> element may be classed as flow content when it contains other flow content. The <footer> is flow content.
Is it just that Firefox 3.6 doesn't render HTML entirely correctly?
Any ideas for a fix?
Ta!
According the W3C HTML5 Reference the Footer Elements content model is:
Flow content, but with no heading
content descendants, no sectioning
content descendants, and no footer
element descendants.
Which an a element is interactive content.(Which also can be a Flow Content)
So using the a element will validate, if you validate it against HTML5 Standards. Using something like the W3C validator.
So to answer your question, FireFox 3.6 Doesn't conform to HTML5 standards completely. FireFox 4.0 conforms better than 3.6. You can find a list of what elements of HTML5 (and CSS3) are supported by legacy browsers here.
As for the fix I would suggest that you hide the footer from Firefox, and show a div with your content in that is hidden for everything but firefox. I would accomplish this using jQuery CSS Browser Detection using jQuery instead of Hacks is a good place to start.
Firefox 3.6 doesn't implement the HTML5 parsing algorithm; it has an HTML4 "parser", basically.
I think your workaround options are:
Avoid "block level" HTML tags inside the footer.
Put a <span> as a child of <a> wrapping the <footer>.
Put a <div> as a child of <a> wrapping the <footer>.