I am using the tinyMCE library for my textareas but also for image uploads, however when have both of them on one page it doesn't work. It is fine when it is one of them alone but as soon as I put a tinyMCE textarea on a page and a button that launches the imagemanager dialog, the dialog loads up but the spinning loading icon just keeps going instead of loading the files from my rootpath.
In the head of my document i have:
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
editor_selector : "mceEditor",
editor_deselector : "mceNoEditor",
plugins : "style,advlink,inlinepopups,preview,contextmenu,paste,directionality,fullscreen,noneditable,imagemanager,media",
// Theme options
theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,|,undo,redo,|,link,unlink,code,|,fullscreen",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_resizing : false,
media_strict: false
});
Which is great for my textareas, then with jQuery on document.ready() I have the following for the uploads:
$('.add_image_button').click(function(){
mcImageManager.open(''{
rootpath : '{0}/',
oninsert:function(o){
var location = o.focusedFile.path;
location = location.substr(4);
location = '_uploads/'+location;
var preview_image = '../' + location;
$('#selected_image > img').attr('src', preview_image);
$('#image_path').val(location);
}
});
return false;
});
If I have an MCE textarea on the page and press my upload image button I get the following javascript errors:
Uncaught TypeError: Cannot set property 'innerHTML' of null - editor_plugin.js:1
Uncaught TypeError: Cannot call method 'getArgs' of undefined - index.php:1
I have tried the tinyMCE.init() after DOM ready, but no joy.
It feels like there might be some kind of path configuration conflict like the imagemanager.
Does anybody know if there is a way of looking if the rootpath is getting screwed somehow on the imagemanager?
Cheers
If anybody comes across this... I fixed it by removing inlinepopups from the plugins list.
Related
SO,
I am trying to use tinyMCE in a MVC razor view but I always get this below error:
Uncaught ReferenceError: tinyMCE is not defined
at create:71
I have included tinyMCE.min.js in my bundle config file. It works perfectly fine if I set razor view _Layout to null but when setting the _Layout to default Layout I get this error.
P.S: I tried this with a new MVC application it perfectly works fine there don't know what could be the problem within my main project. Your thoughts?
Update:
Here is a piece of Script which is initiate the tinymce.
<script type="text/javascript">
// Initialize your tinyMCE Editor with your preferred options
tinyMCE.init({
// General options
mode: "textareas",
theme: "modern",
// Theme options
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
});
</script>
I'm developing a ajax popup system. One of functionalities is, when ajax gathers any new data, to show it using Fancybox. There are two scenarios:
user reads data brought by ajax, and closes fancybox.
user is AFK. When another data comes in, it should be appended to already displaying fancybox content
my html container for fancybox looks like this:
<div id="notifications_fancybox">
<div class="notifications_fancybox_title">
Powiadomienia
</div>
<div id="notifications_fancybox_content">
</div>
</div>
where notifications_fancybox has display: none; in css.
Fist I wanted to just $('#otifications_fancybox_content').append('some html'); append some data, but it seems that after fancybox have been initialized, somehow it won't let me append anything.
So I found another way to do that:
When new data comes in, first check if fancybox is already opened:
nl.isFancyboxOpened = function(){
if($('#fancybox-wrap').is(':visible')) return true;
return false;
};
if it is opened, close it:
if(nl.isFancyboxOpened()){
$.fancybox.close();
}
append some data
$('#otifications_fancybox_content').append('some html');
and open fancybox
nl.openFancybox = function(){
if(nl.isFancyboxOpened() == false){
$.fancybox(
$('#notifications_fancybox').html(),
{
'autoDimensions' : false,
'overlayShow' : true,
'hideOnOverlayClick' : false,
'showCloseButton' : true,
'width' : 450,
'height' : 400,
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
}
else{
$.fancybox.resize();
}
};
Now, the main problem:
When fancybox is displayed for the first time, everything is fine - there's overlay, buttons and so on.
When more ajax data comes for being displayed and I try to go through above procedure (close-append-reopen), everything again seems fine except... there is no overlay! So user can click on everything on the page, and I don't want him to.
Okay, I've managed to solve the problem. Not exactly what I wanted, but I'll work fine enough.
My solution uses onComplete callback to force display property of overlay to be set to block. It's packed in setTimeout because calling it instantly won't work. Also reducing timeout below certain time will cause this solution to fail. I believe there's a better way to solve this, but I haven't found one... yet ;)
$.fancybox(
$('#notifications_fancybox').html(),
{
'autoDimensions' : false,
'overlayShow' : true,
'hideOnOverlayClick' : false,
'showCloseButton' : true,
'onComplete' : function(){setTimeout(function(){$('#fancybox-overlay').css('display', 'block');}, 250);},
'width' : 450,
'height' : 400,
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
I'm building an online editor where the language is set by the user settings that can be change dynamically with AJAX (page does not reload), so I init the tinyMCE object the first time correctly but after the user try to init it again, the text inside the editor controls has incorrect values ("advanced.bold" instead of "Bold", advanced.italic_desc instead of "Italic", etc), but the plugin popups are in the correct language!
Basically my code just do the init method each time the user changes the language in their preferences...
initMCE: function(lang) {
tinyMCE.init({
language : lang,
mode : "textareas",
theme : "advanced",
relative_urls : false,
editor_selector : "tinymce",
plugins : "emotions,spellchecker,advhr,insertdatetime,preview,media,inlinepopups,xhtmlxtras",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "fontselect,fontsizeselect,bold,italic,underline,forecolor,|,bullist,numlist,|,blockquote,|,image,|,link,unlink,|,code,spellchecker",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "right",
theme_advanced_resizing : true,
content_css : "../_style/_css/style.css",
inline_styles : false
});
}
Any ideas of how to do it or what am I doing wrong?
I created a fiddle fork, trying to make it work and thought that you might need to shutdown your former instance correctly. The language did not change correctly - you might want to report a bugfix for this here.
I reported this as bug on their site and they told me to use a workaround while they fix it (seems the load lang call is just running one time instead inside the init). Using this line after the init, the language change works fine:
tinyMCE.ThemeManager.requireLangPack(THEME_IN_USE);
Check this fiddle to see it working
You can use something like this:
function init(lang) {
//language_url: lang === 'en' ? null : 'url to es file',
options.language = lang;
tinymce.remove(editor);
tinymce.init(options);
tinymce.execCommand('mceRepaint');
}
This fiddle works for me, note the comments in line 31:
https://jsfiddle.net/antd3tsf/19/
I have used Fancybox on multiple occasions and never run into this problem. I have included both jQuery and Fancybox files in the header, linked up the first order button the the page to open up an iframe in a Fancybox. However I cant seem to get it to work at all. It doesn't open an iframe and instead goes straight to the page I was trying to open inside the Fancybox iframe.
Can somebody point out whatever blindingly obvious mistake I've made this horrible Monday morn?
Testing server can be found here:
http://www.designti.me/testing/flipstick/original.php
The error message is: Uncaught TypeError: Object #<an Object> has no method 'fancybox'
Which implies that fancybox hasn't loaded. Taking a close look at your source we see <script type="text/x-ecmascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> which you can see uses x-ecmascript rather than javascript. Change that and you should be fine.
You didn't put your code into the ready handler:
$(function() { // <-- you need this
$("a.iframe").fancybox({
//...
});
}); // <-- and this
Maybe to put it in document.ready?
$(document).ready(function() {
$("a.iframe").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
Use this:
jQuery(document).ready(function() {
jQuery("a.iframe").fancybox({
'type' : 'iframe', //<--missing comma here
'width':750,
'height':500 //<-- removed last comma here
});
});
I have a web-site. We are using TinyMCE as our text editor. I just upgraded to the newest version and added the media plugin so our users can add videos to their enteries.
The upgrade works great on Chrome, FireFox, IE7. However, it does not work with IE8. The frame around the editor disappears along with the toolbar.
Here is the init code I'm using:
tinyMCE.init({
// General options
mode : 'exact',
elements : '<%= txtArea.ClientID %>',
theme: 'advanced',
relative_urls : false,
verify_html : true,
apply_source_formatting : true,
plugins : 'media',
//valid_elements: 'a[href|target=_blank],#p[align],strong/b,em/i,u,div,br,-span[style],'
// <%= AllowImages ? "+ 'img[longdesc|usemap|src|border|alt=|title|hspace|vspace|width|height|align],'" : "" %>
// + '-ul,-ol,-li',
theme_advanced_buttons1 : 'bold,italic,underline,separator,link,unlink,separator,bullist,numlist,separator,outdent,indent,separator,undo,redo,'
<%= AllowImages ? "+ 'separator,image,'" : "" %> + 'separator,code,media',
theme_advanced_buttons2 : '',
theme_advanced_buttons3 : ''
});
Any ideas what I've done wrong?
Jake raised a point in the comments that this was a caching related issue.
As suggested in the comment, options to work around include clearing cache and including a date/time query string.
I'd suggest a third option to the above -- including the version number of the component being used in the url (either put tinymce in a version specific folder, or put the version number in the query string).