I have an issue by using the HTMLEditorExtender component.
I'm creating a web form on which I have a textbox, extended with this component. I noted that the HTMLEditorExtender creates a tags to manage a new line or a new paragraph, by using Internet Explorer.
With Chrome or Firefox, there is not any tags added, but only tags.
and this issue is also present in the Demo does anybody have a work around for this issue..??
And another issue is that the Cut Copy and Paste icons in the tool bar are not getting rendered in FireFox and Chrome
The reason for this is that each browser will interpret rich text editors (contenteditable="true") of the differently. So when you hit enter, it will either add paragraphs or divs. If you hold shift + enter, you get a br in IE but not in other browsers.
The only way I can see the output matching up is to format the data on postback by running some regular expressions or a replace to change the tags.
Related
There are so many issues with contenteditable divs and deleting html and/or non content editable content inside editable divs.
Using an answer by the excellent Tim Down here: How to delete an HTML element inside a div with attribute contentEditable?
Using Tim's code, the entire text node gets deleted. I need this to work like any textarea would, deleting character by character and just making sure html elements can be backspaced as well.
I tried the following
else if(node){
var index = node.length-1;
if(index >= 0)
node.deleteData(index,1);
else
this.removeChild(node);
}
But this is obviously not going to work correctly. If I am at the end of the content, things work as expected. But if I place the cursor anywhere else, it's still deleting from the end.
I'm lost at this point, any help is very appreciated
http://jsfiddle.net/mstefanko/DvhGd/1/
After breaking down how google uses contenteditable divs in their google plus user tagging, I landed on a much more reasonable solution. Maybe it will help someone else out.
After adding 1 tag, you can already see a lot of differences in the html browser to browser.
In Google Chrome, a space is added with each tag. The button tag is used. And the chrome-only contenteditable="plaintext-only" is used.
When I backspace the space in chrome, a BR tag is then appended.
In Firefox the BR tag is added immediately with the first tag. No spaces are needed. And an input tag is used instead of the button tag.
The BR tag was the single greatest break-through I had while digging through this. Before adding this, there was a lot of quirky behavior with deleting tags, as well as focus issues.
In IE, more interesting changes were made. A span with contenteditable false is used for the tags here. No spaces or BR tags, but an empty text node.
With all of that, you don't have to copy google exactly.
The important parts:
If you're rendering HTML, do the following...
1. Chrome should use the button tag
2. Firefox/IE should use the input tag
For range/selection you generally want to treat things like tags as a single character. You can build this into your range/selection logic, but the behavior of the input/button tags is much more consistent, and way less code.
IE behaves better in IE7-8 using a span. Just from a UI standpoint. But if you don't care if your site is pretty in old versions of IE, the input has the correct behaviour in IE as well as firefox.
3. Chrome only, use the contenteditable="plaintext-only" attribute on your editable div.
Otherwise, a lot of weird issues happen not only when a user tries to paste rich-text, but also when deleting html elements sometimes the styles can get transferred to the div, I noted many strange issues with this.
4. If you need to set the caret position to the end of the div, set the end of the range before the BR.
for FireFox:
range.setEndBefore($(el).find('br')[0]);
In IE, if you use the formatting buttons (bold, italics, underlines) using the toolbar, or via ctrl+b, ctrl+i, or ctrl+u, formatting does not take effect when you subsequently type. The only way to format text in IE is to highlight text, and then use the toolbar buttons, or key combinations, to format that existing highlighted text. (without modification)
Are there any modifications that anyone has made or could make to fix this?
Obviously it is not intended and this issue does not occur in Chrome, not sure about Firefox.
This is a strange issue...
getNode()
Trying to add a tinyMCE button (inside WordPress) that opens a TinyMCEPopup window.
There I need to check the current NODE where the user has clicked inside the text -- specifically if they have clicked inside a LI node/tag.
I'm using:
tinyMCE.activeEditor.selection.getNode().nodeName
Works well inside, FireFox, Chrome etc, but NOT in IE.
In IE I always get the node "DIV" and...
In IE it actually checks a completely different portion of the markup, like... it seems to get the parent node of the whole TinyMCE editor markup instead of where the user has clicked.
That's why it always returns a DIV.
In IE, when I click inside a LI element (in the visual view of the editor), it puts a strange frame around, which does not put my cursor inside that list element, unless I double-click the frame. See this screenshot here: http://screencast.com/t/9HVjMUvy
getContent()
Does also NOT seem to work in IE...
tinyMCE.activeEditor.selection.getContent()
(IE returns always "empty", nothing selected, while all other browsers give correctly selected portion of the text)
Any ideas how to fix these?
Much appreciated!
Concerning the resize handles you may get rid of them using the following tinymce configuration paramter
object_resizing : false
I've run into one of many Internet Explorer bugs ;)
I'm doing some custom styled input fields and they work exactly as supposed in all browsers, except IE! The inputfields have some padding added on both sides, which works fine on load when the input field isnt filled out with text. But whenever the inputfield gets filled out with text, it kind of ignores the padding that it has been given..
I've uploaded a screenshot of the problem:
...and made a very simple example so you can try for yourself: http://valuable.dk/test.htm
How do I solve this :) ?
I have two pages with identical code. One has an aspx extension, one htm. In Firefox they display exactly the same. In IE8, my dropdown menus appear layered beneath the content...but only on the aspx page. There's a slight positioning discrepancy in IE8 between the two as well. Again, identical code, and pointing to the same css and js files...how is this even possible?
http://webdev.craftonhills.edu/Admissions_and_Financial%20Aid.aspx
http://thelionscall.com/temp/menutest/
I really need to get this working in the aspx file. Thanks.
One of the pages has a FORM tag and a div with a hidden input in it that the other doesn't.
IE will render default padding/margin on a form tag, when many other browsers will not.
I suggest using a good CSS reset.