joywok-material-components/components/jweditor/ContentShow.js

<h1 align="center"> Joywok Material Components </h1>

import React from 'react';

// 是否是移动端
if( 'ontouchend' in document.body ){
  require('./style/h5content.css');
}else{
  require('./style/webcontent.css');
}

class WebContent extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      value: this.props.value
    }
  }
  componentDidMount(){
    $('body').delegate('.jwh5audio1', 'click', function() {
      var status = $(this).parent().hasClass('jwaudio-playing');
      var audio = $(this).find('audio');
      var p = $(this).parent();
      audio.unbind().on('play', function() {
        p.addClass('jwaudio-playing');
      }).on('pause', function() {
        p.removeClass('jwaudio-playing');
      });
      if(status===false){
        audio.get(0).play();
      }else{
        audio.get(0).pause();
      }
    });
    $('body').delegate('.ed_video_preview_btn', 'click', function() {
      var p = $(this).closest('.ed_video_p_w'),
      video = p.find('video');
      // cover = p.find('.ed_video_preview');
      var status = p.hasClass('jwvideo-playing');
      video.unbind().on('play', function() {
        p.addClass('jwvideo-playing');
      }).on('pause', function(){
        p.removeClass('jwvideo-playing');
      });
      if(status===false){
        video.get(0).play();
      }else{
        video.get(0).pause();
      }
    });
  }
  render(){
    return <div className="jmc-ed-web-w" dangerouslySetInnerHTML={{__html: this.props.value}}></div>;
  }
}
export default WebContent;