尝试整个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";
-
- 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; }' +
- '.tox-dialog__footer { display: none!important; }' +
- '.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, {});
- }
-
- } );
- }
iframe中：
JavaScript代码
- var windowManager = top != undefined && top.tinymceWindowManager != undefined ? top.tinymceWindowManager : '';
-
-
- if (windowManager != '') {
- if (top.tinymceCallBackURL != undefined)
- top.tinymceCallBackURL = path;
- windowManager.close();
- }
辛苦写了一堆。一个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/
