tinymce 5 的dialog不再支持iframe了

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

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

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


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

查看所有标签

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

算法设计与实验题解

算法设计与实验题解

王晓东 / 电子工业 / 2006-9 / 46.00元

《算法设计与实验题解》是与普通高等教育“十一五”国家级规划教材《计算机算法设计与分析》(第2版)配套的辅助教材,对主教材中的全部习题做了解答或给出了解题思路提示,并对主教材的内容进行了扩展,有些主教材中无法讲述的较深入的主题以习题的形式展现出来。为了提高学生解决实际问题的能力,《算法设计与实验题解》还将主教材中的许多习题改造成算法实现题,要求学生设计出算法并上机实现。作者还结合精品课程建设,进行了......一起来看看 《算法设计与实验题解》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换