TinyMCE file_browser_callback not showing browse button - tinymce

I am unable to get the TinyMCE file_browser_callback property to work, so that the Image dialog shows a browse button.
I downloaded TinyMCE 5.08 from tiny.cloud (prod version). I insert the library, then call init() below. I added a file_browser_callback property with a callback function, which is supposed to open a modal window, from where I pick up a file from a media library and insert it back.
For reasons I cannot understand I cannot make the browse button, in the image dialog, visible.
<script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
<script>
$(function() {
tinymce.init({
height: 500,
selector: 'textarea.wysiwyg',
plugins: ['image'],
branding: false,
convert_urls: false,
file_browser_callback: function(field_name, url, type, win) {
$('#file-modal').modal({
duration: 200,
onApprove: function () {
if ($('#file-modal .file.selected').length) {
let $file = $('#file-modal .file.selected');
win.document.getElementById(field_name).value = $file.data('path');
}
}
}).modal('show');
}
});
});
</script>
The browse button should appear when the callback exists. I've tried implementing the callback as a separate function and passingit as a string with no luck. There are no error messages visible in the console.
I also tried 5.07 with no luck. I have this working on a separate application

The API you are using is a TinyMCE 4 API. Per the migration documentation, in TinyMCE 5 you need to use file_picker_callback instead:
https://www.tiny.cloud/docs/migration-from-4x/#file_browser_callbackfile_picker_callback
https://www.tiny.cloud/docs/configure/file-image-upload/#file_picker_callback

Well, it appears TinyMCE dropped the support for file_browser_callback from their 5.x versions. Propably because they offer file hosting cloud services themselves now and it might be a premium plugin. What a fantastic solution. I'll fall back to using 4.9.4 prod version.

Related

How to display a form in modal dialog on page load?

This is on Drupal 8.6, PHP 7.2, Theme is based on Bootstrap.
The scenario is, I want to display a dialog box with a subscription form in the home page. The dialog box will be loaded automatically when page load, not by click any link.
I see there are lot of examples there in the net, but all related to by clicking a link, modal will display. But I want to load it without any click.
I partially successful by using BootstrapDialog, but ajax is not working on form submit button. What I did, I attach a js file in the front page, with the code below. It shows the Modal Dialog box, and I tuned a page--newsletter--subscribe.html.twig, its working But submit button not working not ajax is working.
BootstrapDialog.show({
title: 'Subscribe To Newsletter',
message: jQuery('<div></div>').load('/newsletter/subscribe'),
closable: false,
draggable: true,
closeByBackdrop: false,
closeByKeyboard: false,
buttons: [{
label: 'Close',
action: function(dialogRef){
dialogRef.close();
}
}]
});
I saw there is an example in code node.preview.js file like this:
var $previewDialog = $('<div>' + Drupal.theme('nodePreviewModal') + '</div>').appendTo('body');
Drupal.dialog($previewDialog, {
title: Drupal.t('Leave preview?'),
buttons: [{
text: Drupal.t('Cancel'),
click: function click() {
$(this).dialog('close');
}
}, {
text: Drupal.t('Leave preview'),
click: function click() {
window.top.location.href = event.target.href;
}
}]
}).showModal();
But I never able to make it working in my custom module.
If some one can help on this, will be really great!
Update:
I just tried to put a link manually in the template and tried to open the dialog, but it gives me some error:
Show Dialog
The error is as follows:
dialog.js?v=8.6.4:35 Uncaught TypeError: $element.dialog is not a function
at openDialog (dialog.js?v=8.6.4:35)
at Object.dialog.showModal (dialog.js?v=8.6.4:52)
at Drupal.AjaxCommands.openDialog (dialog.ajax.js?v=8.6.4:96)
at Drupal.Ajax.success (ajax.js?pkvhqx:155)
at Object.success (ajax.js?v=8.6.4:234)
at i (jquery.min.js?v=3.2.1:2)
at Object.fireWith [as resolveWith] (jquery.min.js?v=3.2.1:2)
at A (jquery.min.js?v=3.2.1:4)
at XMLHttpRequest.<anonymous> (jquery.min.js?v=3.2.1:4)
It seems some of the library is not loaded. Here is my global attachement:
dependencies:
- core/jquery
- core/jquery.ui
- core/drupal.ajax
- core/drupal
- core/drupalSettings
- core/drupal.dialog
- core/drupal.dialog.ajax
- core/jquery.form
- core/jquery.once
- core/modernizr
Any help will be great!
This issue is related to the pro theme I have purchased named "glazed". Its removed the bootstrap modals library. When I disabled the Bootstrap Modal library from theme settings, Modals are working fine. But when I tried to enable the Bootstrap Modal, it gives the following message, which explain everything:
Your theme is trying to load the Bootstrap Modals override library from the bootstrap basetheme. This library is not compatible with Glazed Builder and therefore its assets have been removed from the page. To make this message disappear Please go to your (default) theme settings form, scroll down to Bootstrap settings, and under the Javascript category disable the "Bootstrap Modals" setting.

jsTree not showing up checkbox even adding required plugin

I am using the JS tree sample link to display a hierarchy using JSTree.
I am able to display the tree as in the below screenshot
So far so good. To this am adding checkboxes instead of bullets and used the below plugins object provided by official jstree site .
$('#jsTreeContainer').jstree({
plugins: ["checkbox"],
core: {
'data': arrayCollection,
"themes": {
"icons": false
}
},
"checkbox": {
"three_state": false,
"whole_node": true,
"keep_selected_style": false,
"tie_selection": true
},
});
But still I am seeing the same output( am not getting checkboxes) and also the tree is expanding only when double clicked on node.
Can someone give me ideas on how to display checkboxes and also how to expand a node by just clicking it once?
Wrongly pointed required js/css files which caused this issue.
I am now seeing checkboxes properly and also nodes are getting expanded when clicked once.
Hi I reviewed my js and css files paths. Following are the files which should be referred:
<script src="~/Scripts/jstree.min.js"></script>
<script src="~/Scripts/jquery.scrollbar.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<link href="~/Contents/themes/default/style.min.css" rel="stylesheet"/>

How do I initialize TinyMCE on a ajax loaded textarea in 4.x?

I am upgrading to tinyMCE 4.x and I am attempting to initialize tinyMCE on a textarea loaded via AJAX. In 3.x I did something of the sort: TinyMCE - attach to divs loaded via AJAX calls but this does not seem to work in 4.x.
tinymce.remove();
tinymce.init();
This works well!
In TinyMCE 4.x mceRemoveControl and mceAddControl have been removed. You have to use mceRemoveEditor and mceAddEditor instead.
Got it from: [Resolved] mceRemoveControl and mceAddControl in tinymce 4
Otherwise, you can reload tinymce.init({ ... }) but that should not be the way as it would be slower.
You can load TinyMCE after including textarea with the following code:
//initialize tinyMCE in page
tinymce.init({selector:'textarea'});
just for then running into the same problem.
I solved the problem with wrapping the init Script into a function like this.
in my init.js file
initializeTinyMce();
function initializeTinyMce(selector){
if(selector == undefined){selector = 'textarea';}
...
tinymce.init({
selector: selector,
...
});
}
so on your ajax request result you add
<script type="text/javascript">
$(document).ready(function(){
initMCE('textarea#someId');
});
</script>
works fine for me
tinymce.init({ selector:'textarea' });
just use this in ajax and if you are not able to pick the value then Before submitting the form, call
tinyMCE.triggerSave();

CKEditor Plugin: text fields not editable

I am creating a CKEditor plugin, using version 4.2.1. I am trying to follow the tutorial on a Simple Plugin. However, the text inputs in my dialog window are not editable / clickable in the dialog, even when I just copy in the entire abbr plugin from the tutorial with no changes.
I can still click the dialog tabs, OK / Cancel buttons, and drag the dialog around. I have added in other elements (like selects) to the dialog in my custom version, and I can interact with those.
When I check the text input elements in Chrome's Dev Tools, I can add text via the Console / jQuery and it appears. I get no failures in the Console.
$('#cke_229_textInput').val('help');
Will add text to the text input and display it on the screen. But I can't interact with the element via mouse / keyboard / browser. Is there something obvious in the CKEditor configuration that I am missing? Sorry if this is a really stupid question--first time working with CKEditor. I have also searched the CKEditor forums and Google, without finding any related issues.
This happens in both Chrome 30 and FF 24.
My call to create the editor:
var me = document.getElementById('resource_editor_raw');
editor = CKEDITOR.replace(me, {
fullPage: true,
removePlugins: 'newpage,forms,templates',
extraPlugins: 'abbr',
allowedContent: true
});
Thanks for any tips or hints!
Update #1
Thinking this might be related, I have also tried setting the z-index of the text element to very high, using Chrome's Dev Tools. No luck, it is still not editable / highlightable...
Update #2
This seems to be this conflict with jQuery UI. The suggested fix doesn't work for me yet, but will poke around...leaving this up for anyone who might stumble across it.
Final Update
So Brian's tip helped me. Both the Bootbox modal backdrop (what I am using to generate the original dialog) and the CKEditor dialog backdrop have tabindex=-1, so they conflict somehow. Manually turning off the Bootbox backdrop (i.e. setting tabindex='') works with Chrome dev tools, so I think I can hack something together with jQuery or whatnot. Amazing stuff...thanks for the help!! Not sure why I got this working in a jsFiddle...if I recall correctly, I might not have had a backdrop on those dialogs.
Also, for reference, a tabindex of -1 makes things untabbable, which makes sense for a backdrop.
The modal html attribute tabindex='-1' is what seems to be causing the issues for me.
The tabindex='-1' is actually in the bootstrap documentation and is needed for some reason that I am unaware of.
Use the 100% working script..
<script type="text/javascript">
// Include this file AFTER both jQuery and bootstrap are loaded.
$.fn.modal.Constructor.prototype.enforceFocus = function() {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
</script>
Note: Include this file after both jQuery and bootstrap are loaded.
OMG I have been googling this for hours and finally fond some code that works!!
Stick this in your dialog page that will have a ckeditor in it:
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
I found the fix here:
https://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog
Not sure if anyone else is having this issue now. I was ripping my hair out trying to create a hack. It was a pretty simple solution after a while of digging and search the web. This fix helped me. Just place it on the same page where you want to place your editor - when loading from jQuery. The issue is conflicting tabindex, so I simply removed that attribute from the modal.
<script>
$(function(){
// APPLY THE EDITOR TO THE TEXTAREA
$(".wysiwyg").ckeditor();
// FIXING THE MODAL/CKEDITOR ISSUE
$(".modal").removeAttr("tabindex");
});
</script>
I am using Semantic UI and fix this problem by create an instance of CKEDITOR after create Modal.
$('#modal-send').modal('attach events', '.btn-close-modal').modal('show');
var ckeOptions = {
entities: false,
htmlEncodeOutput: false,
htmlDecodeOutput: true
}
CKEDITOR.replace('message', ckeOptions);
CKEDITOR.config.extraPlugins = 'justify';
I also faced this issue when I updated the CKEditor into 4.14
I found the fix in here - http://jsfiddle.net/kamelkev/HU8Qt/3/
In this case,
$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function (event) {
return !!$(event.target).closest(".cke").length || this._super(event);
}
});
It will return false, so the textbox gets disabled/ unfocused (losing focus)
As a solution, we need to return true or need to modify the class .cke in the return statement into .cke_dialog
return !!$(event.target).closest(".cke").length || this._super(event);
I tried to upload images to server from CK Editor[without CKFinder] and on positive side i am able to do. whenever we are trying to create some dialog, they are creating one div on the fly which will hold your dialog box. Better you check the CSS property for your text box using chrome and change it. Hope this will help you.

Not able to bind click event in jQuery UI autocomplete

I have a button which by default is disabled. After I select an item from jQuery UI Autocomplete, I want to enable the button.
I'm testing if this works by using an alert on the button:
jQuery('#btn').live('click', function() { alert('test'); });
First I tried this solution:
jQuery('.autocomplete_brand').live('autocompleteselect', function(event, ui){
jQuery('#btn').removeClass('inactive').attr('disabled','');
});
This enables the button, but then I was reminded that this will not work, because .live only works on click events. So I changed the code to this:
jQuery('.ui-menu-item a').live('click', function() {
jQuery('#btn').removeClass('inactive').attr('disabled','');
});
This almost works. The disable attribute is blanked out, but the alert will still not trigger when I click the button.
So what am I missing here?
What version of jQuery are you using? The following:
This enables the button, but then I
was reminded that this will not work,
because .live only works on click
events.
Is not true for >= 1.44 (and may be true for versions even before that. Edit: I'm almost positive this will work with >= 1.3, when live was added.).
You can do exactly what you were trying to do with the autocompleteselect event:
jQuery('.autocomplete_brand').live('autocompleteselect', function(event, ui){
jQuery('#btn').removeClass('inactive').attr('disabled','');
});
If you're using jQuery >= 1.6, however, you'll want to use prop:
jQuery("#btn").removeClass("inactive").prop("disabled", false);
Here it is working with jQuery 1.6:
http://jsfiddle.net/wGH32/