I'm using:
https://github.com/frozeman/MediaEmbed
To embed youtube videos etc in CKEditor, and it works fine, except i've got an error in IE9... The more annoying thing is that it's not even showing up as an error, it's just not working!
In firefox the box opens up and then after adding the embed code, you click "ok" and it puts it in the editor, however in ie9, the box opens up, and you can paste your code the box, you can click the cancel button and the box closes, but if you click ok, nothing at all happens!
Any help appreciated, completely blown away by this now!
Code here:
/*
* Embed Media Dialog based on http://www.fluidbyte.net/embed-youtube-vimeo-etc-into-ckeditor
*
* Plugin name: mediaembed
* Menu button name: MediaEmbed
*
* Youtube Editor Icon
* http://paulrobertlloyd.com/
*
* #author Fabian Vogelsteller [frozeman.de]
* #version 0.1
*/
( function() {
CKEDITOR.plugins.add( 'mediaembed',
{
init: function( editor )
{
var me = this;
CKEDITOR.dialog.add( 'MediaEmbedDialog', function ()
{
return {
title : 'Embed Media',
minWidth : 550,
minHeight : 200,
contents :
[
{
id : 'iframe',
expand : true,
elements :[{
id : 'embedArea',
type : 'textarea',
label : 'Paste Embed Code Here',
'autofocus':'autofocus',
setup: function(element){
},
commit: function(element){
}
}]
}
],
onOk : function() {
for (var i=0; i<window.frames.length; i++) {
if(window.frames[i].name == 'iframeMediaEmbed') {
var content = window.frames[i].document.getElementById('embed').value;
}
}
console.log(this.getContentElement( 'iframe', 'embedArea' ).getValue());
editor.insertHtml(this.getContentElement( 'iframe', 'embedArea' ).getValue());
}
};
} );
editor.addCommand( 'MediaEmbed', new CKEDITOR.dialogCommand( 'MediaEmbedDialog' ) );
editor.ui.addButton( 'MediaEmbed',
{
label: 'Embed Media',
command: 'MediaEmbed',
icon: this.path + 'images/icon.png'
} );
}
} );
} )();
Thanks in advance!
Which version of CKEditor are you using?
I tested it with CKEditor 4.0 and WFM in lastest Chrome, Firefox & IE9. It seems that your plugin has some issues in 3.6.x branch. Why don't you consider updating to the latest stable version?
Related
I have following code and it's being triggered form a task pane button:
Office.context.ui.displayDialogAsync(
dialogUrl,
{
width: 60,
height: 60,
requireHTTPS: false,
displayInIframe: false
},
asyncResult => {
dialog = asyncResult.value;
if (asyncResult.status === "failed") {
dispatch(MessageActions.showError(asyncResult.error.message));
dialog.close();
} else {
dialog.addEventHandler(Office.EventType.DialogMessageReceived, arg => {
dispatch({ type: LOADED });
dialog.close();
});
dialog.addEventHandler(Office.EventType.DialogEventReceived, arg => {
if (arg && arg.error === 12006) {
dispatch({ type: LOADED });
}
});
}
}
);
Once I called this snippet I get an error
Error code - 12007 .A dialog box is already opened from the task pane.
A task pane add-in can only have one dialog box open at a time.
but really it's not. For previous versions, it worked just fine. Is there anybody who knows what's happened or I might be doing now something wrong?
This is only reproducible on MacOs 10.13.4 and Word v16.13 (18.05.13). Word for
Windows and Word Online work perfectly.
Using fancyBox, I want to open an images gallery clicking on a single button. This is clearly detailed on the site but it doesn't work?! I am not an expert and maybe I am doing something wrong. Here is the code:
HTML:
<a class="open_fancybox" href="image1.jpg">BUTTON</a>
JavaScript:
$(".open_fancybox").click(function() {
$.fancybox.open([
{
href : 'image1.jpg',
title : '1st title'
},
{
href : 'image2.jpg',
title : '2nd title'
},
], {
padding : 0
});
return false;
});
External resources used: jquery.fancybox.js & jquery.fancybox.css
Anyone who knows what's wrong?
I am using Liferay UI for popup window in Liferay 6.2. I am getting the pop up but i can not close it.Why it is not working Liferay 6.2.
Below is my code which is written on parent page:
AUI().ready(function(A) {
AUI().use('aui-dialog', 'aui-io', function(A) {
var url = '<%=testPopupURL.toString()%>';
Liferay.Util.openWindow(
{
dialog: {
cache: false,
width:800,
modal: true
},
id:'<portlet:namespace/>shahbaj',
uri: url
}
);
Liferay.provide(
window,
'<portlet:namespace />closePopup',
function(popupIdToClose) {
var A = AUI();
alert(popupIdToClose);
A.DialogManager.closeByChild('#' + popupIdToClose);
},
['aui-base','aui-dialog','aui-dialog-iframe']
);
});
});
Below code is pop-up page content:
<aui:button name="YES" value="YES" onClick="javascript:yes();"/>
<aui:script>
function yes(){
alert('pop');
Liferay.Util.getOpener().<portlet:namespace />closePopup('<portlet:namespace />shahbaj');
}
</aui:script>
Please help me out!!
Add a Cancel / Close button with following script in your jsp.
<input type="button" onclick="hidePopup();" value="Cancel" />
function hidePopup(){
AUI().ready('aui-dialog', function(A){
A.DialogManager.hideAll();
});
}
This worked!!
AUI().ready(function(A) {
AUI().use('aui-dialog', 'aui-io', function(A) {
var url = 'http://localhost/url';
Liferay.Util.openWindow(
{
dialog: {
cache: false,
width:800,
modal: true
},
id:'shahbaj',
uri: url
}
);
Liferay.provide(
window,
'closePopup',
function(popupIdToClose) {
var dialog = Liferay.Util.getWindow(popupIdToClose);
dialog.destroy(); // You can try toggle/hide whatever You want
},
['aui-base','aui-dialog','aui-dialog-iframe']
);
});
});
Simpler Solution
A much simpler solution is to use the close-panel class name.
<aui:button cssClass="close-panel" type="cancel" value="close" />
No additional JavaScript required.
I am working with Liferay 7.2 and I have used the next code in JavaScript:
Liferay.fire('closeWindow',{id:'idPopup'});
in your case idPopup = 'portlet:namespace/shahbaj'
Sorry I dont speak english very good
I have little problem with Media Uploader in new WordPress 3.5. I created own plugin which is upload the picture. I'm using this code JS:
<script type="text/javascript">
var file_frame;
jQuery('.button-secondary').live('click', function( event ){
event.preventDefault();
if ( file_frame ) {
file_frame.open();
return;
}
file_frame = wp.media.frames.file_frame = wp.media(
{
title: 'Select File',
button: {
text: jQuery( this ).data( 'uploader_button_text' )
},
multiple: false
}
);
file_frame.on('select', function() {
attachment = file_frame.state().get('selection').first().toJSON();
jQuery('#IMGsrc').val(attachment.url);
});
file_frame.open();
});
</script>
The code works fine, but unfortunately forms appears incomplete. When I select any picture doesn't show me 'Attachment Display Settings' on right side. I don't know why. I try add options to media:
displaySettings: true,
displayUserSettings: true
But it also doesn't work.
Does the page have the <script type="text/html" id="tmpl-attachment-details">... template in the source? If not, you'll need to call wp_print_media_templates(), to write the styles from wp-includes/media-template.php
This is the code I use. Source: http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/ It seems to work pretty well, but the sidebar on the left is missing. (Intentional, but I don't want it anyways).
<?php wp_enqueue_media(); ?>
<script>
function showAddPhotos() {
// Uploading files
var file_frame;
// event.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: jQuery( this ).data( 'uploader_title' ),
button: {
text: jQuery( this ).data( 'uploader_button_text' ),
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on( 'select', function() {
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
// Do something with attachment.id and/or attachment.url here
});
// Finally, open the modal
file_frame.open();
}
</script>
I am trying to add an external plugin in ckeditor but it looks that I am not registering correctly my plugin and it isn' showing.
1.- I tried adding it directly to the CKEditor config file and it didn't work.
CKEDITOR.editorConfig = function(config) {
config.toolbar = [
['Bold'],['Italic'],['myplugin']
]
};
2.- Tried adding it to the html file when initiating CKEditor and also didn't work.
var editor = CKEDITOR.replace( 'editor1',
{
removePlugins : 'forms,table,tabletools',
extraPlugins : 'msugetprop,msuforms,msutable,msutabletools,msumobile',
toolbar :
[
['Cut','Copy','PasteText','Preview'],
['Undo','Redo','-','SelectAll'],
['MsuForm','MsuGetProp','MsuCheckbox', 'MsuRadio', 'MsuTextField', 'MsuTextarea', 'MsuSelect', 'MsuButton', 'MsuTable', 'MsuHiddenField'],
'/',
['Styles','-','NumberedList','BulletedList','-','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Source','-','About'],
['myplugin'],
]
});
3.- My plugin is under /ckeditor/plugins/myplugin with filename plugin.js
(function() {
var o = { exec: function(p) {
url = baseUrl + "/GetSomeData";
$.post(url, function(response) {
alert(response)
});
}
};
CKEDITOR.plugins.add('myplugin', {
init: function(editor) {
editor.addCommand('myplugin', o);
editor.ui.addButton('myplugin', {
label: 'myplugin',
icon: this.path + 'myplugin.png',
command: 'myplugin'
});
}
});
})();
What am I missing ?
Solved.
forgot to add 'myplugin" under extraPlugins.