支持通过配置隐藏网络图片

wangeditor-team · Jul 9, 2016 · b719778 · b719778
1 parent 65bcf08
commit b719778
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 5 deletions.
diff --git a/dist/js/wangEditor.js b/dist/js/wangEditor.js
@@ -3363,6 +3363,9 @@ _e(function (E, $) {
          /* 'Accept' : 'text/x-json' */
     };
 
+    // 隐藏网络图片，默认为 false
+    E.config.hideLinkImg = false;
+
     // 是否过滤粘贴内容
     E.config.pasteFilter = true;
 
@@ -5259,12 +5262,20 @@ _e(function (E, $) {
             $linkContent.addClass('selected');
         }
 
+        // 隐藏网络图片
+        function hideLinkImg() {
+            $tabContainer.remove();
+            $linkContent.remove();
+            $uploadContent.addClass('selected');
+        }
+
         // 判断用户是否配置了上传图片
         editor.ready(function () {
             var editor = this;
             var config = editor.config;
             var uploadImgUrl = config.uploadImgUrl;
             var customUpload = config.customUpload;
+            var linkImg = config.hideLinkImg;
             var $uploadImgPanel;
 
             if (uploadImgUrl || customUpload) {
@@ -5273,6 +5284,11 @@ _e(function (E, $) {
 
                 // 第二，绑定tab切换事件
                 tabToggle();
+
+                if (linkImg) {
+                    // 隐藏网络图片
+                    hideLinkImg();
+                }
             } else {
                 // 未配置上传图片功能
                 hideUploadImg();

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

diff --git a/test/index.html b/test/index.html
@@ -46,6 +46,9 @@
         }
         // editor.config.uploadImgFileName = 'myFileName';
 
+        // 隐藏网络图片
+        // editor.config.hideLinkImg = true;
+
         // 表情显示项
         editor.config.emotionsShow = 'value';
         editor.config.emotions = {
@@ -100,7 +103,7 @@
         //     'eraser',
         //     'fullscreen'
         // ];
-        // 只排除某几个菜单（兼容IE低版本，不支持IE5的浏览器），支持ES5的浏览器可直接用 [].map 方法
+        // 只排除某几个菜单（兼容IE低版本，不支持ES5的浏览器），支持ES5的浏览器可直接用 [].map 方法
         // editor.config.menus = $.map(wangEditor.config.menus, function(item, key) {
         //     if (item === 'insertcode') {
         //         return null;

diff --git a/test/test-uploadfn.html b/test/test-uploadfn.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>wangEditor2 test</title>
+    <link rel="stylesheet" type="text/css" href="../dist/css/wangEditor.min.css">
+    <style type="text/css">
+        #editor-trigger {
+            height: 400px;
+            /*max-height: 500px;*/
+        }
+        .container {
+            width: 100%;
+            margin: 0 auto;
+            position: relative;
+        }
+    </style>
+</head>
+<body style="padding:0 20px;">
+    <p>wangEditor2.0 支持 IE8 浏览器</p>
+    <div id="editor-container" class="container">
+        <div id="editor-trigger"><p>请输入内容</p><p>&lt;script&gt;&lt;/script&gt;</p></div>
+    </div>
+    <p><br></p>
+
+    <script type="text/javascript" src="../dist/js/lib/jquery-1.10.2.min.js"></script>
+    <script type="text/javascript" src="../dist/js/wangEditor.js"></script>
+    <script type="text/javascript">
+
+        var editor = new wangEditor('editor-trigger');
+
+        // 上传图片
+        editor.config.uploadImgUrl = '/upload';
+
+        // 自定义上传事件
+        editor.config.uploadImgFns.onload = function (resultText, xhr) {
+            // resultText 服务器端返回的text
+            // xhr 是 xmlHttpRequest 对象，IE8、9中不支持
+
+            // 上传图片时，已经将图片的名字存在 editor.uploadImgOriginalName
+            var originalName = editor.uploadImgOriginalName || '';  
+            alert(resultText);
+            // 如果 resultText 是图片的url地址，可以这样插入图片：
+            editor.command(null, 'insertHtml', '<img src="' + resultText + '" alt="' + originalName + '" style="max-width:100%;"/>');
+            // 如果不想要 img 的 max-width 样式，也可以这样插入：
+            // editor.command(null, 'InsertImage', resultText);
+        };
+
+        editor.create();
+    </script>
+</body>
+</html>