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 :)
Related
my tinymce(ver 4.1) "insert/edit image" dialog doesn't have a image browse button, but I want to add the button just look like tinymce official demo shows), can anyone help me?by the way,how can i use PHP to upload image when I click the image button?I need your help~
I am new here,and i am sorry i didn't have enough reputation to post images.
I got it!
I need define a javascript function, called "file_browser_callback",and "file_browser_callback" attribute to the function,for example:
function myCustomFileBrowser(field_name, url, type, win) {
// Do custom browser logic
win.document.forms[0].elements[field_name].value = 'my browser value';
}
tinyMCE.init({
...
file_browser_callback : myCustomFileBrowser
});
See also: http://www.tinymce.com/wiki.php/Configuration3x:file_browser_callback
I have form with few input box, for example:
FORM START
News -> input
News picture -> input (id="newspics", name="news_picture")
Add -> submit button
"Hyperlink Set picture" -> opening Fancy box window with gallery (table, 5*5, 25 pictures), images must be hyperlinked with unique id
FORM END
I need communication between Fancy box onclose() and my input (news_picture), when user click to picture I need: closing fancy box, putting id number to my input (news picture). Please if anybody help me.
Update:
I solved problem.
I make little php script, fwrite function write id number when user click to addpicture.php?id=$id in fancy box
After this, I get them, code:
'onClosed' : function() {
jQuery.get('aa.txt',function(data){
alert(data);
});
}
If you want to pass php variables into a fancybox callback you can do
$(".fancybox").fancybox({
"onClosed" : function(){
$("#input_selector").val(<?php echo $phpVariable; ?>);
// or add an ID attribute
// $("#input_selector").attr("id", ""+<?php echo $phpVariable; ?>+"");
}
});
... the example above is to get you an idea how to do it, its not a recipe ;)
Bear in mind that onClosed is a callback for fancybox v1.3.4 ... if yours is v2.x use afterClose instead.
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;
});
}
I applied tinyMCE to a text area in my sites admin area.
Now there is a page "create category" and and page "edit category."
In edit category, there is a drop-down of the categories, I select one and the text area for category description is filled in with AJAX and a tinyMCE function:_
tinyMCE.activeEditor.setContent(responce);
The category description is filled into the text area on which tinyMCE is applied. But when I click submit, NOTHING happens at all.Similarly, on the create category page, there is no drop down, but when you click submit, nothing happens at all.
This problem does not occur when tinyMCE is not applied. But on the edit category page, it was submitting but not filling in the text area with the category description, when instead of
tinyMCE.activeEditor.setContent(responce);
I used
$("#lang_description").html(responce);
in the callback function for jQuery AJAX.
So the main problem is that the forms are not being submitted and that was the story.
Someone suggested to use the tinyMCE function getContent before I post but I dont understand where and how I would do that.
I've faced a situation once like yours and what I did that was first i set in tinyMCE.init
tinyMCE.init({
mode : "exact", // Used exact
elements : "page_content", // I gave the textarea id and name 'page_content'
...
});
Then I've wrote a function as follows
function get_page_content()
{
var ed = tinyMCE.get('page_content');
return ed.getContent();
}
Then inside my form submit event handler/function I just did
$('#page_content').val(get_page_content()); // I populated my textarea (id=page_content) before the form submission
I received the data using $page_content=$_POST['page_content'] in my php script
Update: May be you can use
var ed=tinyMCE.activeEditor.getContent(); // when you didn't set the mode : "exact" in init function
Reference: getContent and setContent
May be not a solution but If this helps then I'll be glad to know. Also notice Sparky672's comment.
I am editing to try to put my primary question at the beginning of this post:
1) I am sitting at my customers/preferences page updating info in the form
2) I want to add a widget to my list of available widgets, so I need to open the widgets/addWidget page/form to add a new widget (note I am still working in my current customers/preferences page/form, so I need to continue with this page after adding a new widget in the widgets/addWidget page/form.
3) I select a link to go to widgets/addWidget, and I have jQuery dialog open this link in a dialog with the addWidget form and submit button
4) after adding a newWidget in the dialog popup form, I want to submit the newWidget (the code for addWidget is in the widgets/addWidget controller/action, not in the customers/preferences action)
Problem: the addWidget form action goes to widgets/addWidget, so when I submit the addWidget form in the dialog, it takes me away from my current customers/preferences page
Question 1) what is the proper/best way given this scenario to popup a form in another controller/action to submit that form, but then resume my current controller/action?
Question 2) should I move all of my form and code from the widgets/addWidget controller action into my existing customers/preferences action? (that seems to be the wrong approach)
I have researched jQuery documentation, Zend documentation, and searched other threads with trusty Google and stackoverflow, but I am still struggling to figure out the right way to get this to work with Zend Framework and popup forms such as jQuery dialog.
I have a working Zend action/controller that using a Zend Form and view to display and process my form. I have also been able to use jQuery dialog to popup a window when I click the link to that controller/action.
My issue is with the proper way to get the dialog to display the form and still be able to submit and process the page. If I only load the #content tag in the dialog the form and submit button appear in the dialog box, but the submit button no longer works. If I let the dialog open the full page (not just the #content) now the form will process properly, but the form submit is set to go to my action page for processing, so the form submits and takes me away from the original page and to the real controller/action page instead.
In my customerController I have a preferencesAction where a customer can choose a widget from a list of widgets. When the customer needs to add a new widget to the list, I want to open the addWidgetAction from the WidgetsController in a popup form. I want to add the widget in the popup form, submit the form to the addWidgetAction, and come back to the customer/preferences page I was already working in (with the newly added widget available in my list to select from).
//CustomerController
public function preferencesAction(){
//this is where I click a link to /widgets/addWidget and use jQuery dialog for form
}
//Customer preferences.phtml
<script>
$(document).ready(function() {
$('#add-link').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 600,
height: 500,
buttons: {
"Add Widget": function(){
$("#AddWidget").submit();
},
"Cancel": function(){
$(this).dialog("close");
}
}
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
<a id="add-link" href='<?php echo $this->url(array('controller' => 'widgets',
'action' => 'addwidget')); ?>'>Add a Widget...</a>
//WidgetsController
public function addWidgetAction(){
// display form to add widget
// process form, validate, add to widgets table
$baseUrl = $this->getRequest()->getBasePath();
$action = $baseUrl . '/widgets/addWidget';
$form = new Form_Widget();
$form->setName('Add Widge')
->setAction($action);
}
I need to understand how to get the dialog to load my Zend action page for form processing, but without requiring the entire layout with header, footer, etc. I also need to understand how to process the form in the dialog popup without moving away from my original page where the popup was linked from.
Thank you for your assistance!
Well, I am not sure if i understand your question but you can try this
You can load your form in UI dialog box, to disable layout do this on you can do this
public function addwidgetAction(){
$this->_helper->layout()->disableLayout();
//just diable layout and do eveything normal
}
on your preferences.phtml file load the content of url baseurl/contrller/addwidget to jquery modal dialog
UPDATE
One way is use a jqueryplugin fancybox (external src) check the forgot password link
The other way is to use ajax
UPDATE
Well now i read your question well, though don't understand so clearly, i understand that you are trying to do something that is quite ambitious. And you cannot achieve through normal load method. You need to use ajax
I have to admit that I don't like jquery ui modal dialog so i don't know much about it, and i usually use jquery fancy box where it would give me an ability to load external page. Maybe you can do this through jquery ui modal dialog box.
I guess the problem that you are facing right now is you open a dialog box, you get the form in dialog, and you submit the form, it sends the normal post request, so dialog is reloaded, that's what happens in the link i have above, just click on forgot password link
Well there's solution for that too, the solution is ajax, and i hope you are quite familiar with it. you send ajax request and get response back, and depending on your response, you can exit dialog box as well update the the parent (preferences controller page) but that is quite ..... I tried to so same with few months back, but not with zf, i don't know how much i accomplished but it sure gave me a nasty headache