We Keep Coding

tinyMCE 6 insert link to server side content

I'm upgrading an old internal system used in my academic department. The page that I'm rewriting allows users to modify webpages containing information and content relevant to a course. The old system is using cleditor which I am replacing with the free version of tinyMCE 6.2.0.
One of the functionalities that needs to be replaced is a custom button that brings up a list of URLs to uploaded content and then turns the highlighted text into a link to the selected content (example of this in current system). I have been able to create my own custom button, and I have found the panel and selectbox features, but I haven't found how to populate the list in selectbox using a URL like one can for link_list.
Below is an example of the javascript that I have:
tinymce.init({
selector: '.course_page_editor',
toolbar: 'custContentLink',
setup: (editor) => {
editor.ui.registry.addButton('custContentLink', {
text: 'Insert Content Link',
onAction: (_) => insert_content_link_dialog(tinymce.activeEditor)
});
}
});
function insert_content_link_dialog(editor)
{
editor.windowManager.open({
title: 'Insert Content Link',
body: {
type: 'panel',
items: [{
type: 'selectbox',
name: 'content_list',
label: 'Choose the file that the link should point to:',
size: 5,
//TODO: generate list of uploaded content URLs
items: [
{text: 'Primary', value: 'primary style'},
{text: 'Success', value: 'success style'},
{text: 'Error', value: 'error style'}
],
flex: true
}]
},
onSubmit: function () {
//TODO: replace highlighted text with selected link
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
text: 'Add content link',
type: 'submit',
primary: true,
enabled: true
}
]
});
};
How do I create a popup list of links to server side content

My original process was overly complicated. TinyMCE has the link_list functionality which does exactly what I'm looking for. I then created a page to return a JSON array of link items as outlined in this other question I asked.

Magnific Popup - Index error

I can't get my Magnific Popup working with index option. My goal is to make the gallery open on index of clicked image. In my HTML I have this for each image:
<div class="open_gallery_index" data-id=5><img ... ></div>
then my JS looks like this:
$(function(){
$('.open_gallery_index').click(function(){
var i = Number($(this).data("id"));
$.magnificPopup.open({
items: g_items,
gallery: {
enabled: true
},
type: 'image'
},i);
});
})
But when clicking the image I get an error
Uncaught TypeError: Cannot read property 'parsed' of undefined
Though if I set the variable i manually to let's say 5, everything works fine, so the problem must be in this
var i = Number($(this).data("id"));
but I have tried everything with no success, thanks for any help.

Update your data-id attribute like this.
<div class="open_gallery_index" data-id="5"><img ... ></div>

I think $.magnificPopup.open requires an src property. Not really sure what g_items is in your code, but try something like this:
$.magnificPopup.open({
items: {
src: '.open_gallery_index',
type: 'image'
}
gallery: {
enabled: true
},
},i);

$.magnificPopup.open({
items: g_items,
gallery: {
enabled: true
},
type: 'image'
},i);
i--;
i++;
it worked with me this way and I don't know why

Bootstrap bootbox overlay

I am using bootbox plugin for my application.
http://bootboxjs.com/
Something like this
bootbox.dialog({
message: "I am a custom dialog",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function() {
Example.show("great success");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
Example.show("uh oh, look out!");
}
},
main: {
label: "Click ME!",
className: "btn-primary",
callback: function() {
Example.show("Primary button");
}
}
}
});
The problem what i have is that is modal is opened and something dynamically is added to message when modal is opened, it goes down of the page, but opacity element black stay the same?
Please check picture with a problem i have :(

This is more of a Bootstrap Modal issue than Bootbox specifically.
The cleanest solution is to constrain the content of your modal, rather than try to override how Bootstrap's overlay works. So, here's an example jsFiddle with a lot of content: https://jsfiddle.net/17jLxr2n/
If we add a simple CSS ruleset to our container, we can easily constrain the modal to a usable size, as shown in the updated fiddle:
.dynamic-modal-content
{
max-height: 300px;
overflow: auto;
}
The selector you use should be whatever container your dynamic content is returned with.

Only start magnific popup when body has specific class

I am working with magnific popup and want to show a video when someone is coming to the side (including not showing it everytime a user comes to the site, hence the localStorage part). This all works and here is the code:
(
function($) {
$(window).load(function () {
if(localStorage.getItem('popState') != 'shown'){
setTimeout(function(){
$.magnificPopup.open({
items: {
src: 'https://www.youtube.com/watch?v=blabla'
},
type: 'iframe',
iframe: {
patterns: {
youtube: {
index: 'youtube.com/',
id: 'v=',
src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0'
}
}
}
});
}, 5000);
localStorage.setItem('popState','shown')}
});
})
(jQuery);
Now, I want to show the popup only on a specific page (when a specific language is selected). I noticed that the body tag changes the class when a user selects a language, example:
<body class="lang-en-EN">
or
<body class="lang-de-DE">
Is there a way to fire the popup, when the class changes from language EN to DE?
Update: Here is the Fiddle

In the if-statement you already have, just check for the class as well, adding (e.g.) $(body).hasClass("lang-en-DE"):
(function($) {
$(window).load(function () {
if($(body).hasClass("lang-en-DE") && localStorage.getItem('popState') != 'shown'){
setTimeout(function(){
$.magnificPopup.open({
items: {
src: 'https://www.youtube.com/watch?v=blabla'
},
type: 'iframe',
iframe: {
patterns: {
youtube: {
index: 'youtube.com/',
id: 'v=',
src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0'
}
}
}
});
}, 5000);
localStorage.setItem('popState','shown')}
});
})
(jQuery);

Pace.JS Qtip how to ignore the Pace Animation

How we can ignore URLs with Pace.js progress animation to one of my ajax calls,
I followed the following as mentioned in the documentation, I am trying to ignore a URL 'getTip' but it still triggers the pace animation.
ajax: {
trackMethods: ['GET', 'POST'],
trackWebSockets: false,
ignoreURLs: ['arterySignalR', 'browserLink', 'getTip']
}
Or how can I use the Pace.ignore in the following call:
$("a[name^='qtipname']").each(function() {
var $this = $(this);
var id = $this.attr('rel');
$this.qtip({
content:{
text: 'Loading...',
ajax: {
url: urlTip,
type: 'GET',
loading: false,
data: {"objectID": id}
}
},
show: 'mouseover', // Show it on mouseover
hide: {
delay: 200,
fixed: true // We'll let the user interact with it
},
style: {
classes: 'ui-tooltip-light ui-tooltip-shadow',
width: 290
}
});
});

I realize this is an older post, however I recently had this requirement and this post was one of the first to come up...thought I would put my resolution here in case anyone else needs it.
Set pace options for the ignoreURLs before you load the pace.min.js library
<script>
paceOptions = {
ajax: {ignoreURLs: ['some-substring', /some-regexp/]}
}
</script>
<script src="../dist/js/pace.min.js"></script>
Example of one of my ignoreURLs:
<script>
paceOptions = {
ajax: {ignoreURLs: ['staffNameAutoComplete']}
}
</script>
<script src="../dist/js/pace.min.js"></script>
Where 'staffNameAutoComplete' is part of the ajax URL I am calling.
http://www.website.com/json.php?request=staffNameAutoComplete