tinymce 5 的dialog不再支持iframe了

栏目: Html · 发布时间: 5年前

内容简介:尝试整个vue+tinymce的时候遇到点问题(之前说过,本来是用quillJS的。但如果要发表的内容支持那些微信编辑器里复制过来的内容。quill自己定义过的一些虚拟DOM就不支持了)希望是美好的,实现起来是麻烦的,最后我放弃所有的选项,改用弹框iframe的形式。然而,问题就这么来了,tinymce5的dialog居然不支持iframe了。比如你看这个:https://github.com/tinymce/tinymce/issues/4786,官方直接说不支持了。NND不过有人提示说,可以利用html

尝试整个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代码

function FileManager(callback, value, meta) {  
        var windowManagerURL = "/FilManage";// filemanager path  
   
        var windowManagerCSS = '<style type="text/css">' +  
            '.tox-dialog {max-width: 100%!important; width:97.5%!important; overflow: hidden; height:95%!important; border-radius:0.25em;}' +  
            '.tox-dialog__header{ display:none!important; }' +// for custom header in filemanage  
            '.tox-dialog__footer { display: none!important; }' +// for custom footer in filemanage  
            '.tox-dialog__body { padding: 0!important; }' +  
            '.tox-dialog__body-content > div { height: 100%; overflow:hidden}' +   
            '</style > ';  
        window.tinymceCallBackURL = '';  
        window.tinymceWindowManager = tinymce.activeEditor.windowManager;  
        tinymceWindowManager.open({  
            title: '',  
            body: {  
                type: 'panel',  
                items: [{  
                    type: 'htmlpanel',  
                    html: windowManagerCSS+ '<iframe src="' + windowManagerURL + '"  frameborder="0" style="width:100%; height:100%"></iframe>'  
                }]  
            },  
            buttons: [] ,  
            onClose: function () {  
                if (tinymceCallBackURL!='')  
                    callback(tinymceCallBackURL, {}); //to set selected file path  
            }   
            
        } );  
    }  

iframe中:

JavaScript代码

var windowManager = top != undefined && top.tinymceWindowManager != undefined ? top.tinymceWindowManager : '';  
  
  
 if (windowManager != '') {  
        if (top.tinymceCallBackURL != undefined)  
            top.tinymceCallBackURL = path;  
            windowManager.close();  
    }  
本站采用版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"

", 保留原始链接, 此外还必须标注原文标题和链接.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

R Cookbook

R Cookbook

Paul Teetor / O'Reilly Media / 2011-3-22 / USD 39.99

With more than 200 practical recipes, this book helps you perform data analysis with R quickly and efficiently. The R language provides everything you need to do statistical work, but its structure ca......一起来看看 《R Cookbook》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具