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

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

/**
 * 
 * 请调用同目录中的 explugin.js
 * 
 */

import React from 'react';
require('./style/index.css');
import Jwfuploader from './fuploader';
import request from '../utils/request';
import UploadAudio from './uploadaudio';
import UploadVideo from './uploadvideo';
import EditorExtPlugin from './extplugin';
import EditorContentShow from './ContentShow';
import { EventEmitter } from 'events';

import Dialog from '../utils/Dialog';


window.EditorEvts = new EventEmitter();
let fetchingJs = false;

const jwFormatFSize = (fileSize)=> {
  if (fileSize < 1024) {
      return fileSize + 'B';
  } else if (fileSize < (1024*1024)) {
      var temp = fileSize / 1024;
      temp = temp.toFixed(2);
      return temp + 'KB';
  } else if (fileSize < (1024*1024*1024)) {
      var temp = fileSize / (1024*1024);
      temp = temp.toFixed(2);
      return temp + 'MB';
  } else {
      var temp = fileSize / (1024*1024*1024);
      temp = temp.toFixed(2);
      return temp + 'GB';
  }
}
const formatAudioTime = (time)=>{
  var ret = time%60;
  var minute = time%3600;
  var hours = time%86400;
  if(time>3600) minute = time%3600;
  if(time>86400) hours = time%86400;
  ret = Math.floor(minute/60)+':'+ret;
  if(time>3600) ret = Math.floor(hours/3600)+':'+ret;
  ret = (ret+'').replace(/\b(\w)\b/g,'0$1');
  if(time>86400) ret = Math.floor(time/86400)+'D '+ret;
  return ret;
}

class JoywokEditor extends React.Component{
  onChange = (e)=>{
    this.checkChange();
    let v = e.editor.getData();
    typeof this.props.onChange === 'function' && this.props.onChange(e, v);
  }
  saveDom(){
    this.checkChange();
    let v = this.editor.getData();
    typeof this.props.onChange === 'function' && this.props.onChange({editor: this.editor}, v);
  }
  checkChange(){
    this.editor.window.$.$ && this.editor.window.$.$('.jwh5audio').each(function(){
      $(this).removeClass('jwaudio-playing');
      $(this).find('audio').get(0).pause();
    });
  }
  componentWillReceiveProps(d){
    d.defaultValue = d.defaultValue || '';
    let editor = this.editor;
    // if(editor!==undefined){
      this.setState({value: d.defaultValue});
    // }
    if( this.state.value !== d.defaultValue ){
      editor && editor.setData( d.defaultValue );
    }
    if( this.props.curLang !== d.curLang ){
      editor && editor.setData( d.defaultValue );
    }
    if( d.toolbarPosition===undefined ) d.toolbarPosition = false;
    if( d.toolbarPosition !== this.state.toolbarPosition ){
      this.setState({toolbarPosition: d.toolbarPosition}, ()=>{
        if( this.state.toolbarPosition!==false ){
          this.initToolbar();
        }
      });
    }
  }
  getParFile(clsname, furl, type){
    let url = furl;
    if(furl.indexOf('http')===0){
      request('/api/file/thirdimagelocal?appid=&app_type=jw_app_subscribe&url='+encodeURIComponent(furl), {method: 'POST'}).then(resp=>{
        if(resp.data && resp.data.JMVerinfo && resp.data.JMVerinfo.append){
          if( resp.data.JMVerinfo.append.original===undefined ){
            url = resp.data.JMVerinfo.append.thumbnails.open_url;
          }else{
            url = resp.data.JMVerinfo.append.original.open_url;
          }
        }
        if(type===1){
          this.editor.window.$.$(clsname).attr('src', url).removeAttr('data-cke-saved-src').removeAttr('data-cke-widget-data');
        }else if(type===2){
          this.editor.window.$.$(clsname).css('background-image', 'url('+url+')');
        }
        this.saveDom();
      });
    }
  }
  componentDidMount(){
    var that = this;
    if(this.props.onRef) this.props.onRef( this );
    CKEDITOR.replace(this.state.className, this.state.editorConfig);
    CKEDITOR.instances[this.state.className].on('contentDom', function(e){ 
      console.log('contentDom', e);
      that.checkJS();
    });
    CKEDITOR.instances[this.state.className].on('configLoaded', function(e){ 
      console.log('configLoaded') 
    });
    CKEDITOR.instances[this.state.className].on('loaded', function(e){ 
      that.editor = e.editor;
      // console.log('loaded');
    });
    CKEDITOR.instances[this.state.className].on('change', ( e2 )=>{
      // console.log('change');
      that.onChange( e2 );
    });
    CKEDITOR.instances[this.state.className].on('addimg', ( ed )=>{
      $('#up' + this.state.className).click();
    });
    CKEDITOR.instances[this.state.className].on('addaudio', ( ed )=>{
      this.insertAudio( CKEDITOR.instances[this.state.className] );
    });
    CKEDITOR.instances[this.state.className].on('addvideo', ( ed )=>{
      this.insertVideo( ed.editor );
    });
    CKEDITOR.instances[this.state.className].on('afterPaste', function(ee){
      // that.checkJS(()=>{
        var win = ee.editor.window.$;
        var vimgs = win.$('img');
        vimgs.each(function() {
          var vsrc = $(this).attr('src');
          if( vsrc.indexOf('/openfile/')!=-1 ||
            vsrc.indexOf('/api2/')!=-1 ||
            vsrc.indexOf('/public/')!=-1 ||
            vsrc.indexOf('/dist/')!=-1 ||
            vsrc.indexOf('/file/')!=-1 ) {
            return;
          }else{
            let clsname = 'f_' + that.guid();
            $(this).attr('id', clsname);
            that.getParFile('#'+clsname, vsrc, 1);
          }
        });

        var vsection = win.$('section');
        vsection.each(function() {
          var st = $(this).attr('style');
          if( st!=undefined ){
            var backg = $(this).css('background');
            if(typeof backg=='string'){
              if(backg.indexOf('url(')!=-1){
                backg = /url\((.*?)\)/ig.exec(backg);
                backg = backg[1];
                backg = backg.replace(/\"/ig, '');
                if( backg.indexOf('/openfile/')!=-1 ||
                  backg.indexOf('/api2/')!=-1 ||
                  backg.indexOf('/public/')!=-1 ||
                  backg.indexOf('/dist/')!=-1 ||
                  backg.indexOf('/file/')!=-1 ) {
                  return;
                }else{
                  let clsname = 'f_' + that.guid();
                  $(this).attr('id', clsname);
                  that.getParFile('#'+clsname, backg, 2);
                }
              }
            }
          }
        });
        let tables = win.$('table');
        tables.each(function(){
          var width = this.style.width;
          if(!_.isEmpty(width)){
            this.style.width = '100%';
          }
        });
        that.saveDom();
      // })
    });
    CKEDITOR.instances[this.state.className].on('instanceReady', (e)=>{
      console.log('ready')
      this.editor = e.editor;
      if( this.state.value==='' ){
        this.editor.setData( '&#8203;' );
      }else{
        this.editor.setData( this.state.value );
      }
      if( this.state.toolbarPosition!==false ){
        this.initToolbar();
      }
      window.EditorEvts.addListener('changeContent', (...args)=>{
        this.onChange( e );
      });
      let timer = false;
      if(this.props.simple===true){
        if(window.PubSub){
          window.PubSub.unsubscribe('editorChangeValue');
          window.PubSub.subscribe('editorChangeValue', ( v, d )=>{
            e.editor.setData(d);
          });
        }
      }
    });
  }
  checkEditor(){
    let focusM = new CKEDITOR.focusManager( this.editor );
    let acNode = focusM.currentActive;
    if(acNode){
      if( acNode.$.nodeName==='BODY' ){
        let childs = acNode.getChildren();
        if( childs.count()>0 ){
          let texti = '&#8203;';
          if( childs.getItem( childs.count()-1 ).$.nodeType !== 3 ){
            $( childs.getItem( childs.count()-1 ).$ ).after( texti );
            setTimeout(() => {
              var range = new CKEDITOR.dom.range( this.editor.document );
              range.moveToElementEditEnd( childs.getItem( childs.count()-1 ) );
              range.collapse( true );
            }, 100);
          }
        }
      }
    }
  }
  checkJS(cb){
    var that = this;
    if( this.editor ){
      let v = this.editor.getData();
      if(v==='undefined'){
        this.editor.setData('');
      }
    }
    // if( fetchingJs===true ){
    //   // if(typeof cb==='function') cb();
    //   return;
    // }
    if(this.editor.document.$.getElementById('jwckpluginjs')!==null){
      if(typeof cb==='function') cb();
      return;
    }
    // fetchingJs = true;
    var extjs = this.editor.document.$.createElement('script');
    extjs.type='text/javascript';
    extjs.id='jwckpluginjs';
    extjs.src='/dist/scripts/ck4c/jwplugins.js?v=' + ( window.version||this.guid() );
    if( this.editor.document.$.getElementById('jwckpluginjs') ) this.editor.document.$.getElementById('jwckpluginjs').remove();
    this.editor.document.$.head.appendChild( extjs );

    let style = this.editor.document.$.createElement('link');
    style.type='text/css';
    style.rel='stylesheet';
    style.id='jwckplugincss';
    style.href='/dist/scripts/ck4c/jwplugins.css?v=' + ( window.version||this.guid() );
    style.addEventListener('load', function(){
      fetchingJs = false;
      if(typeof cb==='function') cb();
    }, false);
    if( this.editor.document.$.getElementById('jwckplugincss') ) this.editor.document.$.getElementById('jwckplugincss').remove();
    this.editor.document.$.head.appendChild( style );

    $( this.editor.window.$ ).unbind('keydown');
    $( this.editor.window.$ ).keydown(function(e){
      if( e.keyCode === 8 ){
        that.checkEditor();
      }
    });
    $( this.editor.window.$ ).unbind('mouseover');
    $( this.editor.window.$ ).mouseover(function(){
      that.checkEditor();
    });
  }
  // checkJS(cb){
  //   if(this.editor.document.$.getElementById('jwckpluginjs')===null){
  //     if(this.state.fetchTimer) clearTimeout(this.state.fetchTimer);
  //     this.state.fetchTimer = setTimeout(()=>{
  //       var extjs = this.editor.document.$.createElement('script');
  //       extjs.type='text/javascript';
  //       extjs.id='jwckpluginjs';
  //       extjs.src='/public/scripts/ck4c/jwplugins.js?v='+window.version;
  //       extjs.addEventListener('load', function(){
  //         if(typeof cb==='function') cb();
  //       }, false);
  //       this.editor.document.$.head.appendChild( extjs );

  //       let style = this.editor.document.$.createElement('link');
  //       style.type='text/css';
  //       style.rel='stylesheet';
  //       style.href='/public/scripts/ck4c/jwplugins.css?v='+window.version;
  //       this.editor.document.$.head.appendChild( style );
  //     }, 200)
  //   }else{
  //     if(typeof cb==='function') cb();
  //   }
  // }
  render(){

    let value = this.state.value;
    // let value = this.props.defaultValue;
    return <div className={'joywok-editor ' + this.state.toolbarStyle}>
      <textarea id={this.state.className}>{value}</textarea>
      <Jwfuploader appType={this.props.appType} appId={this.props.appId} id={'up' + this.state.className} className="insertImageInput" multiple={true} beforeUpload={this.beforeUploadImage} onChange={this.uploadImage} action="/api/file/upload" accept={this.state.imageFormat} />
    </div>
  }
  insertItem(str){
    var el = CKEDITOR.dom.element.createFromHtml( str );
    this.editor.insertElement( el );
  }
  insertLoading(file){
    var el = CKEDITOR.dom.element.createFromHtml('<img src="/dist/images/loading.gif" id="fid_'+file.uid+'" />');
    this.editor.insertElement( el );
  }
  checkFile( file, callback ){
    return new Promise((res, rej)=>{
      new jwFSha1({
        file: file,
        cb: function (tsha1) {
          let url = "/api/file/fileifexist?tsha1="+tsha1+"&jwfile="+encodeURIComponent(encodeURIComponent(file.name))+"&size="+file.size+"&app_type=jw_n_subscribe"
          request(url, {method: 'GET'}).then(d=>{
            if(d.data && d.data.JMAttachment && d.data.JMAttachment.id){
              callback( d.data.JMAttachment );
              rej({error: 'has file'});
            }else{
              if( d.data && d.data.errcode && d.data.errcode==='no-network' ){
                rej({error: d.data.errmemo});
              }else{
                res(1);
              }
            }
          })
        }
      })
    });
  }
  getImageUrl(file){
    if( file.JMAttachment ) file = file.JMAttachment;
    let url = '';
    if( (file.ext_name+'').toLowerCase() ==='gif' ){
      url = 'original';
    }else{
      url = 'preview';
    }
    url = '/openfile/getfile?id='+file.id+'&type=jw_n_image&size=' + url;
    return url;
  }
  beforeUploadImage=(file)=>{
    this.insertLoading(file);
    return this.checkFile( file, (response)=>{
      let item = this.editor.document.$.getElementById( 'fid_' + file.uid );
      let itemP = item.parentNode;
      itemP.replaceChild($('<img src="'+this.getImageUrl(response)+'" />').get(0), item);

      let div = $('<div><br /></div>').get(0);
      itemP.appendChild( div );
      this.saveDom();
    });
  }
  uploadImage = (e)=>{
    if(e.file.status==='done'){
      let item = this.editor.document.$.getElementById( 'fid_' + e.file.uid );
      let itemP = item.parentNode;
      itemP.replaceChild($('<img src="'+this.getImageUrl(e.file.response)+'" />').get(0), item);
      
      let div = $('<div><br /></div>').get(0);
      itemP.appendChild( div );
      this.saveDom();
    }
  }
  fixTokenUrl(url){
    url = url.replace(/\/api2\//ig, '/');
    if(url.indexOf('/api')===0){
      if( url.indexOf( 'access_token' )===-1 ){
        url = url + '&access_token=' + window.token;
      }
    }
    return url;
  }
  breakParent( id ){
    let element = new CKEDITOR.dom.element( this.editor.window.$.$( '#' + id).get(0) );
    let p = this.editor.window.$.$( '#' + id).parent().get(0);
    if( p.tagName && (p.tagName+'').toLowerCase()==='span' ){
      let parent_element = new CKEDITOR.dom.element( p );
      element.breakParent( parent_element );
    }
  }
  insertAudioToContentCommon = (file)=>{
    let item = this.editor.document.$.getElementById( 'fid_' + file.uid );
    this.breakParent( 'fid_' + file.uid );
    let itemP = item.parentNode;
    let url = this.fixTokenUrl( file.response.mp3 );
    const str = '<div><section class="jwh5audio-w"><section class="jwh5audio" contenteditable="false" style="width: 0;height: 0;background-color: #f7f7f7;padding-right: 100%;padding-bottom: 15.2%;position: relative;">\
    <section class="jwh5audio1" style="width: 22.2%; height: 100%; background-color: #31C27C; position: absolute; left: 0; top: 0; background-position: center; background-size: cover; background-image: url('+file.response.cover+');">\
      <section style="position: absolute; left: 35.5%; top: 30%; width: 27%; height: 39%; background-color: rgba(0, 0, 0, .3); border: 1px solid #fff; border-radius: 100%;">\
        <section style="position: absolute; left: 39%; top: 35%; width: 0; height: 0; border-width: .4rem 0 .4rem .6rem; border-style: solid; border-color: transparent transparent transparent #fff;"></section>\
        <audio src="'+url+'" style="position: absolute; left:0; right:0; top: 0; bottom:0;"></audio>\
      </section>\
    </section>\
    <section class="jwh5audio2" style="position: absolute; color: #333; left: 26%; top: 19%; right: 13%; font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+file.name+'</section>\
    <section class="jwh5audio3" style="position: absolute; left: 26%; color: #999; top: 55%; right: 13%; font-size: 1rem; white-space: nowrap;">'+formatAudioTime(file.response.audio_time)+' | '+jwFormatFSize(file.size)+'</section>\
    <section class="jwh5audio4" style="position: absolute; top: 40%; right: 3%; width: 2.8%; height: 18%; background-size:16px 14px; background-position: 0 center; background-repeat: repeat-x; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAcCAYAAAAAwr0iAAAAjElEQVRIiWNkoDEwmfXf8/+/f7NAtjAyMaWdSWPcjmwjC60dALL8////MmAOxCGyyPJMGDqo7QCY5WhsujmAEBh1AAuhVEpzBxBKpbQGTIRSKc0dgCEy6oBRB9AZUFwZUVqOUOwASssRgg4g5ENKyxGCDqB1SUkwEdK6pBwtB0YdMOqAUQcMrAMYGBgAlnBeknCJI/QAAAAASUVORK5CYII=);"></section>\
  </section>\
  <section class="jwh5audio5" style="display:none;"><svg class="jwpubsub_event_del" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-2434.000000, -531.000000)"><g transform="translate(2434.000000, 531.000000)"><polygon id="Bounds" points="-3.66072173e-11 0 24 0 24 24 -3.66072173e-11 24"></polygon><path d="M8,21 L16,21 C17.1,21 18,20.1 18,19 L18,7 L6,7 L6,19 C6,20.1 6.9,21 8,21 Z M15.5,4 L14.5,3 L9.5,3 L8.5,4 L5,4 L5,6 L19,6 L19,4 L15.5,4 Z" id="Shape" fill="#777777"></path></g></g></g></svg></section>\
  </section></div>';
    itemP.replaceChild($(str).get(0), item);
    this.setState({showAudioDialog: false});
  }
  insertAudioToContent = (file)=>{
    this.insertLoading(file);
    this.insertAudioToContentCommon( file );
    this.saveDom();
  }
  insertAudio(){
    let that = this;
    let a = Dialog({
      app: window.dvaApp,
      data: {
        open: true, 
        actions: [],
        onClose:()=>{
          a.close();
        }
      },
      component: ()=>{
        return <UploadAudio onOk={(file)=>{
          this.insertAudioToContent(file);
          a.close();
        }} appType={that.props.appType} appId={that.props.appId} cancel={()=>a.close()} format={this.props.config.audioFormat} />
      }
    });
  }
  insertVideoToContent = (d)=>{
    const rid = this.guid();
    this.insertLoading({uid: rid});
    const str = this.getVideoStr( d );
    let item = this.editor.document.$.getElementById( 'fid_' + rid );
    let itemP = item.parentNode;
    itemP.replaceChild($(str).get(0), item);
    this.setState({showVideoDialog: false});
  }
  insertVideo = (d)=>{
    // this.setState({showVideoDialog: true});
    var that = this;
    let a = Dialog({
      app: window.dvaApp,
      data: {
        open: true, 
        actions: [],
        onClose:()=>{
          a.close();
        }
      },
      component: ()=>{
        return <UploadVideo submit={(d)=>{
          const rid = this.guid();
          this.insertLoading({uid: rid});
          const str = this.getVideoStr( d );
          let item = this.editor.document.$.getElementById( 'fid_' + rid );
          let itemP = item.parentNode;
          itemP.replaceChild($(str).get(0), item);
          this.saveDom();
          a.close();
        }} appType={that.props.appType} appId={that.props.appId} cancel={()=>{a.close()}} />;
      }
    });
  }
  getVideoStr(v){
    // d:{ coverUrl:'', videoUrl:''}
    // urlData: {cover: '', title: '', url: ''}
    // // <iframe frameborder="0" width="300" height="150" allow="autoplay; fullscreen" allowfullscreen="true" src={"//v.qq.com/txp/iframe/player.html?origin="+encodeURIComponent(location.origin)+"&vid="+this.getVid(self.state.urlData.url)+"&autoplay=false&show1080p=false&isDebugIframe=false"}>
    let str = '';
    let removeBtn = '<section style="display:none;" class="em-video-remove-btn"><svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-2434.000000, -531.000000)"><g transform="translate(2434.000000, 531.000000)"><polygon id="Bounds" points="-3.66072173e-11 0 24 0 24 24 -3.66072173e-11 24"></polygon><path d="M8,21 L16,21 C17.1,21 18,20.1 18,19 L18,7 L6,7 L6,19 C6,20.1 6.9,21 8,21 Z M15.5,4 L14.5,3 L9.5,3 L8.5,4 L5,4 L5,6 L19,6 L19,4 L15.5,4 Z" id="Shape" fill="#777777"></path></g></g></g></svg></section>';
    if(v.urlData){
      const qq_reg = /https?:\/\/v.qq.com(.*\/)?(.{11})\.html/;
      let matches = qq_reg.exec(v.urlData.url);
      str = '';
      if (matches === null){
        str = '<section>'+ i18n('label.pubsub-video-link-error') +'</section>';
      }else{
        let vid = matches[2];
        const src = '//v.qq.com/txp/iframe/player.html?origin='+ encodeURIComponent(location.origin) + '&vid='+ vid +'&autoplay=false&show1080p=false&isDebugIframe=false';
        str = '<section><section class="tencent_video_container">'+ removeBtn +'<iframe allow="autoplay; fullscreen" allowfullscreen="true" src="'+src+'"></iframe></section></section>';
      }
    }else{
      let cover = (v.coverUrl+'').replace('/api2', '');
      let bg = '';
      if(cover==='' || cover===undefined){
        
      }else{
        if( cover.indexOf('/file/viewpreview?id=')!==-1 ){
          cover = cover.replace('/file/viewpreview?id=', '/openfile/getfile?size=preview&type=jw_n_image&id=');
        }
        bg = '<section class="ed_video_preview"><section class="ed_video_preview_img" style="background-image:url('+cover+')"></section></section><section class="ed_video_preview_btn"></section>';
      }
      str = '<section><section class="ed_video_p_w" style="position: relative;" contenteditable="false">'+ removeBtn +'<section class="ed_video_player"><video src="'+(v.videoUrl+'').replace('/api2', '')+'" controls="controls" controlslist="nodownload nofullscreen"></video></section>'+bg+'</section></section>';
    }
    return str;
  }
  initConfig(){

    CKEDITOR.dtd.$block.svg = 1;
    CKEDITOR.dtd.$block.g = 1;
    CKEDITOR.dtd.$block.polygon = 1;
    CKEDITOR.dtd.$block.path = 1;
    CKEDITOR.dtd.polygon = {
      '#': 1,
      style: 1,
    }
    CKEDITOR.dtd.path = {
      '#': 1,
      style: 1,
    }
    CKEDITOR.dtd.foreignObject = {
      '#': 1,
      style: 1,
      svg: 1
    }
    CKEDITOR.dtd.animateTransform = {
      '#': 1,
      style: 1,
    }
    CKEDITOR.dtd.rect = {
      '#': 1,
      style: 1,
      animate: 1,
      path: 1
    }
    CKEDITOR.dtd.animate = {
      '#': 1,
      style: 1,
      animate: 1,
      rect: 1,
      g: 1,
      path: 1
    }
    CKEDITOR.dtd.g = {
      '#': 1,
      style: 1,
      polygon: 1,
      path: 1,
      g: 1,
      rect: 1,
      animate: 1,
      animateTransform: 1,
      foreignObject: 1
    };
    CKEDITOR.dtd.svg = {
      '#': 1,
      style: 1,
      polygon: 1,
      path: 1,
      g: 1,
      rect: 1,
      animate: 1,
      text: 1,
      svg: 1,
      animateTransform: 1,
      foreignObject: 1
    };
    CKEDITOR.dtd.section.svg = 1;
    CKEDITOR.dtd.div.svg = 1;
    CKEDITOR.dtd.p.svg = 1;
    CKEDITOR.dtd.td.svg = 1;

    let defConfig = {
      fillEmptyBlocks: false,
      linkDefaultProtocol: 'https://',
      extraPlugins: 'magicline,autogrow,insertimage,insertaudio,insertvideo',
      // extraPlugins: 'autogrow,insertimage',
      autoGrow_onStartup: true,
      autoGrow_maxHeight: 350,
      autoGrow_minHeight: 350,
      // height: 300,
      enterMode: 2, // CKEDITOR.ENTER_BR,
      shiftEnterMode: 3, // CKEDITOR.ENTER_DIV,
      // allowedContent: true,
      // allowedContent: {
      //     $1: {
      //         elements: CKEDITOR.dtd,
      //         attributes: true,
      //         styles: true,
      //         classes: true
      //     }
      // },
      // disallowedContent: 'script; *[on*]; p div{line*, font*, max*, color*, white*, word*, letter*, -webkit*, background*, overflow*, position}; span{display, width}',
      allowedContent: {
        $1: {
            elements: CKEDITOR.dtd,
            attributes: true,
            styles: true,
            classes: true
        }
      },
      disallowedContent: 'script; *[on*]; section{pointer*}; p div{color*, white*, word*, letter*}',
      pasteFilter: null,
      fontSize_defaultLabel: '16',
      fontSize_sizes: '12/12px;13/13px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;28/28px;32/32px;48/48px;72/72px;96/96px;',
      line_height: "1;1.5;1.7;2;3;4;5;6;7;8;9;10",
      // removeButtons: 'placeholder,createplaceholder,emojipanel,emoji,brclear,Font,letterspacing,Format,Styles,Iframe,PageBreak,Replace,Flash,Language,PasteText,Save,About,Placeholder,Source,Preview,Templates,Cut,Copy,Paste,PasteFromWord,Blockquote,CreateDiv,BidiLtr,BidiRtl,Unlink,Anchor,Image,HorizontalRule,Maximize,ShowBlocks',
      // removePlugins:'elementspath,resize',
      // removeFormatAttributes: 'class,style,lang,width,height,align,hspace,valign',
      // removeFormatTags: 'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,script,strong,sub,sup,tt,u,var',
      removeDialogTabs: 'link:advanced',
      language: window.cur_lang||'zh-cn',
      removeButtons: 'Cut,Copy,Paste,Anchor,Font,Unlink',
      toolbarGroups: [
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
        { name: 'forms', groups: [ 'forms' ] },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'colors', groups: [ 'colors' ] },
        { name: 'customobj', groups: [ 'insertimage', 'insertvideo', 'insertaudio' ] },
        '/',
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'insert', groups: [ 'insert' ] },
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'tools', groups: [ 'tools' ] },
        { name: 'others', groups: [ 'others' ] },
        { name: 'about', groups: [ 'about' ] }
      ],
      contentsCss: [] //'/public/scripts/ck4c/jwplugins.css',
    }
    let config = this.props.config === undefined?{}:this.props.config;
    config = _.extend(defConfig, config);
    this.state = {
      curLang: this.props.curLang,
      value: this.props.defaultValue || '',
      toolbarPosition: this.props.toolbarPosition || false,
      editorName: this.props.editorName || 'JWCK' + this.guid(),
      className: this.props.className || 'jwck_' + this.guid(),
      toolbarStyle: this.props.toolbarStyle,
      editorConfig: config,
      showAudioDialog: false,
      showVideoDialog: false,
      imageFormat: this.props.config.imageFormat || ['.png', '.jpg', '.jpeg', '.bmp', '.gif'],
      videoFormat: this.props.config.videoFormat || ['.mp4', '.mpeg', '.mpg', '.avi', '.asf', '.wmv', '.mov', '.3gp', '.flv', '.h264', '.mkv', '.rm', '.rmvb'],
      showAudioCoverDilog: false
    }
  }
  initToolbar(){
    if( $('#'+ this.state.editorName + ' .cke_top').length===0 ){
      setTimeout(() => {
        this.initToolbar();
      }, 100);
    }else{
      $('#'+ this.state.editorName + ' .jwedtoolbar div').replaceWith( $('#'+ this.state.editorName + ' .cke_top') );
    }
  }
  constructor(props) {
    super(props);
    this.initConfig();
  }
  guid(){
    function S4(){
      return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    }
    return (S4()+S4()+S4()+S4()+S4()+S4()+S4()+S4());
  }
}

JoywokEditor.EditorExtPlugin = EditorExtPlugin;
JoywokEditor.EditorContentShow = EditorContentShow;

export default JoywokEditor;