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...
Related
This is the code from this question: How to use TinyMCE functions on text without actually selecting that text? - could we just have a browser/platform-compatible version of it?
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
ed.getBody().setAttribute('contenteditable', false);
var range = ed.selection.dom.createRng();
range.setStartBefore(ed.getBody().firstChild);
range.setEndAfter(ed.getBody().lastChild);
ed.selection.setRng(range);
});
}
});
It works on my machine but I've found out that for some people, the text within a container that is editable by TinyMCE is not automatically all selected, although they're using recent browsers (either latest IE or one of the recent FF versions). How can we make sure it is?
Here is the problem. In my php submission page, I have a form with multiple fields including a textarea which is currently using TinyMCE and I also have an option for duplicating existing form. The thing is I can't edit the 2nd editor that was duplicated but the editor appear in textarea place. However I can edit and save 1st editor. I am not sure if its a bug or just me doing something wrong? I tried to update TinyMCE as well but didn't work.. any idea?
function initTinyMCE() {
tinyMCE.init({
mode : "textareas", //mode : "exact", elements : "mytextarea"
theme : "simple"
});
}
initTinyMCE();
$(document).ready( function(){
$('a#addmore').live('click', function(){
//*clone the existing form and inserting form here*
initTinyMCE();
});
$('a#toSubmit').live( 'click', function() {
tinyMCE.triggerSave();
$('.editwork-form').submit();
});
});
I can't seem to get .clone() to work, nothing in the debug console either. However, my working solution is as follows, maybe this helps?
initTinyMCE();
$("#append").live("click", function() {
var ta_count = $("textarea").length;
var elem = document.createElement("textarea");
$(elem).attr("id", ta_count.toString());
$(elem).appendTo("#ta_container");
initTinyMCE();
});
function initTinyMCE() {
tinyMCE.init({
mode: "textareas",
theme: "simple",
theme_advanced_path: false
});
}
Instead of .clone()ing the element, I'm just creating a new textarea and appending it to the container (using the count of all textareas on the page as it's ID to make it unique), then re-calling the tinyMCE initialiser.
Example jsFiddle
Make sure your textareas have different ids, otherwise there won't be a second editor instance! This is a crucial thing when creating tinymce editor instances.
I've got a number of input fields on my form one of which is using TinyMCE (version 3.5.2). Once TinyMCE loads it sets focus to itself. How can I prevent this from happening? I would like to keep the first input selected by default.
This is what my code looks like right now
var tinymce = $('#Content');
tinymce.tinymce({
theme: "advanced",
plugins: "...",
theme_advanced_buttons1: "...",
theme_advanced_buttons2: "...",
theme_advanced_buttons3: "...",
theme_advanced_buttons4: "...",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
content_css: [...],
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js",
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
Update:
After some more testing it looks like this issue is only in IE9. Chrome, FireFox, Opera & Safari do not set focus to the editor on page load. IE9 in IE7 and IE8 mode does not set focus on page load either but IE9 itself will set focus to the editor even when you try to set focus to another input.
This all changes once you load the page with a value in the textarea though. When you do that IE9 works like the other browsers. For now I'm loading the page with a single space in the textarea and that's making IE9 work correctly.
Would help to have the remaining of your inputs and form structure to know the better approach, but something along this lines should help:
jQUERY
function myCustomOnInit() {
$('form *:input[type!=hidden]:first').focus();
}
tinyMCE.init({
...
oninit : myCustomOnInit
});
From the Documentation:
This option enables you to specify a function to be executed when all editor instances have finished their initialization. This is much like the onload event of an HTML page.
Note: You can also pass the function name as a string. But in this case, the function has to be declared in the global scope of the page.
The trick here is to set the focus for the first visible input:
$('form *:input[type!=hidden]:first').focus();
See this working example!
EDITED
Took me quite some time to test this and get it working for IE9, but here it is:
See this Working Solution!
jQuery
setup : function(ed) {
ed.onLoadContent.add(function(ed, o) {
var controlLoad = setTimeout(function() {
if ($('.mceIframeContainer').size()==1) {
$('form *:input[type!=hidden]:first').focus();
clearTimeout(controlLoad);
}
}, 100);
});
}
What this is doing is to run a timeout until the class .mceIframeContainer is found, meaning that the loading is done. After finding it, sets the focus for the first input element and the timeout is cleared.
setup: function(ed){
ed.on('postRender', function (editor, cm) { editor.preventDefault(); });
}
if you execute a single command inside the function it ignores the preventDefault and keeps focusing and scrolling!!!! :D
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
I am using this jquery plugin for called tokeninput it's for autosuggestion when typing:
the code here generates the autosuggestion for the input box:
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
but when I try to append the input which uses the #input-auto it does not do the autosuggestion but it works when it's loaded on the page:
the code is here:
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
I'm trying to solve the problem, but I can't find anything, I also tried to put the live click on the .topicEdit, but it's still not working. :)) thanks
Looks like you're probably initializing the autosuggestion BEFORE you add the input into the DOM. You have to remember that jQuery is stupid, and only does things in the order that you tell it. When you initially 'generate' the autosuggestion, if it can't find it in the DOM at that moment, it won't do anything! So, to solve your problem, you'll want to do the generation of the autosuggest after you insert it into the DOM:
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
});
yay?
Calling tokenInput on page load when input-auto doesn't yet exist is your problem.
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
});
I'm not exactly sure what the problem is, but try using livequery plugin. You don't need to specify an event to it, just a function which will run for all current and future elements that match the selector.
Example:
$(".something").livequery(function () {
// do something with the element
}