v3.0.12

milidoudou · Oct 28, 2017 · 63ef336 · 63ef336
1 parent 585df9f
commit 63ef336
Show file tree

Hide file tree

Showing 16 changed files with 210 additions and 52 deletions.
diff --git a/ISSUE.md b/ISSUE.md
@@ -90,13 +90,21 @@
 - [done] 修复`editor.customConfig.customUploadImg`不触发的 bug
 - [done] 修复有序列表和无序列表切换时 onchange 不触发的 bug
 
+### v3.0.12
+
+- [done] 增加 onfocus 和 onblur （感谢 (hold-baby)[https://github.com/hold-baby] 的 (PR)[https://github.com/wangfupeng1988/wangEditor/pull/1076]）
+- [done] 上传的自定义参数`editor.customConfig.uploadImgParams`是否拼接到 url 中，支持可配置
+- [done] onchange 触发的延迟时间，支持可配置
+
 ### 近期计划解决
 
+- 撤销的兼容性问题（会误伤其他编辑器或者 input textarea 等），考虑用 onchange 记录 undo 和 redo 的内容（但是得考虑直接修改 dom 的情况，如 quote 菜单）
+- 支持获取 JSON https://github.com/wangfupeng1988/wangEditor/issues/967#issuecomment-339312117
+- emoji 的浏览器兼容性问题，在 IE 360 中，许多表情都不兼容
 - 页面中有 input 等输入标签时，undo redo 会误伤 https://github.com/wangfupeng1988/wangEditor/issues/1024
 - 选中一行，点击“引用”按钮，该行成为引用格式。然后再点击“引用”按钮，引用没法取消
 - 两个编辑器 undo 的问题 https://github.com/wangfupeng1988/wangEditor/issues/1010
 - 先输入文字，再粘贴 excel 表格，样式丢失 https://github.com/wangfupeng1988/wangEditor/issues/1000#issuecomment-329951881
-- emoji 的浏览器兼容性问题，在 IE 360 中，许多表情都不兼容
 - 选中图片和表格时，主动弹出编辑 panel（模拟菜单的click），而不是等着用户点击（这里注意如何让用户选择不再弹出，不重复弹出）
 - IE 11 直接输入文字会空一行在第二行出现内容 https://github.com/wangfupeng1988/wangEditor/issues/919
 - windows 下 word excel 的粘贴，存在垃圾数据

diff --git a/docs/usage/01-getstart/04-multi.md b/docs/usage/01-getstart/04-multi.md
@@ -1,4 +1,4 @@
-# 通一个页面创建多个编辑器
+# 同一个页面创建多个编辑器
 
 wangEditor 支持一个页面创建多个编辑器
 

diff --git a/docs/usage/03-config/03-onchange.md b/docs/usage/03-config/03-onchange.md
@@ -30,3 +30,11 @@
 </script>
 ```
 
+-----
+
+另外，如果需要修改 onchange 触发的延迟时间（onchange 会在用户无任何操作的 xxx 毫秒之后被触发），可通过如下配置
+
+```js
+// 自定义 onchange 触发的延迟时间，默认为 200 ms
+editor.customConfig.onchangeTimeout = 1000 // 单位 ms
+```
diff --git a/docs/usage/03-config/09-focus.md → docs/usage/03-config/09-onfocus.md b/docs/usage/03-config/09-focus.md → docs/usage/03-config/09-onfocus.md
@@ -1,6 +1,6 @@
-# 配置 focus 函数
+# 配置 onfocus 函数
 
-配置`focus`函数之后，用户点击富文本区域会触发`focus`函数执行。
+配置`onfocus`函数之后，用户点击富文本区域会触发`onfocus`函数执行。
 
 ```html
 <div id="div1">
@@ -11,11 +11,9 @@
 <script type="text/javascript">
     var E = window.wangEditor
     var editor = new E('#div1')
-    editor.customConfig.focus = function () {
-        console.log("focus")
+    editor.customConfig.onfocus = function () {
+        console.log("onfocus")
     }
     editor.create()
-
 </script>
 ```
-
diff --git a/docs/usage/03-config/10-blur.md → docs/usage/03-config/10-onblur.md b/docs/usage/03-config/10-blur.md → docs/usage/03-config/10-onblur.md
@@ -1,25 +1,20 @@
-# 配置 blur 函数
+# 配置 onblur 函数
 
-配置`blur`函数之后，如果当前有手动获取焦点的富文本并且鼠标点击富文本以外的区域，则会触发`blur`函数执行。
+配置`onblur`函数之后，如果当前有手动获取焦点的富文本并且鼠标点击富文本以外的区域，则会触发`onblur`函数执行。
 
 ```html
 <div id="div1">
     <p>欢迎使用 wangEditor 富文本编辑器</p>
 </div>
 
-<p>手动触发 onchange 函数执行</p>
-<button id="btn1">change</button>
-
 <script type="text/javascript" src="/wangEditor.min.js"></script>
 <script type="text/javascript">
     var E = window.wangEditor
     var editor = new E('#div1')
-    editor.customConfig.blur = function (html) {
+    editor.customConfig.onblur = function (html) {
         // html 即编辑器中的内容
-        console.log(html)
+        console.log('onblur', html)
     }
     editor.create()
-
 </script>
 ```
-
diff --git a/docs/usage/04-uploadimg/03-upload-config.md b/docs/usage/04-uploadimg/03-upload-config.md
@@ -65,14 +65,20 @@ editor.customConfig.uploadImgMaxLength = 5
 
 ## 自定义上传参数
 
-上传图片时可自定义传递一些参数，例如传递验证的`token`等。这些参数会拼接到 url 的参数中，也会被添加到`formdata`中。
+上传图片时可自定义传递一些参数，例如传递验证的`token`等。参数会被添加到`formdata`中。
 
 ```javascript
 editor.customConfig.uploadImgParams = {
     token: 'abcdef12345'  // 属性值会自动进行 encode ，此处无需 encode
 }
 ```
 
+如果**还需要**将参数拼接到 url 中，可再加上如下配置
+
+```
+editor.customConfig.uploadImgParamsWithUrl = true
+```
+
 ## 自定义 fileName
 
 上传图片时，可自定义`filename`，即在使用`formdata.append(name, file)`添加图片文件时，自定义第一个参数。

diff --git a/example/demo/test-onblur.html b/example/demo/test-onblur.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>wangEditor test onblur</title>
+</head>
+<body>
+    <div id="div1">
+        <p>欢迎使用 wangEditor 富文本编辑器</p>
+    </div>
+
+    <script type="text/javascript" src="/wangEditor.min.js"></script>
+    <script type="text/javascript">
+        var E = window.wangEditor
+        var editor = new E('#div1')
+        editor.customConfig.onblur = function (html) {
+            // html 即编辑器中的内容
+            console.log('onblur', html)
+        }
+        editor.create()
+    </script>
+</body>
+</html>
diff --git a/example/demo/test-onchange.html b/example/demo/test-onchange.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>wangEditor test onchange</title>
+</head>
+<body>
+    <div id="div1">
+        <p>欢迎使用 wangEditor 富文本编辑器</p>
+    </div>
+
+    <script type="text/javascript" src="/wangEditor.min.js"></script>
+    <script type="text/javascript">
+        var E = window.wangEditor
+        var editor = new E('#div1')
+        editor.customConfig.onchange = function (html) {
+            // html 即编辑器中的内容
+            console.log('onchange', html)
+        }
+        editor.customConfig.onchangeTimeout = 1000  // 自定义 onchange 触发的延迟时间
+        editor.create()
+    </script>
+</body>
+</html>
diff --git a/example/demo/test-onfocus.html b/example/demo/test-onfocus.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>wangEditor test onfocus</title>
+</head>
+<body>
+    <div id="div1">
+        <p>欢迎使用 wangEditor 富文本编辑器</p>
+    </div>
+
+    <script type="text/javascript" src="/wangEditor.min.js"></script>
+    <script type="text/javascript">
+        var E = window.wangEditor
+        var editor = new E('#div1')
+        editor.customConfig.onfocus = function () {
+            console.log("onfocus")
+        }
+        editor.create()
+    </script>
+</body>
+</html>
diff --git a/example/demo/test-uploadimg.html b/example/demo/test-uploadimg.html
@@ -26,12 +26,21 @@
 
         var editor2 = new E('#div3')
         editor2.customConfig.uploadImgServer = '/upload-img'
-        // editor2.customConfig.uploadImgHooks = {
-        //     customInsert: function (insertImg, result, editor) {
-        //         console.log(JSON.stringify(result))
-        //         insertImg(result.data[0])
-        //     }
+        editor2.customConfig.uploadImgHooks = {
+            // customInsert: function (insertImg, result, editor) {
+            //     console.log(JSON.stringify(result))
+            //     insertImg(result.data[0])
+            // },
+
+            // customInsert: function (insertImg, result, editor) {
+            //     console.log(result)
+            // }
+        }
+        // editor2.customConfig.uploadImgParams = {
+        //     a: 123,
+        //     b: 'vvv'
         // }
+        // editor2.customConfig.uploadImgParamsWithUrl = true
         editor2.create()
 
         var editor1 = new E('#div4')

diff --git a/example/index.html b/example/index.html
@@ -31,6 +31,9 @@
                 <li><a href="demo/test-uploadimg.html" target="_blank">上传图片</a></li>
                 <li><a href="demo/test-amd.html" target="_blank">使用 AMD 加载</a></li>
                 <li><a href="demo/test-textarea.html" target="_blank">使用 textarea</a></li>
+                <li><a href="demo/test-onblur.html" target="_blank">onblur</a></li>
+                <li><a href="demo/test-onfocus.html" target="_blank">onfocus</a></li>
+                <li><a href="demo/test-onchange.html" target="_blank">onchange</a></li>
             </ul>
         </div>
 

diff --git a/release/wangEditor.js b/release/wangEditor.js
@@ -3738,6 +3738,7 @@ UploadImg.prototype = {
         var maxLength = config.uploadImgMaxLength || 10000;
         var uploadFileName = config.uploadFileName || '';
         var uploadImgParams = config.uploadImgParams || {};
+        var uploadImgParamsWithUrl = config.uploadImgParamsWithUrl;
         var uploadImgHeaders = config.uploadImgHeaders || {};
         var hooks = config.uploadImgHooks || {};
         var timeout = config.uploadImgTimeout || 3000;
@@ -3815,12 +3816,14 @@ UploadImg.prototype = {
                 val = encodeURIComponent(val);
 
                 // 第一，将参数拼接到 url 中
-                if (uploadImgServer.indexOf('?') > 0) {
-                    uploadImgServer += '&';
-                } else {
-                    uploadImgServer += '?';
+                if (uploadImgParamsWithUrl) {
+                    if (uploadImgServer.indexOf('?') > 0) {
+                        uploadImgServer += '&';
+                    } else {
+                        uploadImgServer += '?';
+                    }
+                    uploadImgServer = uploadImgServer + key + '=' + val;
                 }
-                uploadImgServer = uploadImgServer + key + '=' + val;
 
                 // 第二，将参数添加到 formdata 中
                 formdata.append(key, val);
@@ -4082,6 +4085,29 @@ Editor.prototype = {
         $toolbarElem.on('click', function () {
             this.change && this.change();
         });
+
+        //绑定 onfocus 与 onblur 事件
+        if (config$$1.onfocus || config$$1.onblur) {
+            // 当前编辑器是否是焦点状态
+            this.isFocus = false;
+
+            $(document).on('click', function (e) {
+                //判断当前点击元素是否在编辑器内
+                var isChild = $toolbarSelector.isContain($(e.target));
+
+                if (!isChild) {
+                    if (_this.isFocus) {
+                        _this.onblur && _this.onblur();
+                    }
+                    _this.isFocus = false;
+                } else {
+                    if (!_this.isFocus) {
+                        _this.onfocus && _this.onfocus();
+                    }
+                    _this.isFocus = true;
+                }
+            });
+        }
     },
 
     // 封装 command
@@ -4146,6 +4172,14 @@ Editor.prototype = {
         var onChangeTimeoutId = 0;
         var beforeChangeHtml = this.txt.html();
         var config$$1 = this.config;
+
+        // onchange 触发延迟时间
+        var onchangeTimeout = config$$1.onchangeTimeout;
+        onchangeTimeout = parseInt(onchangeTimeout, 10);
+        if (!onchangeTimeout || onchangeTimeout <= 0) {
+            onchangeTimeout = 200;
+        }
+
         var onchange = config$$1.onchange;
         if (onchange && typeof onchange === 'function') {
             // 触发 change 的有三个场景：
@@ -4176,7 +4210,24 @@ Editor.prototype = {
                     // 触发配置的 onchange 函数
                     onchange(currentHtml);
                     beforeChangeHtml = currentHtml;
-                }, 200);
+                }, onchangeTimeout);
+            };
+        }
+
+        // -------- 绑定 onblur 事件 --------
+        var onblur = config$$1.onblur;
+        if (onblur && typeof onblur === 'function') {
+            this.onblur = function () {
+                var currentHtml = this.txt.html();
+                onblur(currentHtml);
+            };
+        }
+
+        // -------- 绑定 onfocus 事件 --------
+        var onfocus = config$$1.onfocus;
+        if (onfocus && typeof onfocus === 'function') {
+            this.onfocus = function () {
+                onfocus();
             };
         }
     },

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