I want to use TinyMCE editor in a overlay dialog.. Is that possible?
I have latest version TinyMCE and Jquery Tools Overlay.
JQuery Tools Overlay: http://flowplayer.org/tools/demos/overlay/index.html
I ran into a few issues with this, apparently tinymce doesn't play nicely with hidden elements, and gets confused when you write over elements it's attached to. Anyway, got it to work by using overlay's hooks, making a synchronous js call (this is the crucial part), and detaching tinymce before closing it. Code:
$(".overlayed").overlay({
onBeforeLoad: function() {
var wrap = this.getOverlay().find(".contentWrap");
var url = this.getTrigger().attr("href");
$.ajax({
url: url,
async: false,
dataType: "html",
type: "GET",
success: function(data){
wrap.html(data);
}
})
},
onLoad: function(){
if($('#overlay .mceEditor').length > 0){
tinyMCE.execCommand('mceAddControl', false, $('.mceEditor').attr('id'));
}
},
onBeforeClose: function(){
if($('#overlay .mceEditor').length > 0){
tinyMCE.execCommand('mceFocus', false, $('.mceEditor').attr('id'));
tinyMCE.execCommand('mceRemoveControl', false, $('.mceEditor').attr('id'));
}
this.getOverlay().find(".contentWrap").html("");
}
});
Code could be more elegant but works 100% of the time ;)
Hope this helps someone!
Related
I am trying to prevent fancybox 4 from closing when clicking outside of the fancybox container.
Existing answers mentioned clickSlide : false from fancybox 3 upwards.
But it does not seem to work. I am creating dynamic fancy boxes with data coming from an ajax call.
success: function (response) {
if (response.error === true) {
alert(response.errMsg);
} else {
const fancybox = new Fancybox([
{
src: response.form,
type: "html",
clickSlide: false, // disable close on outside click
touch: false, // disable close on swipe
},
], {
mainClass: 'ratingFormContainer',
fullscreen: {
autoStart: true
},
clickSlide: false,
clickOutside: false,
}
);
console.log(response.id);
}
}
I tried inserting the options under touch:false as well but that did not seem to work either.
Also: Someone with enough reputation should create a fancybox-4 tag, so that future questions can be tagged appropriately.
We are using the popular Bootbox dialogue for Bootstrap 3.
We would like to make it a custom size with code such as :
bootbox.dialog({
message: $("<div>").load(href, function () {
}), //load
backdrop: true,
onEscape: false,
size:'small'
}).find(".modal-content").css("max-width", "360px");
However, if we do that, the dialogue goes off-center. Is there any way to achieve this?
Many thanks
This isn't any different than manual Bootstrap modals, in that you don't target .modal-content. The width of the dialog is (supposed to be) defined by .modal-dialog, so you have two options;
1) Update your target, like so:
bootbox.dialog({
message: $("<div>").load(href, function () {
}), //load
backdrop: true,
onEscape: false,
size:'small'
}).find(".modal-dialog").css("max-width", "360px");
2) Use the className option, and move your rule to your stylesheet:
bootbox.dialog({
message: $("<div>").load(href, function () {
}), //load
backdrop: true,
onEscape: false,
className:'custom-small'
});
/* your CSS */
.custom-small .modal-dialog {
max-width: 360px;
}
The className value is applied to the .modal container, so you'd need a descendant selector (as shown) for the width to be applied properly.
Demo jsFiddle
Unless you can guarantee the response is super fast, you probably also want to revamp how you load the dialog's message, given that $.load (or any other AJAX function) is asynchronous:
$.get(href)
.done(function (response) {
bootbox.dialog({
message: response,
backdrop: true,
onEscape: false,
className:'custom-small'
});
});
I realize that this question has been asked and answered several times, but I still can't make many of the solutions work. It seems like most of the discussions are older and maybe not compatible with 4.x.
My goal: be able fire some javascript functions upon focus or blur. Here's the base code:
$('.tiny-mce').tinymce({
script_url : '/xm_js/tinymce4/tinymce.min.js',
});
I tried examples like:
$('.tiny-mce').tinymce({
script_url : '/xm_js/tinymce4/tinymce.min.js',
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
var dom = ed.dom;
var doc = ed.getDoc();
tinymce.dom.Event.add(doc, 'blur', function(e) {
alert('blur!!!');
});
});
}
});
returns:"Uncaught TypeError: Cannot call method 'add' of undefined"
$('.tiny-mce').tinymce({
script_url : '/xm_js/tinymce4/tinymce.min.js',
});
tinymce.activeEditor.on('focus', function(e) {
console.log(e.blurredEditor);
});
returns: "Uncaught TypeError: Cannot call method 'on' of undefined"
(but not sure if I have it in the right place)
$('.tiny-mce').tinymce({
script_url : '/xm_js/tinymce4/tinymce.min.js',
setup: function(editor) {
editor.on('focus', function(e) {
console.log('focus event', e);
});
}
});
returns: "Uncaught SyntaxError: Unexpected identifier"
This works but only when initiating the editor. Other things I've tried but haven't gotten to work:
tinymce.FocusManager
tinymce.activeEditor
What am I missing? Thanks.
UPDATE: found a solution that worked beautifully: Why TinyMCE get focus and blur event, when user jump from other input field?
see the fiddle at http://fiddle.tinymce.com/8Xeaab/1
tinymce.init({
selector: "#editme",
inline: true,
setup: function(editor) {
editor.on('focus', function(e) {
console.log("focus");
});
editor.on('blur', function(e) {
console.log("blur");
});
}
});
Your cuestion title its about TRIGGERING focus and blur events, but you really are asking about HANDLING those events.
If anybody is still looking for triggering the events, the solution should by:
tinymce.init({
selector: "#textarea_123",
...
});
then, to set focus:
var inst = tinyMCE.EditorManager.get('textarea_123');
inst.focus();
I recently ran into this issue and although I am doing this in angularjs I was able to implement a fix for it by creating a directive that registers when you click off of it and then clears the activeElement in the html body. I will add the directive below. You just call it on the object by adding click-off like you would an ng-cloak to a tag.
(function () {
'user strict';
angular.module('app.directives').directive('clickOff', ClickOff);
function ClickOff($parse, $document) {
var directive = {
link: link
};
return directive;
function link(scope, $element, attr) {
var fn = $parse(attr["clickOff"]);
$element.bind('click', function (event) {
event.stopPropagation();
});
angular.element($document[0].body).bind("click", function (event) {
scope.$apply(function () {
$document[0].activeElement.blur();
fn(scope, { $event: event });
});
});
}
}
})();
Recently upgraded to Fancybox v2 and can't figure out how to keep Fancybox open when someone clicks outside of the DIV.
I tried "Overlay: null" but then the user can click around the site and navigate away..
I know in Fancybox v1 it was HideonOverlay Click... Any suggestions?
Try the following.
helpers : {
overlay : {closeClick: false}
}
Here is a piece of code and is self explanatory, hope you will find it useful:
$('#locator').live('click', function(){
$.fancybox({
type: 'iframe',
hideOnOverlayClick: false,
scrolling: 'no',
autoSize: true,
href: site_url + 'home/locator',
beforeClose: function (){
var latlng = $(".fancybox-iframe").contents().find('input[name=latlng]').val();
$('input[name=location]').val(latlng);
}
});
});
I bumped into this question while searching something and felt I would answer it.
I implemented infinite scroll along with masonry on this tumblr: [check revision for link]
The audio player does not appear in posts loaded through infinite scroll, instead it displays the text "[Flash 9 is required to listen to audio.]"
The Inspire Well tumblr theme (I can't post another hyperlink but you can easily google it) seems to have solved this problem through this code:
if(InspireWell.infiniteScrolling && InspireWell.indexPage){
$masonedColumn.infinitescroll({
navSelector : 'ul.page_nav', // selector for the paged navigation
nextSelector : 'ul.page_nav li.page_next a', // selector for the NEXT link (to page 2)
itemSelector : '.post', // selector for all items you'll retrieve
loadingImg : '',
donetext : 'No more pages to load.',
errorCallback: function() {
// fade out the error message after 2 seconds
//$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
}
},
// call masonry as a callback
function( newElements ) {
$(newElements).css({ visibility: 'hidden' });
$(newElements).each(function() {
if($(this).hasClass("audio")){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$audioPost.find(".player span").css({ visibility: 'hidden' });
var script=document.createElement('script');
script.type='text/javascript';
script.src="http://assets.tumblr.com/javascript/tumblelog.js?16";
$("body").append(script);
$.ajax({
url: "http://thetestinggrounds.tumblr.com/api/read/json?id=" + audioID,
dataType: "jsonp",
timeout: 5000,
success: function(data){
$audioPost.find(".player span").css({ visibility: 'visible' });
$audioPost.find("span:first").append('<script type="text/javascript">replaceIfFlash(9,"audio_player_' + audioID + '",\'\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e\')</script>');
}
});
}
});
I tried to adapt this for my tumblr (with placeholder text to see if it was finding the correct element):
$(window).load(function(){
$('#allposts').masonry({
singleMode: true,
itemSelector: '.box'
});
$('#allposts').infinitescroll({
navSelector : "div.navigation",
nextSelector : "div.navigation a:first",
itemSelector : ".box",
debug : true
},
function( newElements ) {
$(this).masonry({ appendedContent: $( newElements ) });
$(newElements).each(function(){
if($(this).hasClass("audio")){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$audioPost.find(".audio span");
var script=document.createElement('script');
script.type='text/javascript';
script.src="http://assets.tumblr.com/javascript/tumblelog.js?16";
$("body").append(script);
$.ajax({
url: "http://fuckyeahempathy.tumblr.com/api/read/json?id=" + audioID,
dataType: "jsonp",
timeout: 5000,
success: function(data){
$audioPost.find(".audio span");
$audioPost.find("span:first").append("<p>audio player not working</p>");
}
});
}
});
}
);
});
But there is no sign of the text. Any help would be greatly appreciated.
Here is a solution I came up with when I needed to implement the same functionality in the template I was creating.
In your HTML, include your AudioPlayer Tumblr tag between comments. This is to prevent loaded scripts from being called. Also add a class "unloaded" to keep track whether or not we've loaded the audio player for this post or not.
...
{block:AudioPlayer}
<div class="audio-player unloaded">
<!--{AudioPlayerBlack}-->
</div>
{/block:AudioPlayer}
...
If you look at the commented code after the page is loaded, you will notice an embed tag being passed to one of the Tumblr javascript functions. Since we commented it, it will not execute. Instead we will want to extract this string and replace the div contents with it.
Create a javascript function which will do this. This can be done with regular javascript, but to save time I will do it with jQuery since this is how I did it for my template:
function loadAudioPosts() {
// For each div with classes "audio-player" and "unloaded"
$(".audio-player.unloaded").each(function() {
// Extract the <embed> element from the commented {AudioPlayer...} tag.
var new_html = $(this).html().substring(
$(this).html().indexOf("<e"), // Start at "<e", for "<embed ..."
$(this).html().indexOf("d>")+2 // End at "d>", for "...</embed>"
);
// Replace the commented HTML with our new HTML
$(this).html(new_html);
// Remove the "unloaded" class, to avoid reprocessing
$(this).removeClass("unloaded");
});
}
Call loadAudioPosts() once on page load, then every time your infinite scrolling loads additional posts.
html
<div class="audio" id="{postID}">{AudioPlayerBlack}</div>
css
.audio {
height:30px;
overflow-y: hidden;
}
.audio span {
display:none;
}
java
setTimeout(function() {
$wall.masonry({ appendedContent: $(newElements) });
/* repair audio players*/
$('.audio').each(function(){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$.ajax({
url: 'http://yoolk.tumblr.com/api/read/json?id=' + audioID,
dataType: 'jsonp',
timeout: 50000,
success: function(data){
$audioPost.append('\x3cdiv style=\x22background-color:white;height:30px\x22 class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e');
}
});
});
}, 2000);