2015-08-24 3 views
1

Я использую крошечный текстовый редактор mce в приложении asp.net из этого плагина http://www.tinymce.com. Я использую http://www.roxyfileman.com/TinyMCE-file-browser для добавления файлового браузера функция в текстовом редакторе mce. Теперь я пытаюсь вызватьГде мы должны скачать всплывающий файл tinymce с полной реализацией?

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(); 
} 

на кнопку отправить щелчок, он выдает две ошибки

  • Uncaught TypeError: t.editor.windowManager.createInstance is not a function tinyMCEPopup.init @ tinymcepopup.js:26(anonymous function) @ tinymcepopup.js:274 2ImageUpload.html?type=image&input=mceu_96-inp&value=:16
  • Uncaught TypeError: tinyMCE.getWindowArg is not a function

Пожалуйста, помогите мне !!!

ответ

3

Я просто провел ВСЕ ДЕНЬ, пытаясь понять это. Оказывается, вам совсем не нужно 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

Это, мой добрый сэр, сделал мой день. – csch

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

Смежные вопросы