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

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

/**
 * 
 * @api {}   富文本编辑器
 * @apiName  带自定义功能的富文本编辑器组件
 * @apiGroup 组件使用
 * 
 * @apiParam {Object}    config      非必填，编辑器配置 { language: 'en', ..... }
 * @apiParam {Object}    value       非必填，内容默认值, 当此值为对象时， onChange中返回的也是此对象
 * @apiParam {String}    value       非必填，内容默认值, 当此值为对象时， onChange中返回的是字符串
 * @apiParam {Object}    varSetting  非必填，插件值
 * @apiParam {function}  onChange    编辑器内容发生变化之后的回调事件，function({value: object||string, varSelected: Array, event: event})
 * @apiSuccessExample {json} 使用案例:
 * 
参数说明：
config 所有参数非必填 https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
config = {
  toolbarPosition: 'jwedtoolbar',     工具栏位置
  autoGrow_maxHeight: 300, 自增最大高度
  autoGrow_minHeight: 300, 自增最小高度
  editorName: 'editor01',  编辑器名称，当一个页面中同时存在两个编辑器时需要区分
  imageFormat: ['.jpg', '.png'],
  audioFormat: ['.mp3'],
  videoFormat: ['.mp4'],
  ...
}

multilang = false

value = 'SQEEFEFEWFEF';

varSetting = false

import FCKEditor from 'joywok-material-components/lib/jweditor/extplugin';

onChange({value: object||string, varSelected: Array, event: event}){
  
}

<FCKEditor onChange={(e)=>this.onChange(v)} config={config} value={value} multilang={multilang} varSetting={varSetting} />
 *
 * 
 */

import React from 'react';
require('./style/index.css');
import Editor from './index';
require('./crypto');

class ExtPluginsEditor extends React.Component{
  initConfig(){
    let s = {
      editorConfig: this.props.config === undefined?{}:this.props.config,
      showAudioDialog: false,
      showVideoDialog: false,
      showImageDialog: false,
      value: '',
      curValue: '',
      curLang: ''
    }
    if( _.isString( this.props.value ) === true ){
      s.curValue = this.props.value;
      s.value = this.props.value;
    }else{
      s.curValue = '';
      s.value = '';
    }
    this.state = s;
  }
  constructor(props) {
    super(props);
    this.initConfig();
  }
  componentWillReceiveProps(d){}
  render(){
    let value = this.state.curValue || '';
    return <div className="joywok-editor-wrap" id={this.state.editorName}>
      <Editor appType={this.props.appType} appId={this.props.appId} simple={true} toolbarStyle={''} curLang={'zh-cn'} onChange={this.onChangeEditor} defaultValue={value} config={this.state.editorConfig} />
    </div>
  }
  encodeValue( v ){
    return v;
  }
  decodeValue( v ){
    return v;
  }
  onChangeEditor = (e)=>{
    let v = e.editor.getData();
    typeof this.props.onChange === 'function' && this.props.onChange( v );
  }
}
export default ExtPluginsEditor;