将elfinder与TinyMCE 4集成," TypeError:parent.tinymce.activeEditor.windowManager.getParams不是函数

时间:2015-06-07 02:54:08

标签: javascript jquery tinymce-4 elfinder

我仍然是整合elfinder和tinymce的新手,我已经按照elfinder中的教程wiki

在tinymce init的form.php中已经添加了file_browser_callback:elFinderBrowser:

tinyMCE.init({
                mode : "exact",
                elements : "txt_content",
                theme : "advanced",
                file_browser_callback : elFinderBrowser,
                plugins : "advimage,advlink,media,contextmenu",
                theme_advanced_buttons1_add_before : "newdocument,separator",
                theme_advanced_buttons1_add : "fontselect,fontsizeselect",
                theme_advanced_buttons2_add : "separator,forecolor,backcolor,liststyle",
                theme_advanced_buttons2_add_before: "cut,copy,separator,",
                theme_advanced_buttons3_add_before : "",
                theme_advanced_buttons3_add : "media",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                extended_valid_elements : "hr[class|width|size|noshade]",

                paste_use_dialog : false,
                theme_advanced_resizing : true,
                theme_advanced_resize_horizontal : true,
                apply_source_formatting : true,
                force_br_newlines : true,
                force_p_newlines : false,
                relative_urls : true
        });

并且还添加了函数elFinderBrowser:

function elFinderBrowser (field_name, url, type, win) {
  tinymce.activeEditor.windowManager.open({
    file: 'elfinder.html',// use an absolute path!
    title: 'elFinder 2.0',
    width: 900,  
    height: 450,
    resizable: 'yes',
    inline:true
  }, {
    setUrl: function (url) {
      win.document.getElementById(field_name).value = url;
    }
  });
  return false;
}

elfinder.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>elFinder 2.0</title>

        <!-- jQuery and jQuery UI (REQUIRED) -->
        <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

        <!-- elFinder CSS (REQUIRED) -->
        <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url() ?>assets/vendor/elfinder/css/elfinder.min.css">
        <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url() ?>assets/vendor/elfinder/css/theme.css">

        <!-- elFinder JS (REQUIRED) -->
        <script type="text/javascript" src="<?php echo base_url() ?>assets/vendor/elfinder/js/elfinder.min.js"></script>

        <!-- elFinder initialization (REQUIRED) -->

    </head>
    <body>

        <!-- Element where elFinder will be created (REQUIRED) -->
        <div id="elfinder"></div>

        <script type="text/javascript" charset="utf-8">
            var FileBrowserDialogue = {
            init: function() {
              // Here goes your code for setting your custom things onLoad.
            },
            mySubmit: function (URL) {
              // pass selected file path to TinyMCE
              parent.tinymce.activeEditor.windowManager.getParams().setUrl(URL);

              // close popup window
              parent.tinymce.activeEditor.windowManager.close();
            }
          }

            $().ready(function() {
                var elf = $('#elfinder').elfinder({
                    url : 'connector.php',
                    getFileCallback: function(file) { // editor callback
                        // file.url - commandsOptions.getfile.onlyURL = false (default)
                        // file     - commandsOptions.getfile.onlyURL = true
                        FileBrowserDialogue.mySubmit(file); // pass selected file path to TinyMCE 
                      }
                }).elfinder('instance');
            });
        </script>

    </body>
</html>

但是当我在elfinder窗口中选择/选择图像时,它会在firegbug中显示错误:

  

&#34; TypeError:parent.tinymce.activeEditor.windowManager.getParams不是   功能&#34;

它已经让我疯了,任何提示,伙计们?

2 个答案:

答案 0 :(得分:0)

您是否尝试过tinyMce 4文档中所述的top.tinymce.activeEditor.windowManager.getParams();?所以top代替parent

http://www.tinymce.com/wiki.php/api4:method.tinymce.WindowManager.getParams

答案 1 :(得分:0)

使用更新的tinymce版本,它对我有帮助