手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2019年02月的文章

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

Error: Calling needs :cxx11 is disabled! There is no replacement.

brew 安装个软件,没装成功却开始报这个错了:

Already up-to-date.

Error: Calling needs :cxx11 is disabled! There is no replacement. 

Please report this to the chrisdeeming/legacyphp 

tap: /usr/local/Homebrew/Library/Taps/chrisdeeming/homebrew-legacyphp/Formula/php@7.0.rb:41

我晕。现在都7.2了,这个源还报错?看了下官网。原来这个源不再需要:needcxx11了。OK,官网说重新brew update一下就好了。

重新brew update。恢复正常

1、https://github.com/chrisdeeming/homebrew-legacyphp/pull/4

2、https://github.com/chrisdeeming/homebrew-legacyphp/issues/2

简易重启mac 下的mamp pro

 简单的弄一下。因为有时候要改配置,然后打开mamp,点击重启会耗时特别长。。。。所以简单的弄了一下

XML/HTML代码
  1. #!/bin/bash  
  2.   
  3. function start(){  
  4.     /Applications/MAMP/Library/bin/httpd -f "/Library/Application Support/appsolute/MAMP PRO/conf/httpd.conf" -k start  
  5. }  
  6.   
  7. function stop(){  
  8.     /Applications/MAMP/Library/bin/httpd -f "/Library/Application Support/appsolute/MAMP PRO/conf/httpd.conf" -k stop  
  9. }  
  10.   
  11. function restart(){  
  12.    (stop)  
  13.    (start)  
  14. }  
  15.   
  16. function status(){  
  17.     ps aux|grep httpd  
  18. }  
  19.   
  20. echo "which do you want to?input the number."  
  21. echo "1. start"  
  22. echo "2. stop"  
  23. echo "3. restart"  
  24. echo "4. status"  
  25. read num  
  26.   
  27. case "$num" in  
  28. [1] ) (start);;  
  29. [2] ) (stop);;  
  30. [3] ) (restart);;  
  31. [4] ) (status);;  
  32. *) echo "exit";;  
  33. esac  
其实没啥难度就是这么几行代码。连路径都没有定义变量。但一般情况下够用了,复制不成功的,可以直接打开://neatstudio.com/mamp.txt
 

Tags: mamp

记录几个与quill相关的网址

 辛苦写了一堆。一个cmd+w,全没了。

QuillJS相关(QuillJS是个好的编辑器,但不适合做一些CMS的后台,因为他对从微信编辑器里复制过来的内容没有办法保证格式,我在使用了之后。发现Quill只能自用,半商用还得用TinyMCE吧),官网:https://quilljs.com/

1、Quill富文本编辑器,自定义上传图片时间,上传七牛云返回地址,插入编辑器? https://www.zhihu.com/question/63589376

2、fxmontigny/quill-image-upload https://github.com/fxmontigny/quill-image-upload

3、Quill编辑器添加自定义插件 https://luncher.github.io/2018/06/02/Quill编辑器添加自定义插件/

4、vue-quill-editor图片上传 https://www.jianshu.com/p/36b144b4cef8

5、lihualong/quilleditor https://github.com/lihualong/quilleditor 这个改了源码,不建议

6、简单:直接重写图片上传事件实现图片上传到服务器 https://github.com/surmon-china/vue-quill-editor/issues/134

7、vue-quill-editor自定义图片上传 https://segmentfault.com/a/1190000009877910

8、改造vue-quill-editor:实现图片上传到服务器再插入富文本 https://github.com/NextBoy/skill/issues/2

9、配合 element-ui 实现上传图片/视频到七牛 demo https://github.com/surmon-china/vue-quill-editor/issues/102

10、在Vue项目使用quill-editor带样式编辑器(更改插入图片和视频) www.cnblogs.com/zhengweijie/p/7305903.html

11、Quill编辑器介绍及扩展 www.cnblogs.com/calvinK/p/6322512.html

 

VUE上传相关(如果直接FORM上传,可以用element的组件)

1、Vue Element UI + OSS上传文件 https://blog.csdn.net/qq_27626333/article/details/81463139

2、vue el-upload直传阿里云oss https://www.jianshu.com/p/e6721e64c93a

3、cag2050/qiniu_upload https://github.com/cag2050/qiniu_upload

4、marchFantasy/vue-file-upload https://github.com/marchFantasy/vue-file-upload

5、Element-Ui组件(十七)Upload 上传  http://element-cn.eleme.io/#/zh-CN/component/upload

6、ElementUI el-upload 断点续传文件 https://blog.csdn.net/qq_19694913/article/details/81208049

7、换个姿势上传?el-upload + qiniu-js 的实现 https://juejin.im/post/5ab5b069f265da239148102f

VUE props和emit相关

1、vue中子组件的methods中获取到props中的值 https://blog.csdn.net/zmkyf1993/article/details/80320802

2、【vue】组件的使用(2)Prop依赖,以及.sync用法 https://github.com/Kelichao/vue.js.2.0/issues/18

3、有点不明白,vue子组件自定义事件为何不能在$emit传入当前方法 https://segmentfault.com/q/1010000007802941 【我开始也是因为这个大小写。。。。】

4、vue组件间通信、数据传递(父子组件,同级组件) https://segmentfault.com/a/1190000011882494

5、Vue组件通讯: prop this.$on this.$emit eventBus router https://zhuanlan.zhihu.com/p/37881481

6、说说在 Vue.js 中如何实现组件间通信(高级篇) https://www.jianshu.com/p/9635baca315c

VUE和tinyMCE

1、https://www.jsdelivr.com/package/npm/tinymce-vue?path=dist 

2、https://github.com/tinymce/tinymce-vue#usage

3、https://tinymce.github.io/tinymce-vue/

 

Tags: quill, tinymce, vue