Develop Reference

TinyMCE 4 custom file picker return value from popup

I would like to implement custom file picker to TinyMCE 4, but i dont know how to return value from second popup window.
Here is my code:
textTiny.settings.file_picker_callback = function(callback, value, meta) {
imageFilePicker(callback, value, meta);
};
var imageFilePicker = function (callback, value, meta) {
tinymce.activeEditor.windowManager.open({
title: 'Photo picker',
url: "files-list.html",
width: $(window).width() * 0.8,
height: $(window).height() * 0.8,
buttons: [{
text: 'Insert',
onclick: function () {
var file_src = $(".photo.selected").attr("href");
callback(file_src);
tinymce.activeEditor.windowManager.close();
}
},
{
text: 'Close',
onclick: 'close'
}],
});
};
I will appreciate any advice.
Thank you.

I think you could start by going to TinyMce website. They have a demo tab where you can find a code snippet for implement basic local file picker here

tinyMCE 4.x - restore default formatting after inserting html

I created an initial version of a plugin for inserting footnotes in tinyMCE, basing on some resources that I found for WordPress and Drupal. Here's the code:
tinymce.PluginManager.add('footnotes', function(editor) {
function showDialog() {
var win = editor.windowManager.open({
title: "Add a footnote",
id: 'footnote-dialog',
body: {
type: 'textbox',
name: 'footnote',
multiline: true,
minWidth: 520,
minHeight: 100,
//style: 'direction: ltr; text-align: left'
},
onSubmit: function(e) {
e.preventDefault();
var footnote = e.data.footnote;
if (footnote.length){
var html = '<span><sup class="footnote-elem" data-toggle="tooltip" data-placement="top" title="'+footnote+'">[*]</sup></span>';
editor.undoManager.transact(function() {
tinyMCE.activeEditor.execCommand('mceInsertRawHTML', false, html);
});
editor.windowManager.close();
}
}
});
}
editor.addButton("footnotes", {
title : 'Insert a footnote',
image : tinyMCE.baseURL + '/plugins/footnotes/img/note_add.png',
onclick: showDialog
});
});
the plugin basically works:
the problem is that the following inserted text is inserted as <sup> too:
So the desired behaviour would be:
put the cursor immediately after the inserted html;
restore original formatting.
Any suggestion/help on how to achieve that?
Thanks

Destroy bootstrap-popover after mousedown event is completed

I want to destroy a specific popover when the mousedown event is completed. As long as the user presses on the mouse, the popover is visible. When the user isn't anymore, there should be a delay of let's say 3.5 seconds, then it should be destroyed.
My current implementation displays the popover correctly as long as the mousedown is true, but when I release the mouse, the popover is destroyed immediately, without a delay. What shoud I do?
jQuery:
function destroyPopover(selector)
{
setTimeout(function () {
$(selector).popover('destroy');
}, 3500);
}
...
$('#otp_table').on('mousedown', 'td', function() {
$(this).popover({
container: 'body',
content: 'Lorem ipsum',
placement: 'top',
}).popover('show');
}, hidePopover(this));

To correct my problem, I've added this line in the popover object:
delay: { "hide": 3500 },
which gives this...
$('#otp_table').on('mousedown', 'td', function() {
$(this).popover({
container: 'body',
delay: { "hide": 3500 },
content: 'Lorem ipsum',
placement: 'top',
}).popover('show');
}, destroyPopover(this);
also, I've removed the setInterval in my destroyPopover() function, which gives this...
function destroyPopover(selector)
{
$(selector).popover('destroy');
}
Hope it will be useful!

Listen to click events inside CKEditor dialog

I have a ckeditor instance, to which I added a custom dialog box using:
CKEDITOR.dialog.add('quicklinkDialog', function(editor) {
return {
title: 'Quick Links',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'tab1',
label: 'Add a quick link',
elements: [
{
type: 'html',
html: '<p>This is some text and then: Click me!</p>'
}]
};
});
I want to add a "click" event listener on the link inside my dialog box. When that link is clicked, content will be inserted into my textrea (the dialog box will also be closed).
Anyone knows how I might do this? Thanks in advance!

Here you go:
{
type: 'html',
html: '<p>This is some text and then: Click me!</p>',
onLoad: function( a ) {
CKEDITOR.document.getById( this.domId ).on( 'click', function() {
var dialog = this.getDialog();
dialog.hide();
dialog._.editor.insertHtml( this.html );
}, this );
}
}
See the API to know more.

Get element that called qTip?

I would like to get the element that called the qtip popup. In the documentation here it lets you set the position. I want to set the position using a jquery selector like $(this).find('.icon'). The problem is that this isn't the element that called the qtip (I think it's window).
Does anyone know how I can get the handle that called it (like it would if I set target to false)?
Thanks.
In the qtip source code I found this:
if(config.position.target === false) config.position.target = $(this);

Here's the solution I came up with and it seems to work. There probably is a better way to do it if I modified the qtip script but I want to leave that alone.
$(".report-error").qtip(
{
content: 'test content',
position:
{
adjust:
{
screen: true
},
target: false, //it is changed in the 'beforeRender' part in api section. by leaving it as false here in the qtip it will set it as the position I need using $(this)
corner:
{
target: 'bottomMiddle',
tooltip: 'topRight'
}
},
show:
{
when:
{
event: 'click'
}
},
style:
{
name: 'cream',
tip:
{
corner: 'topRight'
},
padding: 0,
width: 400,
border:
{
radius: 5,
width: 0
}
},
hide:
{
when:
{
event: 'unfocus'
}
},
api:
{
beforeRender: function() { //get the position that qtip found with $(this) in it's script and change it using that as the start position
this.options.position.target = $(this.elements.target).find('.icon');
this.elements.target = this.options.position.target; //update this as well. I don't actually know what it's use is
}
}
});
It's working on the site now at http://wncba.co.uk/results/