I have a CMS system that displays two CKEditors side by side so that the user can edit the main body and sidebar content. Both editors share the same toolbar.
I have added a plugin to allow users to add embedded data into the editor.
The only problem is I need the data to show on the currently selected editor, where the keyboard cursor is currently setting.
How do I use javascript or JQuery to get the CKEditor element that is currently selected before the button in pressed on the toolbar.
Right now I can only get it to work by directly selecting a specific editor instance.
CKEDITOR.instances.mtxDescription.insertHtml(data);
However I need to be able to have the data drop directly into whichever editor is selected
If you're creating a CKEditor plugin, then you already have a reference to the editor that it's active, check the basic tutorial about how to create a CKEditor plugin http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin
editor.addCommand( 'insertTimestamp',
{
exec : function( editor )
{
var timestamp = new Date();
editor.insertHtml( 'The current date and time is: <em>' + timestamp.toString() + '</em>' );
}
});
I'd put a class on the editor wrapper at some level where unique IDs exist, then something like:
var myEditor = $(this).closest('.my-class').attr('id');
I was able to solve this issue by adding a blur event to each editor and storing the last id of the last time the event was called.
var currentEditorInstance = 'mtxDescription';
for(name in CKEDITOR.instances) {
CKEDITOR.instances[name].on('blur', function () {
currentEditorInstance = this.name;
});
}
Related
I am creating chat program in php using jquery, ajax and MySQL.
and my problem how to auto scroll down when div is overflowed.
like when user enter new line it will goes down and I want to auto scroll down when new messages appeares down.
and I am trying to do this dynamically using scroll height change to trigger this $('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);. because using scroll height changing it will also scroll to other users browser who is chatting on the other side.
I also have tried to trigger scroll down event using keypress and click event but that is only works for the current users browser, so on the other hand for another user that wont work or wont auto scroll down, he have to scroll manually to view new messages and I don't want that.
so that's why I am trying to use scroll height event. I also tried the mutate plugin for this purpose and it works fine only for the localhost and conflict on the live server and super slow down the chat.
So I have to leave this plugin for this problem.
so please kindly give me the solution without using any plugin to achieve this purpose.
I have created something like this
setInterval(function(){
oldsH = 0;
newsH = msgBox.prop('scrollHeight');
if (newsH > oldsH){
oldsH = newsH
msgBox.stop().animate({scrollTop:(msgBox[0].scrollHeight)},1000);
}
},500);
and it only works in setInterval() function, I don't want to use it in this function.
because it triggers again and again the scroll event,which cause you can't scroll up to see older messages.
so is there anyway to achieve this without setInterval??
many thanks in advance.
UPDATED
If you have only one chat box, then instead of a class, assign it an id and use code like below:
var chatBox = $('#chatBox');
chatBox.scrollTop(chatBox[0].scrollHeight);
For your reference, I created a Fiddle
I'd be glad to know if you already solved your problem since this is a two-years-ago question.
I've been searching for the function similar to yours for a chat-application for my client. And I solved the problem by myself alternately (Since the internet's resource is limited).
According to you, auto scroll-down when new messages received would be annoying to user when he is reading the old messages. So, you can actually prompt the user if there's new message received and provide a button to scroll down to latest message.
This is how I solved my problem, perhaps yours too :)
// Scroll-to-latest toggle
$(document).ready(function(){
$(BUTTON_DIV).click(function()
{
var latest = $('CONTENT_DIV');
latest.scrollTop(latest[0].scrollHeight);
});
});
// Prompt with "Scroll-to-latest toggle" if new message detected by scrollheight change
function customFunc(){
var window = $("CONTENT_DIV");
var scroll = $("BUTTON_DIV");
if(window.scrollTop() + window.innerHeight() >= window[0].scrollHeight) {
scroll.hide(); //hide scroll-to-latest toggle
} else {
scroll.show(); //show s-t-l toggle
}
}
setInterval (customFunc, UR_INTERVAL); //detect per one ms
Full demo: https://jsfiddle.net/Jvloo/k962u211/
I am new to PHP and am trying to figure out how to code some specific functionality. I have a product page that shows a photo and has two dropdown menus, one for size and one for color. What I would like to do is when the page first loads I set a variable that has the default product SKU. When the menus change I want to change the variable to the combined values of the two menu items selected. As the variable changes I want to reflect this in the photo and in a hidden form value (for eventual submission to a cart).
So when the page loads it shows picture A with the associated values in the size and color dropdowns. Then when either of the dropdowns change the photo dynamically changes to reflect it (while also updating the hidden form value).
Any suggestions would be much appreciated.
JavaScript, or a JS library like jQuery, is what you need here.
For jQuery (preferred, way easier):
var $select = $('#Dropdown'),
$img = $('#Picture');
$select.on('change',function(){
$img.attr('src',$(this).val());
});
For JavaScript:
var dropdown = document.getElementById('Dropdown'),
img = document.getElementById('Picture');
dropdown.addEventListenter('change',function(){
img.src = this.value;
});
Not tested, but should work.
Edit: when using the JavaScript solution, make sure the window is loaded first (it won't work if the elements dont exist yet).
window.onload = function(){
// do your magic here
}
Firstly, PHP is a server side language which effectively means, anything that it generates must be processed by the server and then sent back to the browser. Therefore in this particular case, you need to use a client side language such as Javascript, or to make the code easier, a library such as jQuery.
To learn more about jQuery, see here:
http://jquery.com/
In very generalised terms (as you have not posted any code), here is an example of changing
an image using jQuery:
// Select the dropdown from the DOM
var dropdown = $('#dropdown_id');
// Select the image from the DOM
var image = $('#image');
// Set the onchange event
// This will be fired when the select value is changed
dropdown.on('change',function(){
// Get the value of the selected option
var value = $(this).val();
// Change the source of the image
image.attr('src',value);
});
I'm creating an inline editable table using jQuery and the editable plug-in.
It works well so far but will only submit and save to the database upon pressing ENTER. I found a thread on here which helped me to tab between boxes but it doesn't submit the data when TAB is pressed.
My code that allows me to switch between boxes is as follows:
$('.editScheduleRow').bind('keydown', function(evt) {
if (evt.keyCode==9) {
var nextBox='';
var currentBoxIndex=$(".editScheduleRow").index(this);
if (currentBoxIndex == ($(".editScheduleRow").length-1)) {
nextBox=$(".editScheduleRow:first"); //last box, go to first
} else {
nextBox=$(".editScheduleRow").eq(currentBoxIndex+1); //Next box in line
}
$(this).find("input").blur();
$(nextBox).click(); //Go to assigned next box
return false; //Suppress normal tab
};
});
To submit using ENTER I use this:
$(".editScheduleRow").editable("../../includes/ajax/save-schedule-row.php", {
"submitdata": function ( value, settings ) {
return { fieldname: this.getAttribute('fieldname'), rowID: this.getAttribute('id') };
},
});
I also found a thread with a suggestion but it didn't work for me: jEditable submit on TAB as well as ENTER
Please let me know if you need any more information.
My original answer was based on reading the documentation of jQuery Editable, which is a jQuery extension that is similarly named, but not the same as jEditable from the question. Let's try again with the correct library.
The problem is that you are moving the focus away from the input box when pressing tab, but when the focus is moved away from it, it doesn't save the contents. To illustrate this, try this: click one of the fields and edit it, then click elsewhere on the document. You'll see that the value in the table - and this is what you where simulating using the blur() jQuery function on the element.
There are (again) two ways to solve this problem. First, we can modify what the program does when a field loses focus:
[..]
"submitdata": function ( value, settings ) {
return { fieldname: this.getAttribute('fieldname'), rowID: this.getAttribute('id')
};
"onblur": "submit";
},
[..]
This has the effect that when doing the experiment I described above to help you understand why it wasn't working, you'll now also see that it gets saved. This may not be what you want. In that case, you can instead make sure that you trigger a submit instead of a blur:
replace this line:
$(this).find("input").blur();
by this one:
$(this).find("form").submit();
Now the experiment will no longer cause the value to be changed, but it's no longer an accurate simulation of what we're doing and when pressing tab the value will be changed.
TinyMCE editor lets you assign a custom button to its editor toolbar. I did that and hooked it up to a Flickr account, so a custom dialog box appears with a selection of images.
I want the user to be able to then click any image and have the URL of that image added to the original input, from where the custom TinyMCE button was clicked.
This is the TinyMCE custom button code I have:
setup : function(ed) {
// Add a custom button
ed.addButton('flickr', {
title : 'Add Flickr Image',
image : 'styles/media_icons/flickr.png',
onclick : function() {
// Add your own code to execute something on click
$("div.mediaLibraryPopup .box").load("scripts/loadMediaLibrary.php");
$("div.mediaLibraryPopup").fadeIn("slow").addClass(container);
}
});
}
Then, when you click on an image, I have this jQuery to handle that event:
$("div.mediaLibraryPopup img").live("click", function() {
var url = $(this).attr("src");
$("div.mediaLibraryPopup").fadeOut("slow");
});
I've been reading the TinyMCE documentation and working with it for hours, and I can't figure out how to pass that URL variable back to the TinyMCE "ed" event so that it can add it to the input.
Since I'll be using this on multiple inputs, I can't just hard-code the input class, either. Any thoughts?
I think you need to insert The URL on the Current Cursor Location in the Editor. if that is the case then you can use this command to insert the content:
tinyMCE.execCommand('mceInsertContent',false,'Your Content Goes Here...');
Hope this helps :)
I have had a look at sticky notes with php and jquery and jStickyNote, and while both seem to look pretty nifty they lack some elements I am after. I haven't been able to find a way to allow particular users to modify the stickies they create, nor have I found a good way to save their stickies into my database. I am, and would like to keep using php, mysql and jquery. I have thought with the first link that I could just save the image created into a folder and save the url into that database but then I cannot go back and allow the user to change the content of the sticky. With the second link there does not seem to be support for saving the sticky at all. I'd also like to create a function where adding stickies to a message board (for everyone to see) does so in a randomly placed way that looks natural. Any ideas for either of these problems?
Here is some javascript that should help:
// Called when the edit (A) button is pressed
function edit(event, editButton)
{
// Get existing title and change element to textarea
var stickyTitle = $(editButton).parent().find('p.stickyTitle');
var textareaTitle = $(document.createElement('textarea')).addClass('textareaTitle');
$(textareaTitle).text(stickyTitle.html());
// Get existing description and change element to textarea
var stickyDescription = $(editButton).parent().find('p.stickyDescription');
var textareaDescription = $(document.createElement('textarea')).addClass('textareaDescription');
$(textareaDescription).text(stickyDescription.html());
// Create save button
var saveButton = $(document.createElement('div')).addClass('jSticky-create');
// Add save button, then replace title, then replace description, then remove edit button
$(editButton).before(saveButton);
$(editButton).parent().find('p.stickyTitle').before(textareaTitle).remove();
$(editButton).parent().find('p.stickyDescription').before(textareaDescription).remove();
$(editButton).remove();
// Set description textarea focus and set button actions
textareaTitle.focus();
setActions();
}
// Called when the save (tick) button is pressed
function save(event, saveButton)
{
// Get existing title and change element to paragraph
var textareaTitle = $(saveButton).parent().find('textarea.textareaTitle');
var stickyTitle = $(document.createElement('p')).addClass('stickyTitle');
var newTitleValue = textareaTitle.val();
$(stickyTitle).html(newTitleValue);
// Get existing description and change element to paragraph
var textareaDescription = $(saveButton).parent().find('textarea.textareaDescription');
var stickyDescription = $(document.createElement('p')).addClass('stickyDescription');
var newDescriptionValue = textareaDescription.val();
$(stickyDescription).html(newDescriptionValue);
// Create edit button
var editButton = $(document.createElement('div')).addClass('jSticky-edit');
// Add edit button, then replace title, then replace description, then remove save button
$(saveButton).before(editButton);
$(saveButton).parent().find('textarea.textareaTitle').before(stickyTitle).remove();
$(saveButton).parent().find('textarea.textareaDescription').before(stickyDescription).remove();
$(saveButton).remove();
// Set button actions
setActions();
// Add the object to the ads div
$('#ads').append(object);
// Update your database here
// by calling the saveAd.php
}
function setActions()
{
// call these after changes are made to anything
$('.jSticky-create').unbind('click').click(function(e)
{
save(e, this);
});
$('.jSticky-edit').unbind('click').click(function(e)
{
edit(e, this);
});
$('.jSticky-delete').unbind('click').click(function(e)
{
remove(e, this);
});
}
function remove(event, deleteButton)
{
var stickyMaster = $(deleteButton).parent();
$(stickyMaster).remove();
//then call savead.php with delete parameter
}
Have you looked at any of the code? I took a really quick look at jStickyNote.
Basically, the "sticky note" is a css-styled, text area (that is surround by a div element).
If you want users to be able to save sticky notes/edit past notes, here's what I'd recommend:
Add some button to each note that says "Save" or with a similar meaning.
When a user clicks the "Save" button, you'll need to grab the text from that specific textarea element and then save that text to a database.
With that said, you'll probably need to design some sort of database with a user table and sticknote table. The sticknote table can have a foreign key to the user table.
You'll also want to add some sort of login functionality to your site and then load the correct sticky notes for the authenticated user.
Good Luck!
You can have a look at http://sticky.appspot.com - the code has been released by the google appengine team.
Sorry for not going into specifics, but you could modify the plugin code to load a php script whenever a save button is clicked (or the box is moved, or even on keyup) with $.ajax(), passing it the horizontal and vertical positions and content of the note ( say, $("#note-content").text() ) and have the script plug those things into a database with a MySQL query. Just serialize your data and send it away. This gets more complicated if you want let your users have multiple notes, but start with one. Where is you hangup, exactly? I would be more specific, but I'm not sure what you already know.
I was thinking earlier about adding this feature to an app I'm working on. The thing is, I don't like those plugins. It should be very simple to write your own though. Let me know if you need help with something specifically.