jquery – tinymce 4:如何创建自己的文件管理器?

前端之家收集整理的这篇文章主要介绍了jquery – tinymce 4:如何创建自己的文件管理器?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建自己的文件浏览器,以便我可以从我的文件管理中选择图像并将其发送到tinymce的图像链接字段,但我无法在其他任何地方找到有关如何实现此目的的更多信息.

这是在插入/编辑图像上打开新弹出窗口的代码,

  1. file_browser_callback: function(field_name,url,type,win) {
  2.  
  3. //tinymce.activeEditor.windowManager.close();
  4. //console.log(field_name);
  5.  
  6. tinymce.activeEditor.windowManager.open({
  7. title: 'Browse Image',file: "yourbrowser.PHP?field=" + field_name + "&url=" + url,width: 450,height: 305,resizable : "no",inline : "yes",close_prevIoUs : "no",buttons: [{
  8. text: 'Insert',classes: 'widget btn primary first abs-layout-item',disabled: true,onclick: 'close'
  9. },{
  10. text: 'Close',onclick: 'close',window : win,input : field_name
  11. }]
  12. });
  13.  
  14. return false;
  15. },

这就是我卡住的地方 – 如何从文件管理器中选择图像并将其发送到插入/编辑图像弹出窗口中的图像链接

下面是我到目前为止的整个代码,

  1. $(document).ready(function(){
  2.  
  3. $('.button').click(function(){
  4.  
  5. // @reference: http://www.tinymce.com/wiki.PHP/api4:method.tinymce.remove#
  6. if(tinyMCE.editors.length > 0) {
  7.  
  8. // Remove all editors bound to textareas
  9. //tinymce.remove('textarea');
  10.  
  11. // Remove all editors
  12. tinymce.remove();
  13. }
  14.  
  15. $('.content').load('full.html',function() {
  16.  
  17. if(tinyMCE.editors.length == 0) {
  18.  
  19. tinymce.init({
  20. //selector: "textarea",mode : "textareas",editor_selector : "mce-customised",editor_deselector : "not-editor",theme: "modern",plugins: [
  21. "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"
  22. ],toolbar1: "insertfile undo redo | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",toolbar2: "print preview media | forecolor backcolor emoticons",image_advtab: true,file_browser_callback: function(field_name,win) {
  23.  
  24. //tinymce.activeEditor.windowManager.close();
  25. //console.log(field_name);
  26.  
  27. tinymce.activeEditor.windowManager.open({
  28. title: 'Browse Image',buttons: [{
  29. text: 'Insert',onclick: 'close'
  30. },{
  31. text: 'Close',input : field_name
  32. }]
  33. });
  34.  
  35. return false;
  36. },// Specifying an Absolute Image Path
  37. document_base_url : "http://localhost/test/2013/js/tinymce/tinymce_4.0.2/",relative_urls : false,remove_script_host : false,image_list: "image_list.PHP",link_list: "link_list.PHP"
  38. });
  39.  
  40. $('.button-submit').submit_form();
  41. }
  42.  
  43. });
  44.  
  45. return false;
  46. });
  47.  
  48. });

test site.

或者,你知道任何与tinymce一起工作的好文件mananger插件吗?

解决方法

也许你应该在这里找到有用的信息: Configuration:file_browser_callback
  1. win.document.getElementById(field_name).value = 'my browser value';

在这里:tinymce forum

猜你在找的jQuery相关文章