We Keep Coding

tinyMCE-Angular and the code plugin - binding to events in modal

Angular 7, using tinyMCE-angular, and we've configured it to use the 'code' plugin. That plugin (in our case) inserts a button [< >] into the tinymce toolbar.
When you click that button, a modal opens.
The problem I have is that we have an (onKeyUp) event triggering when the content of the main tinymce editor is edited--but it doesn't trigger when the code modal is used, because that modal inserts content without using an (onKeyUp) event.
The HTML:
<editor [init]="tinyMceSettings" apiKey="{{tinyMceApiKey}}" id="_featureTabContent" [(ngModel)]="marketPlaceModel.featureContent"
(onKeyUp)="onEditorKeyUp('Features_Tab')"></editor>
The Component code, which is enabling a 'Preview' button below the tinymce editor to either be enabled or disabled.
onEditorKeyUp(str) {
if (this.marketPlaceModel.featureContent != null && this.marketPlaceModel.featureContent.length != 0) {
this.disablePreviewBtns.featuresbtn = false;
this.marketPlaceModel.featureTabValVisbile = false;
}
else {
this.disablePreviewBtns.featuresbtn = true;
this.marketPlaceModel.featureTabValVisbile = true;
}
tinyMCE has event triggers (https://github.com/tinymce/tinymce-angular#event-binding), I'm assuming I can use those events somehow (like we're using the onKeyUp event currently) to trigger the same onEditorKeyUp() event, but I can't seem to get that to work.
Is there some way to do this that is built into the tinymce editor already, and I'm just missing it?

OK so we ended up fixing this, doing the following:
<editor [init]="tinyMceSettings" apiKey="{{tinyMceApiKey}}" id="_featureTabContent" [(ngModel)]="marketPlaceModel.featureContent"
(onKeyUp)="onEditorKeyUp('Features_Tab')" (onDirty)="onEditorKeyUp('Features_Tab')"></editor>
Adding the onDirty call successfully updates the button when the class is changed from ng-pristine to ng-dirty. However, if you then remove all of the content, it does not re-update the field until the button is clicked. To fix that, we updated the method:
onEditorKeyUp(str) {
if (this.marketPlaceModel.featureContent != null && this.marketPlaceModel.featureContent.length != 0) {
this.ref.detectChanges();
this.disablePreviewBtns.featuresbtn = false;
this.marketPlaceModel.featureTabValVisbile = false;
}
else {
this.disablePreviewBtns.featuresbtn = true;
this.marketPlaceModel.featureTabValVisbile = true;
}
That fixed the issue for us.

jQuery dropdown plugin - How to know if dropdown is open or not?

I am using this plugin for jQuery: http://labs.abeautifulsite.net/jquery-dropdown/
I want to do something when hovering a div element IF dropdown is currently open, or something else if dropdown is currently closed while hovering the div element.
Psuedo code:
$('#foo').hover(function() {
if ( $('*').dropdown('is_visible') ) {
alert('Dropdown is visible, so do something...');
}
else {
alert('Dropdown is NOT visible, so do something else...');
}
});
Can anyone see how this can be acheived with this plugin? Can I search the DOM for some class or something?
Thanks in advance!!

You can seek class "dropdown-open".
Might be:
if ($(".dropdown-open").length > 0) {
// A dropdown is opened
} else {
// No opening dropdown
}

The plugin uses a unique id for each dropdown, i.e., dropdown-1, dropdown-2, dropdown-3, etc.
You may use this id to target a specific dropdown. Check wether its css display is block or none.

Hiding and showing dividers using javascript - Works in JSFiddle, doesn't work on site

I have made a small javascript to hide dividers when the value of a dropdown menu has changed.
But for some reason the script doesn't work on my own site.
document.getElementById("type").onchange = function () {
var v = this.options[this.selectedIndex].value;
if (v == 1) {
document.getElementById("CostDiv").style.display = "block";
} else {
document.getElementById("CostDiv").style.display = "none";
}
}
Here's a link: http://jsfiddle.net/WeHv3/

is there more than one element in the html document called CostDiv ?
Please give us the source of the html document as that is only difference at the moment I can see.

I think problem is your listener are unable to attach with your element.
Just add your JavaScript at the bottom of page and your problem is solved.

TinyMCE opened in jqueryUI modal dialog

When using tinyMCE in a jqueryUI modal dialog, I can't use the hyperlink or 'insert image' features.
Basically, after lots of searching, I've found this:
http://www.tinymce.com/develop/bugtracker_view.php?id=5917
The weird thing is that to me it seams less of a tinyMCE issue and more of a jqueryUI issue since the problem is not present when jqueryUI's modal property is set to false.
With a richer form I saw that what happens is that whenever the tinyMCE loses focus, the first element in the form gets focus even if it's not the one focused / clicked.
Does some JavaScript guru have any idea how I might be able to keep the dialog modal and make tinyMCE work?

This fixed it for me when overriding _allowInteraction would not:
$(document).on('focusin', function(e) {
if ($(event.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
I can't really take credit for it. I got it from this thread on the TinyMCE forums.
(They have moved their bugtracker to github. tinymce/issues/703 is the corresponding github issue.)

It seems there are no propper solution for this issue yet. This is kind of a hack but it really worked for me.
Every time you open the Dialog remove the text area and re add it like following,
var myDialog = $('#myDialog');
var myTextarea = myDialog.find('textarea');
var clonedTextArea = myTextarea.clone(); // create a copy before deleting from the DOM
var myTextAreaParent = myTextarea.parent(); // get the parent to add the created copy later
myTextarea.remove(); // remove the textarea
myDialog.find('.mce-container').remove(); // remove existing mce control if exists
myTextAreaParent.append(clonedTextArea); // re-add the copy
myDialog.dialog({
open: function(e1,e2){
setTimeout(function () {
// Add your tinymce creation code here
},50);
}
});
myDialog.dialog('open');

This seems to fix it for me, or at least work around it (put it somewhere in your $(document).ready()):
$.widget('ui.dialog', $.ui.dialog, {
_allowInteraction: function(event) {
return ($('.mce-panel:visible').length > 0);
}
});

Jquery UI Dialog Remove Issue

Back from this issue
Multiple Dialog
I was able to solve the issue but now problem is that it removes the div so when I access that Div it give error. It gives error because when I open dialog it works fine after removing on close it gives e.rror
I don't want to removed jQuery('#divPopup') If there is only one div present. If multiple jQuery('#divPopup') are there remove() should be working fine.
jQuery('.register_button_class').live('click',function () {
var iFrameobj = createIframe('',iframeUrl);
jQuery('#divPopup').html(iFrameobj);
createDialogWithClose(url,'#bodyId');
return false;
});
Dummy Div for Dialog Popup, This get removed, when Click on Close Jquery Ui Popup.
So when I say
jQuery('#divPopup').html(iFrameobj);
It gives error.
<div id="divPopup"></div>

I'm assuming that your function:
createDialogWithClose(url, '#bodyId');
removes the div id="divPopup" each from the DOM when you close it.
I would suggest not initially including that div in your markup and change your function to create the div and append it to the DOM when it runs. Then remove like you're already doing.
jQuery('.register_button_class').live('click',function () {
var iFrameobj = createIframe('',iframeUrl);
jQuery("body").append("<div id='divPopup' />").html(iFrameobj);
createDialogWithClose(url,'#bodyId');
return false;
});
It's hard to tell what other issues you may be running into with this bit of code that you posted, however, jQuery("body").append("<div id='divPopup' />").html(iFrameobj); will create the divPopup each time the function runs. So, when you close it and it gets removed it will just get created again the next time that button is clicked.
EDIT: How to check if a Div exists -
if ($("#divPopup").length > 0){
// do something here
}

I solved like this
var length = jQuery('#divPopup').length;
if(length>1)
{
jQuery('#divPopup').dialog('destroy').remove();
}else
{
jQuery('#divPopup').dialog('destroy');
}