v3.1.1

songyu1980 · Apr 10, 2018 · b77696f · b77696f
1 parent fddf2c7
commit b77696f
Show file tree

Hide file tree

Showing 32 changed files with 86 additions and 61 deletions.
diff --git a/ISSUE.md b/ISSUE.md
@@ -137,10 +137,26 @@
 - [done] 视图增加 “字体” “字号”（字体需要文档说明）
 - [done] 支持粘贴内容时忽略图片
 
+### v3.1.1
+
+- [done] 支持 webp 格式上传
+- [done] 增加粘贴时换行的处理，即`.replace(/(\r\n|\r|\n)/g, '<br/>')`
+- [done] 解决连续粘贴卡顿的问题（将节流间隔由`500ms`改为`100ms`）
+- [done] **上传时配置的自定义参数`uploadImgParams`，去掉自动 encode 的功能，重要！！！**
+- [done] 对于`editor.txt.getJSON()`中的特殊字符进行替换
+
+
 ### 近期计划解决
 
-- 外露的修改图片大小的按钮
+- 合并 pr
+- https://github.com/wangfupeng1988/wangEditor/issues/1445
+- https://github.com/wangfupeng1988/wangEditor/issues/1410
+- https://github.com/wangfupeng1988/wangEditor/issues/1396
+- https://github.com/wangfupeng1988/wangEditor/issues/1358
+- https://github.com/wangfupeng1988/wangEditor/issues/1367
+- 销毁的 API ，以及各个生命周期的 hook
 - **处理粘贴数据时，要把 pasteHtml 先转换成 vnode 之类的结构化对象，然后再递归处理**
+- 外露的修改图片大小的按钮
 - 撤销的兼容性问题（会误伤其他编辑器或者 input textarea 等），考虑用 onchange 记录 undo 和 redo 的内容（但是得考虑直接修改 dom 的情况，如 quote code img list table 菜单）
     - 列表撤销会删除一行？https://github.com/wangfupeng1988/wangEditor/issues/1131
     - 页面中有 input 等输入标签时，undo redo 会误伤 https://github.com/wangfupeng1988/wangEditor/issues/1024

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017 王福朋
+Copyright (c) 2018 王福朋
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/docs/usage/03-config/01-menu.md b/docs/usage/03-config/01-menu.md
@@ -32,6 +32,8 @@
 [
     'head',  // 标题
     'bold',  // 粗体
+    'fontSize',  // 字号
+    'fontName',  // 字体
     'italic',  // 斜体
     'underline',  // 下划线
     'strikeThrough',  // 删除线

diff --git a/docs/usage/04-uploadimg/03-upload-config.md b/docs/usage/04-uploadimg/03-upload-config.md
@@ -69,7 +69,9 @@ editor.customConfig.uploadImgMaxLength = 5
 
 ```javascript
 editor.customConfig.uploadImgParams = {
-    token: 'abcdef12345'  // 属性值会自动进行 encode ，此处无需 encode
+    // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
+    // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
+    token: 'abcdef12345'
 }
 ```
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "wangeditor",
   "title": "wangEditor",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "wangEditor - 基于javascript和css开发的 web 富文本编辑器， 轻量、简洁、易用、开源免费",
   "homepage": "http://wangeditor.github.io/",
   "author": {

diff --git a/release/wangEditor.js b/release/wangEditor.js
@@ -780,7 +780,7 @@ function replaceHtmlSymbol(html) {
     if (html == null) {
         return '';
     }
-    return html.replace(/</gm, '&lt;').replace(/>/gm, '&gt;').replace(/"/gm, '&quot;');
+    return html.replace(/</gm, '&lt;').replace(/>/gm, '&gt;').replace(/"/gm, '&quot;').replace(/(\r\n|\r|\n)/g, '<br/>');
 }
 
 // 返回百分比的格式
@@ -797,7 +797,7 @@ function isFunction(fn) {
 // 构造函数
 function Bold(editor) {
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-bold"><i/>\n        </div>');
+    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-bold"></i>\n        </div>');
     this.type = 'click';
 
     // 当前是否 active 状态
@@ -1001,7 +1001,7 @@ function Head(editor) {
     var _this = this;
 
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-header"><i/></div>');
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-header"></i></div>');
     this.type = 'droplist';
 
     // 当前是否 active 状态
@@ -1063,7 +1063,7 @@ function FontSize(editor) {
     var _this = this;
 
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-text-heigh"><i/></div>');
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-text-heigh"></i></div>');
     this.type = 'droplist';
 
     // 当前是否 active 状态
@@ -1102,7 +1102,7 @@ function FontName(editor) {
     var _this = this;
 
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-font"><i/></div>');
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-font"></i></div>');
     this.type = 'droplist';
 
     // 当前是否 active 状态
@@ -1336,7 +1336,7 @@ Panel.prototype = {
 // 构造函数
 function Link(editor) {
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-link"><i/></div>');
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-link"></i></div>');
     this.type = 'panel';
 
     // 当前是否 active 状态
@@ -1492,7 +1492,7 @@ Link.prototype = {
 // 构造函数
 function Italic(editor) {
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-italic"><i/>\n        </div>');
+    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-italic"></i>\n        </div>');
     this.type = 'click';
 
     // 当前是否 active 状态
@@ -1545,7 +1545,7 @@ Italic.prototype = {
 // 构造函数
 function Redo(editor) {
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-redo"><i/>\n        </div>');
+    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-redo"></i>\n        </div>');
     this.type = 'click';
 
     // 当前是否 active 状态
@@ -1573,7 +1573,7 @@ Redo.prototype = {
 // 构造函数
 function StrikeThrough(editor) {
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-strikethrough"><i/>\n        </div>');
+    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-strikethrough"></i>\n        </div>');
     this.type = 'click';
 
     // 当前是否 active 状态
@@ -1626,7 +1626,7 @@ StrikeThrough.prototype = {
 // 构造函数
 function Underline(editor) {
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-underline"><i/>\n        </div>');
+    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-underline"></i>\n        </div>');
     this.type = 'click';
 
     // 当前是否 active 状态
@@ -1679,7 +1679,7 @@ Underline.prototype = {
 // 构造函数
 function Undo(editor) {
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-undo"><i/>\n        </div>');
+    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-undo"></i>\n        </div>');
     this.type = 'click';
 
     // 当前是否 active 状态
@@ -1709,7 +1709,7 @@ function List(editor) {
     var _this = this;
 
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-list2"><i/></div>');
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-list2"></i></div>');
     this.type = 'droplist';
 
     // 当前是否 active 状态
@@ -1786,7 +1786,7 @@ function Justify(editor) {
     var _this = this;
 
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paragraph-left"><i/></div>');
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paragraph-left"></i></div>');
     this.type = 'droplist';
 
     // 当前是否 active 状态
@@ -1824,7 +1824,7 @@ function ForeColor(editor) {
     var _this = this;
 
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-pencil2"><i/></div>');
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-pencil2"></i></div>');
     this.type = 'droplist';
 
     // 获取配置的颜色
@@ -1868,7 +1868,7 @@ function BackColor(editor) {
     var _this = this;
 
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paint-brush"><i/></div>');
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paint-brush"></i></div>');
     this.type = 'droplist';
 
     // 获取配置的颜色
@@ -1910,7 +1910,7 @@ BackColor.prototype = {
 // 构造函数
 function Quote(editor) {
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-quotes-left"><i/>\n        </div>');
+    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-quotes-left"></i>\n        </div>');
     this.type = 'click';
 
     // 当前是否 active 状态
@@ -1978,7 +1978,7 @@ Quote.prototype = {
 // 构造函数
 function Code(editor) {
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-terminal"><i/>\n        </div>');
+    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-terminal"></i>\n        </div>');
     this.type = 'panel';
 
     // 当前是否 active 状态
@@ -2113,7 +2113,7 @@ Code.prototype = {
 // 构造函数
 function Emoticon(editor) {
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-happy"><i/>\n        </div>');
+    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-happy"></i>\n        </div>');
     this.type = 'panel';
 
     // 当前是否 active 状态
@@ -2220,7 +2220,7 @@ Emoticon.prototype = {
 // 构造函数
 function Table(editor) {
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-table2"><i/></div>');
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-table2"></i></div>');
     this.type = 'panel';
 
     // 当前是否 active 状态
@@ -2565,7 +2565,7 @@ Table.prototype = {
 // 构造函数
 function Video(editor) {
     this.editor = editor;
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-play"><i/></div>');
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-play"></i></div>');
     this.type = 'panel';
 
     // 当前是否 active 状态
@@ -2641,7 +2641,7 @@ Video.prototype = {
 function Image(editor) {
     this.editor = editor;
     var imgMenuId = getRandom('w-e-img');
-    this.$elem = $('<div class="w-e-menu" id="' + imgMenuId + '"><i class="w-e-icon-image"><i/></div>');
+    this.$elem = $('<div class="w-e-menu" id="' + imgMenuId + '"><i class="w-e-icon-image"></i></div>');
     editor.imgMenuId = imgMenuId;
     this.type = 'panel';
 
@@ -3071,10 +3071,10 @@ function getPasteHtml(e, filterStyle, ignoreImg) {
 
     if (filterStyle) {
         // 过滤样式
-        pasteHtml = pasteHtml.replace(/\s?(class|style)=('|").+?('|")/igm, '');
+        pasteHtml = pasteHtml.replace(/\s?(class|style)=('|").*?('|")/igm, '');
     } else {
         // 保留样式
-        pasteHtml = pasteHtml.replace(/\s?class=('|").+?('|")/igm, '');
+        pasteHtml = pasteHtml.replace(/\s?class=('|").*?('|")/igm, '');
     }
 
     return pasteHtml;
@@ -3120,6 +3120,7 @@ function getChildrenJSON($elem) {
         // 文本节点
         if (nodeType === 3) {
             elemResult = curElem.textContent;
+            elemResult = replaceHtmlSymbol(elemResult);
         }
 
         // 普通 DOM 节点
@@ -3445,8 +3446,8 @@ Text.prototype = {
         function canDo() {
             var now = Date.now();
             var flag = false;
-            if (now - pasteTime >= 500) {
-                // 间隔大于 500 ms ，可以执行
+            if (now - pasteTime >= 100) {
+                // 间隔大于 100 ms ，可以执行
                 flag = true;
             }
             pasteTime = now;
@@ -4128,7 +4129,7 @@ UploadImg.prototype = {
                 return;
             }
 
-            if (/\.(jpg|jpeg|png|bmp|gif)$/i.test(name) === false) {
+            if (/\.(jpg|jpeg|png|bmp|gif|webp)$/i.test(name) === false) {
                 // 后缀名不合法，不是图片
                 errInfo.push('\u3010' + name + '\u3011\u4E0D\u662F\u56FE\u7247');
                 return;
@@ -4174,7 +4175,8 @@ UploadImg.prototype = {
             uploadImgServer = uploadImgServerArr[0];
             var uploadImgServerHash = uploadImgServerArr[1] || '';
             objForEach(uploadImgParams, function (key, val) {
-                val = encodeURIComponent(val);
+                // 因使用者反应，自定义参数不能默认 encode ，由 v3.1.1 版本开始注释掉
+                // val = encodeURIComponent(val)
 
                 // 第一，将参数拼接到 url 中
                 if (uploadImgParamsWithUrl) {

diff --git a/release/wangEditor.min.js b/release/wangEditor.min.js
diff --git a/release/wangEditor.min.js.map b/release/wangEditor.min.js.map
diff --git a/src/js/editor/upload/upload-img.js b/src/js/editor/upload/upload-img.js
@@ -122,7 +122,7 @@ UploadImg.prototype = {
                 return
             }
 
-            if (/\.(jpg|jpeg|png|bmp|gif)$/i.test(name) === false) {
+            if (/\.(jpg|jpeg|png|bmp|gif|webp)$/i.test(name) === false) {
                 // 后缀名不合法，不是图片
                 errInfo.push(`【${name}】不是图片`)
                 return
@@ -168,7 +168,8 @@ UploadImg.prototype = {
             uploadImgServer = uploadImgServerArr[0]
             const uploadImgServerHash = uploadImgServerArr[1] || ''
             objForEach(uploadImgParams, (key, val) => {
-                val = encodeURIComponent(val)
+                // 因使用者反应，自定义参数不能默认 encode ，由 v3.1.1 版本开始注释掉
+                // val = encodeURIComponent(val)
 
                 // 第一，将参数拼接到 url 中
                 if (uploadImgParamsWithUrl) {

diff --git a/src/js/menus/backColor/index.js b/src/js/menus/backColor/index.js
@@ -7,7 +7,7 @@ import DropList from '../droplist.js'
 // 构造函数
 function BackColor(editor) {
     this.editor = editor
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paint-brush"><i/></div>')
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paint-brush"></i></div>')
     this.type = 'droplist'
 
     // 获取配置的颜色

diff --git a/src/js/menus/bold/index.js b/src/js/menus/bold/index.js
@@ -8,7 +8,7 @@ function Bold(editor) {
     this.editor = editor
     this.$elem = $(
         `<div class="w-e-menu">
-            <i class="w-e-icon-bold"><i/>
+            <i class="w-e-icon-bold"></i>
         </div>`
     )
     this.type = 'click'

diff --git a/src/js/menus/code/index.js b/src/js/menus/code/index.js
@@ -11,7 +11,7 @@ function Code(editor) {
     this.editor = editor
     this.$elem = $(
         `<div class="w-e-menu">
-            <i class="w-e-icon-terminal"><i/>
+            <i class="w-e-icon-terminal"></i>
         </div>`
     )
     this.type = 'panel'

diff --git a/src/js/menus/emoticon/index.js b/src/js/menus/emoticon/index.js
@@ -9,7 +9,7 @@ function Emoticon(editor) {
     this.editor = editor
     this.$elem = $(
         `<div class="w-e-menu">
-            <i class="w-e-icon-happy"><i/>
+            <i class="w-e-icon-happy"></i>
         </div>`
     )
     this.type = 'panel'

diff --git a/src/js/menus/fontName/index.js b/src/js/menus/fontName/index.js
@@ -8,7 +8,7 @@ import DropList from '../droplist.js'
 // 构造函数
 function FontName(editor) {
     this.editor = editor
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-font"><i/></div>')
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-font"></i></div>')
     this.type = 'droplist'
 
     // 当前是否 active 状态

diff --git a/src/js/menus/fontSize/index.js b/src/js/menus/fontSize/index.js
@@ -8,7 +8,7 @@ import DropList from '../droplist.js'
 // 构造函数
 function FontSize(editor) {
     this.editor = editor
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-text-heigh"><i/></div>')
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-text-heigh"></i></div>')
     this.type = 'droplist'
 
     // 当前是否 active 状态

diff --git a/src/js/menus/foreColor/index.js b/src/js/menus/foreColor/index.js
@@ -7,7 +7,7 @@ import DropList from '../droplist.js'
 // 构造函数
 function ForeColor(editor) {
     this.editor = editor
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-pencil2"><i/></div>')
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-pencil2"></i></div>')
     this.type = 'droplist'
 
     // 获取配置的颜色

diff --git a/src/js/menus/head/index.js b/src/js/menus/head/index.js
@@ -7,7 +7,7 @@ import DropList from '../droplist.js'
 // 构造函数
 function Head(editor) {
     this.editor = editor
-    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-header"><i/></div>')
+    this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-header"></i></div>')
     this.type = 'droplist'
 
     // 当前是否 active 状态