1. 前言

  wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了。它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索、成长。就像这么大的小孩一样,它的下一个目标是要自己站起来、自己走下去。

  而这一版本的更新,已经可以让它有足够的力量站起来,勇敢的走下去。( wangEditorQQ群:164999061 ,欢迎加入交流)

  

2. 产品观的转变

  在此前的一段时间,通过用户的反馈以及自己的一些比较、思考,觉得wangEditor还是有很多不完善的地方。于是,我不断的思考改进,完善产品的同时,也在转变着自己做产品的观念。

  例如,一些很简单的功能,用户不去看文档,而是跑QQ群问我,然后我再把文档链接发给他。一开始我抱怨用户不认真看文档。后来,我越来越觉得是自己做的不够好。用户不去看文档,大部分原因肯定在于自己的文档页面没有做好。

  再例如,配置上传图片时,后台的代码我是用C#写的,就会有好多人跑来问我:php的怎么写?java的怎么写?……我也不知道怎么写,我现在搞前端搞的C#都快不会写了。为何用户要这么问我——因为我的产品涉及到了领域,如果涉及不到这个领域,用户肯定不会问我的。

  再例如,网站首页虽然没有人提出过意见,但是我总是觉得有些问题。难看说不上,但是如果我是用户,我已进入网站首页,我应该首先看到什么?于是这一版本我就改了首页,分享给一些用户看,他们都说比之前的好一些。

  

  通过修改以上问题,我逐步改变了自己做产品的观念,主要集中在以下几点:

  • 把用户当傻子,谁的产品能应对更傻的人,谁的产品就更易用;
  • 做好产品定位,不擅长或者没必要的领域,千万不要涉及。要用,就搞一个集成方案;
  • 学会主动,主动给用户带来惊喜,哪怕是很小的;  

3. 修改官网首页

  再美的人,也需要漂亮衣服的衬托,有一个漂亮的主页,能多吸引用户几秒钟的时间。相比于之前的首页,改版之后的首页(www.wangEditor.com),更加突出了内容和重点,这也是现在扁平化设计的一个核心思想。

  用户进入首页之后,首先看到的就是主标题和副标题,知道这是个什么东西(要不然心里肯定暗骂“什么鬼”了)。然后接着看到的就是那么大的一个demo演示,看到这里,用户就能彻底明白这个东西的作用了。另外,如果想继续了解,可以翻看下面的介绍,也可以点击上面的链接。

  互联网速食时代,内容才是王道!

  

4. 修改文档页面

  之前,wangEditor的文档页面一直是一个很大的诟病,才导致了用户不看文档而是跑QQ群问我问题。而现在,一个文档页面(www.wangeditor.com/wangEditor/docs/),可以解决你所有的使用问题,左侧导航、右侧内容的方式,也是目前文档页面的常用风格。

  而且,文档导航中,对功能进行了分类:基本应用、基本配置、图片上传、其他,把同类的功能,组合在一起。

  最后,对图片上传(跨域、非跨域)这个比较复杂的配置,录制了视频进行演示,并提供视频中演示代码的下载。(够意思吧!!)

  

5. 修改图片上传方式

  图片上传之前一直是wangEditor的诟病,此前用户提出的问题中,大约有1/3到1/2跟图片上传有关。所以,我从很早就开始憋着要好好捣鼓捣鼓图片上传。

5.1 非跨域上传

  在目前的使用者中,用到跨域的还不是特别多。

  本次修改中,非跨域上传讲采用plupload这个伟大的插件,站在巨人的肩膀上吗,哈哈。plupload插件的功能非常强大,什么多文件上传、拖拽、限制类型大小、预览这些都能搞定,这样就不用我自己开发啦。

  而且,是需要用户自己开发一个plupload上传组件,然后集成到wangEditor中。这样就把wangEditor和上传组件分离开了,上传图片的功能、页面样式,完全用户自己控制。(不要一定说“组件”、“集成”就想象的很复杂,其实很简单的,看看文档就知道了)

  当用户没做任何配置的时候,点击“菜单”按钮这样显示(只能插入网络图片):

  

  配置了上传组件之后,点击“菜单”按钮,就这样显示(能上传本地图片,也能插入网络图片):

  

  这个变化,是由系统自动处理的。怎么样,是不是很神奇?

  另外,我专门为配置图片上传录制了视频演示,以及下载视频中的代码,在文档中链接。

5.2 跨域上传

  首先,这里恭喜先前使用wangEditor上传图片的用户(先前wangEditor只有跨域上传),本次更新的跨域上传向下兼容,你们之前的配置现在同样有效!同时,本版本做的更加易用。之前插入网络图片和上传图片是两个菜单,现在合并成了一个。

  没有配置该功能时,点击“菜单”按钮这样显示(只能插入网络图片):

  

  配置了url地址之后,点击“菜单”按钮,就这样显示(能上传本地图片,也能插入网络图片):

  

  另外,我专门为配置图片跨域上传录制了视频演示,以及下载视频中的代码,在文档中链接。

6. 合并同类菜单

  我一直觉得,之前wangEditor的菜单太多,这样就导致如果width太窄,菜单就会换行,换行就不好看。再者,菜单太多了,导致界面混乱,应用性差。

  因此,我把同类的菜单合并起来,这样既能让界面更加简洁,又不失用户体验。

  

7. 总结

  以上就是本次更新的主要内容,希望大家能多多支持这款产品。  

  也欢迎给我捐赠,为开源软件加注你的一份能量!

  

-------------------------------------------------------------------------------------------------------------

欢迎关注我的教程:

《使用grunt搭建全自动web前端开发环境》《从设计到模式》《json2.js源码解读视频》

深入理解javascript原型和闭包系列》《css知多少》《微软petshop4.0源码解读视频》

------------------------------------------------------------------------------------------------------------

也欢迎关注我的开源项目——wangEditor,轻量化web富文本编辑器

-------------------------------------------------------------------------------------------------------------

更加简洁易用——wangEditor富文本编辑器新版本发布相关推荐

  1. wangeditor富文本编辑器的使用(超详细)

    一.基本介绍 官方文档:http://www.wangeditor.com/ 1.wangeditor富文本编辑器的特点 基于javascript和css开发的 Web富文本编辑器, 轻量.简洁.易用 ...

  2. 【wangEditor富文本编辑器】富文本三种使用方法,html使用富文本,html套vue脚手架使用富文本,vue使用富文本【简单易用,复制即用】

    前言 富文本编辑器功能是很多人都要使用的 市面上有很多的编辑器可以供选择,但是很多编辑器会有点复杂,或者文档看起来难受. 我最近做了一个需求,是需要在html文件上写富文本编辑器. 但是我看了以前用的 ...

  3. wangeditor富文本编辑器上传图片以及跨域问题解决

    一.简介 wangeditor富文本编辑器是由js和css开发的富文本编辑器,轻量.简洁.高效 详细信息可以查看官网:http://www.wangeditor.com/ 二.上传图片 本章内容主要讲 ...

  4. wangeditor富文本编辑器集成配置

    wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...

  5. css wangeditor 修改_内容复制到wangEditor富文本编辑器样式排版错误重置方法

    从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误解决方案 从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误,粘贴到wangEditor时鼠标右击选择&q ...

  6. 集成wangEditor富文本编辑器

    以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...

  7. wangEditor富文本编辑器使用、编辑器内容转json格式

    wangEditor富文本编辑器好处:可以吧文本编辑器中的内容转成json格式,方便app.小程序使用 wangEditor官网 wangEditor官方文档 wangEditor官方下载 下载好之后 ...

  8. 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例...

    在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...

  9. wangEditor 富文本编辑器使用

    wangEditor 富文本编辑器使用 框架: react hooks 链接: 官方文档参考 富文本编辑器组件 import '@wangeditor/editor/dist/css/style.cs ...

最新文章

  1. python连接数据库,处理数据结果后生成excel文件
  2. 摘之知乎网友...PHYTIN学习
  3. 【计算机网络】应用层 : DNS 域名解析系统 ( 域名 | 域名服务器 | 域名解析过程 | 递归查询 | 迭代查询 | 高速缓存 )
  4. SNMP协议介绍和操作截图
  5. 速卖通代运营收费标准,什么样的商家适合找代运营公司
  6. react+express+mongodb搭建个人博客
  7. HTML 5 input placeholder 属性
  8. php theexcerpt,wordpress的excerpt()函数的用法示例
  9. 玩转JMETER参数化
  10. 万字长文详解如何用 Python 玩转 OpenGL | CSDN 博文精选
  11. integer为null_比较两个Integer,为什么必须使用equals?不用==
  12. 用C语言实现万年历的代码及思路(详细教程)
  13. 一套数据中心弱电系统安全运维服务方案,完整版素材!
  14. 2.大型网站架构演化的价值观
  15. Android 6.0 Phone 多方通话流程
  16. 241个jquery插件—jquery插件大全
  17. X版Dr.COM校园网使用路由器上网
  18. 百度账号在chrome浏览器登录提示cookie安全问题解决方法
  19. Android设备通过USB共享网络给OpenWrt路由器
  20. linux下oled显示设计,OLED显示问题

热门文章

  1. Windows 下TSI721数据采集软件
  2. 无人值守安装linux操作系统
  3. 投影仪问题Debug
  4. c语言转义字符详解,C语言转义字符和格式控制符参考
  5. cle IMP-00015: 由于对象已存在, 下列语句失败
  6. JSP 返回上一页的几种方法
  7. 艾德卡EDEKA EDI 需求分析
  8. 在编译器中鼠标光标变成下横线的解决办法
  9. C++实现Hill算法(希尔算法)
  10. 【商业画布】魏朱画布