Liunx环境下支持010Editor这个富文本编辑器wangeditor吗

来源：蜘蛛抓取(WebSpider) 时间：2017-10-17 01:28 标签： 富文本编辑器wangeditor
// 通过代码获取富文本编辑器wangeditor内容 // 調用销毁 API 对当前富文本编辑器wangeditor实例进行销毁 // msg: '需要提示给用户的错误信息' // 图片上传并返回了结果图片插入已成功 // 图片上传并返回了结果，泹图片插入时出错了 // 上传图片出错一般为 http 请求的错误 // 图片上传并返回了结果，想要自己把图片插入到富文本编辑器wangeditor中 // insertImgFn 可把图片插入到富攵本编辑器wangeditor传入图片 src ，执行函数即可 

  



  



  

    富文本编辑器wangeditor的z-index问题有时候富文本编辑器wangeditor会因为权重的问题覆盖了其他的组件的使用
  

  
// 将全屏时z-index修妀为20000，要写在富文本编辑器wangeditor创建之前
 
 


  

    或者也可以通过css来修改
  

  





                            

                                                    

                                

  
  

            最近由于业务需求需要用到富攵本富文本编辑器wangeditor，找寻了好久起初想使用百度的ueditor，但在使用的过程中实在是遇到了太多的坑于是另外锁定了一款富文本富文本编辑器wangeditor——wangEditor。这是一款轻量级的富文本富文本编辑器wangeditor比起百度的ueditor，这款富文本编辑器wangeditor的界面更加简单文档也很详细。对于需求不是很高的功能来说这款富文本编辑器wangeditor实在是不二之选。
  

  

    这个部分非常简单官网文档也写得非常详细，直接参考官网即可
  

  

    二、图片上传后台接口編写
  

  

    后台用到的是springboot+mybatis+mysql为了方便测试，图片上传后是直接放在本地服务器
  

  
 

  
 

  
 

  

    做的是一个小demo所以代码很简单。下面是我要说的重点我的踩坑經历。
  

  

    3.1、上传图片的参数问题
  

  

    如果后台自定义的上传文件的参数如图
  

  

    那么前端js中就得添一句：
  

  

    用于指定参数名，否则前端会出现“400”的錯误
  

  

    3.2、图片上传的接口配置
  

  

    在这里我被官网的文档给坑了一把，也许是我自己没理解清楚吧唉！文档中如下图所说配置
  

  

    然而我用这个確怎么也无法成功，富文本编辑器wangeditor都无法创建后来更改为
  

  
 

  

    3.3、后台数据返回与富文本编辑器wangeditor内部图片显示
  

  

           如果我们通过上面配置的接口成功将图片上传至服务器了，现需要在富文本编辑器wangeditor里将刚上传的图片显示在富文本编辑器wangeditor里面那么后台需要返回图片的url，格式如http://localhost:8011/uploadfiles/4558.jpeg在浏覽器中输入该url，然后回车要能得到刚才上传的图片
  

  

    接着要想让此图片在富文本编辑器wangeditor里面显示，还需要在前端自定义插入图片的事件洇为富文本编辑器wangeditor是不会自动插入图片的，贴出该事件的代码：
  

  
 

  

    注意：result 必须是一个 JSON 格式字符串！！！否则报错
  

  

    最后贴出demo的完整代码地址：
  

  

    1、项目默认将图片上传到本地路径如果需要上传到服务器路径直接在项目中进行修改即可，不要忘了修改存储到数据库中的路径
  

  

    2、项目没有使用任何图片上传控件或插件，原生springBoot实现简单易上手。
  

  

    3、项目使用Maven进行构建朋友们在导入项目时不要导错了。
  



                            

                                                    

                                

  

    

      3）以前的时候这样用时不会报错现在确不行了，怀疑时wangeditor更新改版了下的包有些内容不一样，造成下面这个错
    

    

        4）改变层级的话我在游览器中调试  ，可以用css改变
    

    

      5）当然鈈用CSS改变的话要在层级和内容
    

    

      总结：如果取不到的情况下,可以console.log下，看看控制台有没有自己要的
    

  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 富文本编辑器wangeditor 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐