手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2019年02月16日的文章

tinymce 5 的dialog不再支持iframe了

 尝试整个vue+tinymce的时候遇到点问题(之前说过,本来是用quillJS的。但如果要发表的内容支持那些微信编辑器里复制过来的内容。quill自己定义过的一些虚拟DOM就不支持了)

希望是美好的,实现起来是麻烦的,最后我放弃所有的选项,改用弹框iframe的形式。然而,问题就这么来了,tinymce5的dialog居然不支持iframe了。比如你看这个:https://github.com/tinymce/tinymce/issues/4786,官方直接说不支持了。NND

不过有人提示说,可以利用htmlpanel,直接在htmlpanel的html标签里,用<iframe。。。然后我试了一下。。居然真的OK

好吧,直接参考 这个了!https://github.com/tinymce/tinymce/issues/4786#issuecomment-463827289

JS文件:

JavaScript代码
  1. function FileManager(callback, value, meta) {  
  2.         var windowManagerURL = "/FilManage";// filemanager path  
  3.    
  4.         var windowManagerCSS = '<style type="text/css">' +  
  5.             '.tox-dialog {max-width: 100%!important; width:97.5%!important; overflow: hidden; height:95%!important; border-radius:0.25em;}' +  
  6.             '.tox-dialog__header{ display:none!important; }' +// for custom header in filemanage  
  7.             '.tox-dialog__footer { display: none!important; }' +// for custom footer in filemanage  
  8.             '.tox-dialog__body { padding: 0!important; }' +  
  9.             '.tox-dialog__body-content > div { height: 100%; overflow:hidden}' +   
  10.             '</style > ';  
  11.         window.tinymceCallBackURL = '';  
  12.         window.tinymceWindowManager = tinymce.activeEditor.windowManager;  
  13.         tinymceWindowManager.open({  
  14.             title: '',  
  15.             body: {  
  16.                 type: 'panel',  
  17.                 items: [{  
  18.                     type: 'htmlpanel',  
  19.                     html: windowManagerCSS+ '<iframe src="' + windowManagerURL + '"  frameborder="0" style="width:100%; height:100%"></iframe>'  
  20.                 }]  
  21.             },  
  22.             buttons: [] ,  
  23.             onClose: function () {  
  24.                 if (tinymceCallBackURL!='')  
  25.                     callback(tinymceCallBackURL, {}); //to set selected file path  
  26.             }   
  27.             
  28.         } );  
  29.     }  

iframe中:

JavaScript代码
  1. var windowManager = top != undefined && top.tinymceWindowManager != undefined ? top.tinymceWindowManager : '';  
  2.   
  3.   
  4.  if (windowManager != '') {  
  5.         if (top.tinymceCallBackURL != undefined)  
  6.             top.tinymceCallBackURL = path;  
  7.             windowManager.close();  
  8.     }  

 

Tags: tinymce