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

问题描述 投票：0回答：2

我正在通过此插件在 ASP.NET 应用程序中使用微型 mce 文本编辑器http://www.tinymce.com。 我正在使用 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();
}

单击提交按钮时，会抛出两个错误

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

请帮助我！

javascript jquery tinymce-4
2个回答
4
投票

我花了一整天的时间试图弄清楚这一点。事实证明你根本不需要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

0
投票

我做了一个简单的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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.