使用wangEditor富文本编辑器遇到的问题总结

淩亂°似流年 2022-04-12 04:40 2294阅读 0赞

怎么使用和安装我就不详细说了，文档写得很清楚，[https://www.kancloud.cn/wangfupeng/wangeditor3/332599][https_www.kancloud.cn_wangfupeng_wangeditor3_332599]

1、当屏幕缩时，富文本编辑器的选项会被隐藏，如下图官网的demo：当屏幕变小时，菜单选项就超出了富文本编辑器的区域，撤回和恢复已经隐藏不见了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70][]

原因，如果我们检查代码就会发现，其实富文本编辑器使用了弹性盒模型（不懂的百度，推荐阮一峰大神的文章：[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?%5E%25$][http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html_5E_25]）,display:flex,所以知道了这个问题就简单了，我们知道，弹性盒模型，默认情况下，项目都排在一行上面，也即超出部分不换行:flex-wrap:nowrap ,所以我们只需要更改编辑器的默认值即可，即添加一条样式:flex-wrap:wrap

.w-e-toolbar{
      flex-wrap:wrap;
    }

注意：有时候我们在vue组件内部更改默认样式不起作用，此时可以在全局试试就可以了，至于为什么，我暂时还没搞明白，如果您知道，欢迎评论区留言告知哦，在此先谢过

2019-12-12

看到这里有遗留的问题（评论区有大神已经回复了哈）：现在已经会了，解决办法：

1、不要放在scoped中，放在全局，为了避免和其他的组件冲突，可以加一个类名，在类名下修改就没有问题了

2、如果写在了scoped中，可以给类名前面加一个/deep/ 至于具体用法可以自行百度

就这么简单，然后看图：完美！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70 1][]

问题2：上传图片到服务器中（可以使用base64格式的，但是如果图片过大，经过base64编译过后文件会很大，所以不建议哦）

我封装了一个函数，可以上传图片，可以动态获取内容，如下：

data(){
      return {
        editContent:''//存储富文本编辑器的内容
      }
    },
    
    
    methods:{
     wangEdit (id) {
          let editor = new E(id)
          editor.customConfig.onchange = (html) => {
            this.editContent = html//动态获取富文本编辑器的内容
          }
          editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
          editor.customConfig.uploadFileName = 'file[]'
          editor.customConfig.uploadImgServer = '/proxy/platform/photo.moreImgUpload'//换成后端给你的上传图片的接口
          editor.customConfig.uploadImgHooks = {
            before: function (xhr, editor, files) {
              let formdata=new FormData();
              for(let i=0;i<files.length;i++){
                let url = files[i];
                formdata.append('file[]', url)
              }
            },
            customInsert: function (insertImg, result, editor) {
              for(let i=0;i<result.data.length;i++){
                let url = result.data[i]
                insertImg(url)
              }
            }
          }
          editor.create()
        }
    }
    
    
    //使用：this.wangEdit(‘#edit’)

[https_www.kancloud.cn_wangfupeng_wangeditor3_332599]: https://www.kancloud.cn/wangfupeng/wangeditor3/332599
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70]: /images/20220412/55374b77cc924ac39616d760fa63b5f5.png
[http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html_5E_25]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?%5E%25$
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70 1]: /images/20220412/69dd61de7d844ffcbf0c4be6c1b77179.png