We Keep Coding

Spellcheck does not work for uppercase words in TinyMCE for IE10

I am using TinyMCE (version 3.5.10) to provide editing functionality to my application and inside tinyMCE init method, I call browser's spellcheck engine as follows;
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
ed.getBody().setAttribute('spellcheck', true);
});
}
});
However, this work well in IE10 for lower case letters. however spellcheck functionality does not work for upper case words. This funcationality work well on chrome browser for both lower and upper case words. Any idea why this does not work for upper case words?

JQuery UI autocomplete NOT WORKING with Chrome on mac OSX

That's really really weird.
In the web app I did (look here), thanks to cloudant guys for free hosting, I finally implemented Jquery UI Autocomplete widget.
I'm using backbone as a framework.
What is really really weird is that IT WORKS WITH EVERYTHING (even IE9!) except CHROME on apple OS.
What I have is that no dropdown list appears when clicking on the text input field.
Chrome on a different OS wokrs (e.g. on win7).
This is the code I use to implement the widget, I report her ejust for the sake of completeness, even if I suppose that that the problem I have DOES NOT depend on the code.
$(select).on("click",function(){
var valori=["ex1", "ex2", "ex3"];
$(input).autocomplete({
minLength: 0,
source: valori,
focus:function(){
},
select:function(event, ui){
var categoria=$(select).attr('value');
var valore=ui.item.value;
self.model.set({category:categoria, value:valore});
//~ console.log(self.model);
return true;
}
}).focus(function() {
$(this).autocomplete("search", "");
});
});
---- UPDATE ------
I made a comparison btw chrome running on ubuntu and chrome running on macosx.
The result is that under ubuntu, the DOM element gets created (before closing the body tag), while under macosx the DOM element IS NOT created at all.
It looks like under macosx the onclick event is not catched.

I found a really helpful post here
Why does select box on mac chrome doesn't respond to click event?
Basically, it is a bug of chrome under OSX.
As #JamWaffles explains in its answer,"IIRC, the click event works for s in Firefox, however does not work in Chrome. The best, most supported event is change." and it turns out to be completely true!!
So the working code for my webapp is:
$(select).change(function(){//**************CHANGE AND NOT ON('CLICK', ... *******
var valori=["ex1", "ex2", "ex3"];
$(input).autocomplete({
minLength: 0,
source: valori,
focus:function(){
},
select:function(event, ui){
var categoria=$(select).attr('value');
var valore=ui.item.value;
self.model.set({category:categoria, value:valore});
//~ console.log(self.model);
return true;
}
}).focus(function() {
$(this).autocomplete("search", "");
});
});
Hope this answer is useful for somebody else.

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

TinyMCE on IE8: text cursor problem

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?

Problems using jeditable and autogrow

I work on a Webproject using jQuery and CakePHP. I use jeditable as an inplace edit plugin. For textareas I extend it using the autogrow plugin.
Well, I have two problems with this:
First, autogrow does only work on Firefox, not on IE, Safari, Opera and Chrome.
Second, I need a callback event for jeditable, when its finished showing the edit-component, to recalculate the scrollbar
Im not so familiar with Javascript, so i can't extend/correct this two libraries by my own. Has anyone used another js-library for inplace edit with auto growing textareas (no complete editors like TinyMCE, I need a solution for plain text)?
I also found Growfield, it would work for other browsers, but there's no jeditable integration...
(sorry for my english)

I didn't see any problems using Autogrow with jeditable in any browsers but here is an implementation of Growfield with jeditable. It works much in the same way that the Autogrow plugin for jeditable does. You create a special input type for jeditable and just apply .growfield() to it. The necessary javascript is below, a demo can be found here.
<script type="text/javascript">
/* This is the growfield integration into jeditable
You can use almost any field plugin you'd like if you create an input type for it.
It just needs the "element" function (to create the editable field) and the "plugin"
function which applies the effect to the field. This is very close to the code in the
jquery.jeditable.autogrow.js input type that comes with jeditable.
*/
$.editable.addInputType('growfield', {
element : function(settings, original) {
var textarea = $('<textarea>');
if (settings.rows) {
textarea.attr('rows', settings.rows);
} else {
textarea.height(settings.height);
}
if (settings.cols) {
textarea.attr('cols', settings.cols);
} else {
textarea.width(settings.width);
}
// will execute when textarea is rendered
textarea.ready(function() {
// implement your scroll pane code here
});
$(this).append(textarea);
return(textarea);
},
plugin : function(settings, original) {
// applies the growfield effect to the in-place edit field
$('textarea', this).growfield(settings.growfield);
}
});
/* jeditable initialization */
$(function() {
$('.editable_textarea').editable('postto.html', {
type: "growfield", // tells jeditable to use your growfield input type from above
submit: 'OK', // this and below are optional
tooltip: "Click to edit...",
onblur: "ignore",
growfield: { } // use this to pass options to the growfield that gets created
});
})

knight_killer: What do you mean Autogrow works only with FireFox? I just tested with FF3, FF2, Safari, IE7 and Chrome. Works fine with all of them. I did not have Opera available.
Alex: Is there a download link for your Growfield Jeditable custom input? I would like to link it from my blog. It is really great!

Mika Tuupola: If you are Interested in my modified jeditable (added two callback events), you can get it here. It would be great if you would provide these events in your official version of jeditable!
Here is my (simplified) integration code. I use the events for more then just for the hover effect. It's just one usecase.
$('.edit_memo').editable('/cakephp/efforts/updateValue', {
id : 'data[Effort][id]',
name : 'data[Effort][value]',
type : 'growfield',
cancel : 'Abort',
submit : 'Save',
tooltip : 'click to edit',
indicator : "<span class='save'>saving...</span>",
onblur : 'ignore',
placeholder : '<span class="hint"><click to edit></span>',
loadurl : '/cakephp/efforts/getValue',
loadtype : 'POST',
loadtext : 'loading...',
width : 447,
onreadytoedit : function(value){
$(this).removeClass('edit_memo_hover'); //remove css hover effect
},
onfinishededit : function(value){
$(this).addClass('edit_memo_hover'); //add css hover effect
}
});

Thank you Alex! Your growfield-Plugin works.
In meantime I managed to solve the other problem. I took another Scroll-Library and hacked a callback event into the jeditable-plugin. It was not that hard as I thought...