tinymce 5 的dialog不再支持iframe了

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

内容简介:尝试整个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();  
    }  
本站采用版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"

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


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

查看所有标签

猜你喜欢:

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

Head First WordPress

Head First WordPress

Siarto Jeff / O'Reilly Media / 2010-02-15 / USD 34.99

Whether you're promoting your business or writing about your travel adventures, "Head First WordPress" will teach you not only how to make your blog look unique and attention-grabbing, but also how to......一起来看看 《Head First WordPress》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具