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
Related
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.
Is there a way to make input text inside a link tag works well in IE8? I cannot place the caret inside nor select the text within it.
<input type="text">
I think the reason why I'm trying to do this is not important here, just consider I have no choice of make it work under an <a> tag. I only have control over what's inside the <a> tag.
As a solution, I was thinking about some JQuery DOM manipulation when in IE8 mode but there must be a easier/cleaner way of fixing this "bug".
Thanks
I think this is due to the input and link tag display properties, while an input is display:inline-block; your link is display:inline;. Try to play with these properties and z-index if it's not working.
Hovever, i think jQuery solution is better, and simpler, except if this is your only usage of jQuery on your page.
HTML :
<input type="text" />
jQuery script
jQuery(document).ready(function(){
$("#myInputLink").click(function(){
// .trigger('focus') or .focus(), but the first one is better on my own
$(this).next('input[type="text"]').trigger('focus');
});
});
Have a nice day.
I'm working on a new website re-design; so far every browser compatibility issue has been resolved no problem - but there's one that remains in IE7.
The client has a dropdown menu from the header which extends over the content, but the problem occurs when the client has a related video on the page as this is often displayed first; the video [being displayed just below the header] pushes the menu behind.
The dropdown is created in CSS using a high z-index value (1000).
JavaScript is used to hide and show the menu by altering the 'visibility' value.
The video uses jPlayer, given the age of IE7 it doesn't use HTML5 to display the video but instead includes a .swf file.
I have tried altering the z-index of the header, jPlayer, etc to the suggestions on this site but had no luck. I have also tried changing the position from absolute to relative but this broke the dropdown.
I have modified the parameter 'wmode' so that it's property is 'transparent', I've also tried 'opaque'.
The only difference I have made so far is adding hours to the work-log.
The page is question can be found here:
http://www.newforest.gov.uk/healthandleisure/
Thanks!
Have you tried an iframe shim? I had a similar experience with the google earth plugin, and adding the shim to the pieces that need to go on top of the swf elements as:
<iframe class="bgi" frameborder="0" scrolling="no" src="about:blank">
<html><head></head><body></body></html>
</iframe>
where bgi is a class that has
height:100%;
width:100%;
z-index:-1;
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>
I have a strange result happening when loading a Partial View using jQuery Ajax into the DOM, but only when viewing the result using IE8.
The Partial View in question (for example purposes only) looks like this;
<aside>Example test</aside>
When the result comes back from the Ajax call it appears to look exactly as above. However when viewing the DOM using the developer tools in IE8 the result looks like this;
<aisde/>
Example test
</aside/>
As a result the element is not recognised and the text does not sit within it. Also the style sheet class for 'aside' is not being applied. This only happens in IE8 as far as I can see.
Any one got any suggestions, other than do not use custom tags?
Thanks in advance
You need to make sure the DOM recognizes HTML5 elements. Essentially you will have to do:
document.createElement('aisde');
Have a look at this link. Without creating the element older IE browsers will not see or style the elements.
The common practice around these issues is to load a html5 fix javascript file within a conditional comment block. The script does a createElement on all new html5 node types.
<!--[if lte IE 8]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->