TinyMCE on IE8: text cursor problem - javascript

when i type something on ie 8, and press 'bold' on toolbar on top of the text editor, the cursor will go to the beginning of the entire text editor. is this bug in tiny mce?
on the other hand, if i select text i typed, and pressed control+b, no problem ; both are fine in firefox,ie6

Have you tried turning off "View->Caret Browsing" in IE8 ? (it is toggled by F7)
That worked for me

I had a similar problem where the image that I wanted to insert was always going to the top of the editor. I solved it by setting the 'onchange_callback' field in the editor's init:
tinyMCE.init({..., onchange_callback: 'updateSelectionBookmark', ...});
This will call my 'updateSelectionBookmark' function when anything is changed on the screen, including the editor being blurred (Read more: http://tinymce.moxiecode.com/wiki.php/Configuration:onchange_callback). My updateSelectionBookmark looked something like:
function updateSelectionBookmark (ed) {
ed.updatedSelectionBookmark = ed.selection.getBookmark(1);
}
This will add a custom property to the editor object which will always contain the latest bookmark.
I then make use of the stored bookmark whenever I need to add the content:
ed.selection.moveToBookmark(ed.updatedSelectionBookmark);
I wanted to insert HTML so I put this before my call to the instance command (In my case, mceInsertRawHTML).
I hope this helps someone, even if my answer is a few months late.
Edit (A few months later): So I originally found this solution while working with TinyMCE 3.2.2.3 but we recently updated to 3.4.4 for compatibility with IE9. Looks like the above solution doesn't work as well as I thought it did. I've since found a (as far as I can tell) perfect solution to this. It's similar to the above except when and where to trigger the callback. Instead of using onchange_callback in the settings, you should use the editor's onEvent event:
tinyMCE.init({
...,
setup: function (ed) {
ed.onEvent.add(function (ed, e) {
ed.updatedSelectionBookmark = ed.selection.getBookmark(1);
});
},
...
});
This replaces the need for the updateSelectionBookmark function or the onchange_callback setting. The reason onEvent works better than onChange is because it gets called after any possible event, including mouse or key presses so the cursor's position is guaranteed to be saved even if moved but the content isn't changed.
After setting up the editor with the above event callback, just use moveToBookmark as stated above to restore the selection. I've tested this on IE9, Chrome, FF6, it works when inserting images/text inside text/tables.

I would'nt say that it's a bug in IE8.
A cursor does'nt move by magic, someone(tinymce) put's him somewhere.
So if the cursor does'nt appear at the expected position, it has to be a misbehaviour in tinymce.
But I can't provide a "bugfix", because this not occurs with my IE8(Win7).
What's your environment?

Related

Chrome is not executing all lines in callback for jQuery animation

I have some code that animates a <div>. When the animation is complete, several things need to happen (mostly manipulation of CSS on various elements), so I naturally put them callback provided by jQuery's .animate();
It behaves as expected in Firefox. I can't tell whether or not it's an issue in IE because there are still some CSS issues preventing it from displaying properly there - I can't tell if it's the CSS or the same problem I'm having with Chrome. Regardless, for the moment, I'm focusing on Chrome.
One thing to note is that it doesn't happen if I do a console.log right before the line that's not being executed. Same if I insert a breakpoint and then let it continue.
$sliders.animate($thisSlideConfig, 250, function() {
$newPg.removeAttr('style');
$curPg = $newPg;
$curPgInf = plugin.getPgInf($curPg);
plugin.setIndTxt();
load2nav();
plugin.adjustNavState();
doCleanup();
});
The line nor being run is $newPg.removeAttr('style');
It doesn't seem to matter where in the block I put that line or how I select $newPg.
Oh yeah, I'm on Chrome 19.0.1084.52.
Removing the style attribute is unreliable. It may not trigger redrawing of the page (whereas a console log or a breakpoint force it to). Instead, try manually calling:
$newPg.style.XYZ = "";
For each style property you defined, if you can list them. If not, try this:
for( var x in $newPg.style) $newPg.style[x] = "";
These will trigger the correct redraw, and should hopefully stop the problem.

Programmatically activating a custom TinyMCE button

I've got a lot of custom buttons on my TinyMCE toolbar, most of which open a dialog box with some further options in when you click them. This all works fine.
Here is an example of something in my tinyMCE_setup() function:
ed.addButton('link2', {
title: '{!link!}',
image: '../style/common/images/link_20x20.png',
onclick: function() {
replyBoxDialog('link', ed);
}
});
However, I want to be able to call these programatically, and faking a .click() on the button with jQuery won't cut it.
I've tried calling the function directly
replyBoxDialog('link',tinyMCE);
But no matter what I try as the second argument, I can't get the right object (so it fails when it's time to insert something into the editor, as it doesn't know what the editor is).
I've also had a try with various execCommand() calls, but I've no idea what to put in there.
Any clues?
All you have to do is to use a real editor object as paramter
var editor_instance = tinymce.activeEditor; // in case you just use one editor
var editor_instance = tinymce.get('my_special_editor_id'); // in case you have more than one editor
replyBoxDialog('link', editor_instance);
I've managed to make it work by creating a variable 'globalEd' at the top of the script and adding globalEd = ed; to tinyMCE_setup(), then I can call replyBoxDialog('dragndrop', globalEd);. This seems like a properly hacky way of doing things though, so I'd welcome any further advice.

jQuery width() function returns wrong value in Internet Explorer 9

I used Easy Slider jQuery plugin before and never had problem until now. And the problem is strange. Check out this home page
http://bit.ly/HKiWY6
The page will pop an alert showing two values:
$("#slider").width()
and
$("#slider3").width()
I already set the value for both in css. One is 710px and one is 700px.
If you run in IE9, it shows the default value of $(window).width() instead for both, whatever the window or document width currently is. FF and Chrome returned correctly. Why is that?
Try the outerWidth, and make sure to wrap it in a windows.ready event listener to make sure all DOM element rendered properly before the width being computed
$("#slider3").outerWidth()
I've had problems with jQuery's width()/height()/offset().top/.left etc in the past when I used them before a certain event fully bubbled. See if setTimeout(function() { alert($('#slider').width()); }, 0); has any effect. It's a cheap nextTick() trick that might be just what you need.

How can I make Jquery code work in IE

I have a script for display of Google suggestions. The script also allows to come down in the suggested list using the arrow keys. When you do so the "text" is filled within the input field. The code for this is:
$("#inp").live("keyup", function(e) {
var search_terms = $("li.current").text();
if(e.keyCode==40)
{
$("#inp").val(search_terms);
}
if(e.keyCode==38)
{
$("#inp").val(search_terms);
}
});
The complete script is over here: jsbin
The problem is that IE8 does not support "oninput" so first of all please test this in IE and replace "oninput" with "onpropertychange" which is an IE only event (so it seems) After doing that you will notice that the script does not respond proper when coming down in the suggestion list. However if you remove the above code than all works very well. But I really need the above code to function in IE, so what should I change in order to make it work properly?
update jquery to latest version :P

Strange Issue in Internet Explorer using Flex

Im using a flex plugin with a methode:
ExternalInterface.call("initialize_width");
This calls a jQuery Function witch initializes the width of the window:
function initialize_width(){
$("#nav_content").css("width",900);
}
It works perfectly on all the browsers expect Internet Explorer...
It says: "'null' is null or not an object", and points to:
try { document.getElementById("").SetReturnValue(__flash__toXML(initialize_width()) ); }
catch (e) { document.getElementById("").SetReturnValue("<undefined/>"); }
I've no idea what the problem should be as the place where the debugger points to is pointing to automatically created code..
Any help?
Thanks Markus
Why are you using document.getElementById("")?
This will return null every time, and you're trying to then call a method on null.
If that's just a code error, then make sure the ID you're getting the element of is the only element on the page with that ID, as there may be a conflict there.
Additionally, you can use
$("#nav_content").width(900);
instead of your css call (though I can't see that fixing your problem).

Categories