imageTarget

public/react/src/common/TextUtil.js

@@ -1,4 +1,8 @@
 import { bytesToSize } from 'educoder';
+export function isImageExtension(fileName) {
+    return fileName ? !!(fileName.match(/.(jpg|jpeg|png|gif)$/i)) : false
+}
+
 export function markdownToHTML(oldContent, selector) {
     window.$('#md_div').html('')
     // markdown to html

public/react/src/common/educoder.js

@@ -14,7 +14,7 @@ export { updatePageParams as updatePageParams } from                './RouterUti
 
 export { bytesToSize as bytesToSize } from                './UnitUtil';
 
-export { markdownToHTML, uploadNameSizeSeperator, appendFileSizeToUploadFile, appendFileSizeToUploadFileAll } from 	'./TextUtil'
+export { markdownToHTML, uploadNameSizeSeperator, appendFileSizeToUploadFile, appendFileSizeToUploadFileAll, isImageExtension } from 	'./TextUtil'
 export { handleDateString, getNextHalfHourOfMoment,formatDuring } from 	'./DateUtil'
 
 

public/react/src/modules/courses/Index.js

@@ -6,6 +6,8 @@ import Loading from '../../Loading';
 import axios from 'axios';
 import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
 import { CNotificationHOC } from './common/CNotificationHOC'
+import {ImageLayerOfCommentHOC} from '../page/layers/ImageLayerOfCommentHOC'
+
 import "./css/Courses.css"
 //引入对应跳转的组件
 
@@ -862,4 +864,4 @@ class CoursesIndex extends Component{
     }
 }
 
-export default CNotificationHOC() ( SnackbarHOC() ( TPMIndexHOC(CoursesIndex) ));
+export default ImageLayerOfCommentHOC({imgSelector: '.imageLayerParent img, .imageLayerParent .imageTarget', parentSelector: '.newMain'}) (CNotificationHOC() ( SnackbarHOC() ( TPMIndexHOC(CoursesIndex) )));

public/react/src/modules/courses/busyWork/CommonWorkAppraise.js

@@ -179,7 +179,7 @@ class CommonWorkAppraise extends Component{
         {/* <div className="padding40 memoContent new_li">
         </div>  */}
 
-        <div className={"appraise  "} style={{}}>
+        <div className={"appraise imageLayerParent "} style={{}}>
           <style>{`
             .workAppraise>div:last-child {
               border-bottom: none !important; 
@@ -199,8 +199,9 @@ class CommonWorkAppraise extends Component{
                   <a className="color-grey ml20">
                     <i className="font-14 color-green iconfont icon-fujian mr8" aria-hidden="true"></i>
                   </a>
+                  
                   <a href={item.url}
-                      className="mr12 color9B9B" length="58" title={`${item.title && item.title.length > 40 ? item.title : ''}`}>
+                      className="mr12 color9B9B imageTarget" length="58" title={`${item.title && item.title.length > 40 ? item.title : ''}`}>
                     {item.title}
                   </a>
                   <span className="color656565 mt2 color-grey-6 font-12 mr8">{item.filesize}</span>

public/react/src/modules/page/layers/ImageLayerOfCommentHOC.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import ImageLayer from './ImageLayer'
+import { isImageExtension } from 'educoder'
 const $ = window.$;
 export function ImageLayerOfCommentHOC(options = {}) {
 	return function wrap(WrappedComponent) {
@@ -16,18 +17,29 @@ export function ImageLayerOfCommentHOC(options = {}) {
       componentDidMount() {	
         // commentsDelegateParent #game_left_contents #tab_con_4
         setTimeout(() => {
-          $(".commentsDelegateParent")
+          $(options.parentSelector || ".commentsDelegateParent")
-            .delegate(".J_Comment_Reply .comment_content img, .J_Comment_Reply .childrenCommentsView img","click", (event) => {
+            .delegate(options.imgSelector || ".J_Comment_Reply .comment_content img, .J_Comment_Reply .childrenCommentsView img","click", (event) => {
             
-              const imageSrc = event.target.src
+              const imageSrc = event.target.src || event.target.getAttribute('src') || event.target.getAttribute('href')
-              // 非回复里的头像图片; 非emoticons
+              // 判断imageSrc是否是图片
-              if (imageSrc.indexOf('/images/avatars/User') === -1 && 
+              const fileName = event.target.innerHTML.trim()
-                  imageSrc.indexOf('kindeditor/plugins/emoticons') === -1 ) {  
+              if (isImageExtension(imageSrc.trim()) || isImageExtension(fileName)) {
-                this.setState({
+                // 非回复里的头像图片; 非emoticons
-                  showImage: true,
+                if (imageSrc.indexOf('/images/avatars/User') === -1 && 
-                  imageSrc,
+                    imageSrc.indexOf('kindeditor/plugins/emoticons') === -1 ) {  
-                })
+                  this.setState({
+                    showImage: true,
+                    imageSrc,
+                  })
+                }
+                event.stopPropagation()
+                event.preventDefault && event.preventDefault()
+                event.originalEvent.preventDefault()
+                // event.originalEvent.stopPropagation()
+                // event.originalEvent.cancelBubble = true
+                return false;
               }
+             
           });
         }, 3000)