手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

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

vue-nprogress-pjax 插件

 基于昨天写的vue+blade+(vue-pjax-adapter),发现没有任何进度提示,感觉比较不直观,但vue-pjax-adapter不能注入方法(或许是我不会)。

在app.js里引入了nprogress后。在axios请求前尝试注入,比如:
JavaScript代码
  1. window.axios.interceptors.request.use((config) => {  
  2.     console.log(before);  
  3.     NProgress.configure({easing: 'ease', speed: 1000, showSpinner: true});  
  4.     NProgress.start();  
  5.     return config;  
  6. });  
  7. window.axios.interceptors.response.use((response) => {  
  8.     NProgress.done();  
  9.     console.log(after);  
  10.     return response;  
  11. }, (error) => {  
  12.     return Promise.reject(error);  
  13. });  
但是没有看到有任何需求。才尝试修改了一下vue-pjax-adapter插件
用法和vue-pjax-adapter完全一样:
XML/HTML代码
  1. import nPjaxAdapter from 'vue-nprogress-pjax';  
  2. window.Vue.use(nPjaxAdapter);  
  3. /**  
  4.  * 如果不是标准的pjax-container,就是这样使用  
  5.  * // window.Vue.use(nPjaxAdapter, {  
  6.  //     targetSelector: '#my-custom-target',  
  7.  // });  
  8.  */  
就这样简单。现在切换页面有进度条了
 代码在这里:https://www.npmjs.com/package/vue-nprogress-pjax
 
 
 

post的奇技淫巧:Post the checkboxes that are unchecked

 放到javascript里为实在是意外 。主要是这应该是属于前端的事情。

起因是这样的,一个checkbox,在没有选中前提交。POST过来的数据中。连checkbox对应的name的KEY,在$_POST中就不存在。这个就尴尬了。因为正常操作是form.submit(),或者是用$.post('xxx',$('#form').serializeArray())。这两种情况下,未选中的checkbox直接就消失在$_POST中了
 
表单的KEY比较多,将近20个(有点夸张,但是是事实)。如果一个个的写 var xxx = $('xxx:checked').val()||0; 这样也好痛苦的说~~
 
网上找了一下,看到这个:https://stackoverflow.com/questions/1809494/post-the-checkboxes-that-are-unchecked,
投票最高的居然是:
XML/HTML代码
  1. <form>  
  2.   <input type='hidden' value='0' name='selfdestruct'>  
  3.   <input type='checkbox' value='1' name='selfdestruct'>  
  4. </form>  
原理就是,如果selfdestruct有值,默认下面有值的会覆盖上面的。因为一个FORM里同名的key只能有一个。如果selfdestruct没有选中,那么就会用hidden里的值!
 
 
 
 

jqweui 的 select/picker 控件添加清除

 jqweui是一个偷懒的基于Weui的组件,1.0的时候已经部分支持rem。所以用的还是比较多的。特别是我对它的部分组件有了一些扩展。而且它还有一些奇技淫巧。

1、如何通过函数来动态调整picker的内容。

默认情况下,picker/select在初始化的时候值已经固定了。这时候你其实是没有办法调整的,但不代表没有办法。虽然 API里没有提供,读了源码后你就能发现。其实你可以这样:

JavaScript代码
  1. $('#xxx').val('').data('weui-select',false).select({  
  2.                   title: "其他值",  
  3.                   items: ["1","2"]  
  4.               });  

记得有一个恶心的地方,items里的值不能是数字!!!

2、添加清除功能,默认的select/picker在选择后就不能清除了(当然你可以在items的第一个值设置为空)。所以我简单的扩展了一下:https://github.com/lihongxun945/jquery-weui/issues/443。

无非就是加个文字,加个清除等等。。

3、picker/select在使用的时候,有时候会显示一个软键盘而无法删除和隐藏。这时候的解决办法其实就是在input上面加上onfocus="this.blur()"即可!

New user help: columns vs. columnDefs for client side rendering of AJAX data

 说实话,在datatables里,我觉得这个回复挺重要的!https://datatables.net/forums/discussion/33723/new-user-help-columns-vs-columndefs-for-client-side-rendering-of-ajax-data

 
提问:
XML/HTML代码
  1. Hi,  
  2.   
  3. I'm a beginner with DataTables. I'm trying to use DataTables AJAX to pull records from the server (an ASP.NET MVC app.) Each record coming from the server has name, address line 1, address line 2, city, state, zip. I want my table to combine and format all those fields into one column on the client.  
  4.   
  5. My questions are:  
  6. 1. Would I use columns.render, or columnDefs.render?  
  7. 2. Do I need both columns and columnDefs?  
  8. 3. Do I need to specify either the table column name (e.g., NameAndAddress) in "columns", or do I need to list each field coming back from the server?  
  9. 4. How do I use "targets"? Does "targets" refer to the column in the displayed table, or the column under "columns"?  
  10.   
  11. Thanks for your help. I've been though the documentation a few times and I'm still confused about columns vs. columnDefs.  
回答:
 

"columns" & "columnsDefs" ultimately serve the same purpose.

The differences being:

  1. "columns" requires you to provide a configuration or null for all columns. "columnDefs" requires you to only proved configuration for columns that have "special" configurations
  2. I have found "columns" best used if handling array of strings as your rows. I have found "columnDefs" best used if handling objects as your rows

"targets" takes a single string or int value, or array of previous two to denote which columns this configuration is for. I suggest using column class instead of column # in the event you want to use ColReorder extension.

Here are examples of how I have configured columns in my application.

HTML:
XML/HTML代码
  1. <th class="actionsCol no-print">Actions</th>  
  2. <th class="StatusCol">Status</th>  
  3. <th class="IsFinalCol">Final<br>Plan</th>  
  4. <th class="VrsnCol">Vrsn</th>  
  5. <th class="CutCntCol">Cut<br>Cnt</th>  
  6. <th class="CarCntCol">Car<br>Cnt</th>  
JS关键代码:
JavaScript代码
  1. "columnDefs": [  
  2.                {  
  3.                     // This is for the Action column icons  
  4.                     "targets"'actionsCol',  
  5.                     "sorting"false,  
  6.                     "orderable"false,  
  7.                     "type":"html",  
  8.                     "width""8%",  
  9.                     className: "dt_nowrap_col no-print",  
  10.                     "render"function (data, type, row) {  
  11.                         return $.jqote(yv.templates.action_icons, data);  
  12.                     }  
  13.                 },  
  14.                 {  
  15.                     "targets": ['IsFinalCol','CutCntCol','CarCntCol','VrsnCol','StatusCol'],  
  16.                     "width""5%"  
  17.                 },  
  18. etc  
  19. ]  
 
看到这些定义,估计你应该能够想得出如何更好的应用了吧?
----EOF---
 
其他参考 :
https://datatables.net/reference/option/columns.render#Examples
 
Records:24612345678910»