fancybox 2 and tinymce jquery conflict

问题

I am using fancybox-2.0.1 in a number of areas on a website and have been doing so without a problem. I have also been using the jquery implementation of tinymce in conjunction with fancybox without a problem. However, since I changed the tinymce inti script to look like the below I started getting problems:

<script type="text/javascript" src="tinymceJQ/jscripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
$(function() {

var $editor = $("#appContentTextArea");

// Initialize WYSIWYG
$editor.tinymce({
    script_url : 'tinymceJQ/jscripts/tiny_mce/tiny_mce.js',
    theme : "advanced",
    mode : modeAlter,
    /*editor_selector : "mceEditor",*/
    content_css : "css/webPage.css",
    paste_text_sticky: true,
    paste_text_sticky_default: true,
    relative_urls: false,
    remove_script_host : false,
    remember_last_path : false,
    imagemanager_rootpath: accountFolder,
    theme_advanced_buttons1 : "bold, italic, underline, strikethrough, separator, justifyleft, justifycenter, justifyright, justifyfull, separator, formatselect, forecolor, separator, hr, removeformat, separator, cut, copy, image, separator, aquaHeading, sponsorDiv",
    theme_advanced_buttons2: "code, separator, link, unlinkbullist,numlist,tablecontrols, fontselect",
    theme_advanced_buttons3: "",
    setup : function(ed) {
        ed.onInit.add(function() {
            // do something
        });
    },
    oninit : tinyMceReady
});
</script>

As soon as I changed to this init Fancybox would no longer open the URL. Instead it would launch the correctly sized pop-up but the contents would be "The requested content cannot be loaded. Please try again later."

Is anyone aware of a conflict with the new fancybox and tinymce, or can see a conflict in the above code?

Thanks in advance to anyone who can help.

回答1:

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

This technique is especially effective in conjunction with the .ready() method's ability to alias the jQuery object, as within callback passed to .ready() we can use $ if we wish without fear of conflicts later:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });
  // Code that uses other library's $ can follow here.
</script>

If necessary, we can free up the jQuery name as well by passing true as an argument to the method. This is rarely necessary, and if we must do this (for example, if we need to use multiple versions of the jQuery library on the same page), we need to consider that most plug-ins rely on the presence of the jQuery variable and may not operate correctly in this situation.

Reference URL

来源：https://stackoverflow.com/questions/11606872/fancybox-2-and-tinymce-jquery-conflict

标签

jquery

tinymce

fancybox