Question

我在这个插件http://www.tinymce.com中使用asp.net应用程序中的小型mce文本编辑器。我正在使用http://www.roxyfileman.com/TinyMCE-file-browser添加文件浏览器 mce文本编辑器中的功能。现在我想打电话

 var win = tinyMCE.getWindowArg("window");

中显示的本教程http://www.tinymce.com/wiki.php/TinyMCE3x:How-to_implement_a_custom_file_browser中的

function mySubmit() {
//call this function only after page has loaded
//otherwise tinyMCEPopup.close will close the
//"Insert/Edit Image" or "Insert/Edit Link" window instead

var URL = document.my_form.my_field.value;
var win = tinyMCE.getWindowArg("window");

 // insert information now
  win.document.getElementById(tinyMCE.getWindowArg("input")).value = URL;

  // for image browsers: update image dimensions
  if (win.getImageData) win.getImageData();

  // close popup window
  tinyMCEPopup.close();
}

单击提交按钮

，它会抛出两个错误

未捕获的TypeError：t.editor.windowManager.createInstance不是函数tinyMCEPopup.init @ tinymcepopup.js:26(anonymous function) @ tinymcepopup.js:274 2ImageUpload.html?type=image&input=mceu_96-inp&value=:16

未捕获的TypeError：tinyMCE.getWindowArg不是函数

请帮帮我!!!

Answer 1

我只是花了一整天试图解决这个问题。事实证明你根本不需要tiny_mce_popup.js！

我终于根据本教程提出了这个解决方案： https://pixabay.com/en/blog/posts/direct-image-uploads-in-tinymce-4-42/。

我希望它有所帮助。

我正在使用TinyMCE 4，顺便说一句。

有两个文件：

<强> 1。使用TinyMCE文件：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
function RoxyFileBrowser(field_name, url, type, win) {
          // alert("Field_Name: " + field_name + "nURL: " + url + "nType: " + type + "nWin: " + win); // debug/testing

  var roxyFileman = 'browse_files.php';
  if (roxyFileman.indexOf("?") < 0) {     
    roxyFileman += "?type=" + type;   
  }
  else {
    roxyFileman += "&type=" + type;
  }
  roxyFileman += '&input=' + field_name + '&value=' + win.document.getElementById(field_name).value;
  if(tinyMCE.activeEditor.settings.language){
    roxyFileman += '&langCode=' + tinyMCE.activeEditor.settings.language;
  }
  tinyMCE.activeEditor.windowManager.open({
     file: roxyFileman,
     title: 'Roxy Fileman',
     width: 850, 
     height: 650,
     resizable: "yes",
     plugins: "media",
     inline: "yes",
     close_previous: "no"  
  }, {     window: win,     input: field_name    });
  return false; 
    }
    tinymce.init({
        selector: "textarea",
        theme: "modern",
        force_br_newlines : false,
        force_p_newlines : false,
        forced_root_block : '',
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor colorpicker textpattern imagetools"
        ],
        toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
        file_browser_callback: RoxyFileBrowser,
        toolbar2: "print preview media | forecolor backcolor emoticons",
        image_advtab: true,
        templates: [
            {title: 'Test template 1', content: 'Test 1'},
            {title: 'Test template 2', content: 'Test 2'}
        ]
    });
</script>
</head>
<body>
    <textarea id="my_editor"></textarea>
    <input name="image" type="text" style="display:none;"  onchange="$('#my_form').submit();this.value='';">
</body>
</html>

<强> 2。文件使用图像浏览器内容/ browse_files.php （这可以是任何格式.php，html，asp ...等。）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function(){
        $('.image_choice').bind('click', function(){

    var image_url = $(this).attr("src");

    //ADDS THE URL TO THE IMAGE FIELD THIS IS WHERE I GOT HUNG UP!
    parent.$('.mce-btn.mce-open').parent().find('.mce-textbox').val(image_url);

    var ed = parent.tinymce.editors[0];
    ed.windowManager.windows[1].close();// CLOSES THE BROWSER WINDOW
});
});
</script>
<style>
.image_choice {
width:150px;    
}
</style>
<!-- DISPLAY YOUR IMAGES AS THUMBNAILS MUCH NICER THAN I HAVE ;-)  -->
<img src="../images/image1.gif" class="image_choice"  />
<img src="../images/image1.gif" class="image_choice"  />
<img src="../images/image1.gif" class="image_choice"  />
<img src="../images/image1.gif" class="image_choice"  />
<!-- ETC...-->

如果你绝对需要tiny_mce_popup.js，你可以在这里找到它： http://phpxref.ftwr.co.uk/wordpress/wp-includes/js/tinymce/tiny_mce_popup.js.source.txt

Answer 2

我制作了一个简单的jquery代码，将它放在你的link.php或image.php中，它将会工作

  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript">
   var parentWin = (!window.frameElement && window.dialogArguments) ||        opener || parent || top;
   $(   function() {
     $('img').click(function(e){
    e.preventDefault();
    imgSrc = $(this).attr('src');
    imgAlt = $(this).attr('alt');
    divInput =                         $("input#"+parentWin.inputSrc,parent.document).parent().attr('id');
    divInputSplit = divInput.split("_");
    divTitle = "mce_"+(parseInt(divInputSplit[1],10) +1);
    $("input#"+parentWin.inputSrc,parent.document).val(imgSrc);
    $("input#"+divTitle,parent.document).val(imgAlt);
    $(".mce-close",parent.document).last().trigger("click");
     });
    });
    </script>

在这里输入代码

更详细的信息请访问zrclassroom.com

我们应该在哪里下载完整实现的tinymce popup文件？

2 个答案: