尝试整个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();
- }