/**
 * wangEditor http://www.wangeditor.com/  将git 源码下载下来 然后 npm run build 获取编译后的代码 版本 4.2.2
 * 钟是志
 * 2020年11月5日 16:56:23
 *
 **/
/**
 * key: 组件的key // 同一页面渲染应该只有一个唯一的key
 * height: number // 编辑区域的高度 单位px
 * zIndex: number // 默认为 10000 可自行设置
 * placeholder: string // 提示文字,
 * focus: boolean, // 是否获取焦点
 * value: string // 富文本的值
 * 更多配置项 参考 http://www.wangeditor.com/doc/
 * */
import React, {useState, useEffect} from 'react';
import WangEditor from './includes/wangEditor.min';

export default function Index( {
                                 height,
                                 zIndex,
                                 placeholder,
                                 focus,
                                 value,
                                 key,
                                 onChangeValue,
                               } ){
  useEffect(()=>{
    const editor = new WangEditor(`#wangEditor${key}`);
    if(height){
      editor.config.height = height;
    }
    if(zIndex){
      editor.config.zIndex = zIndex;
    }
    if(placeholder){
      editor.config.placeholder = placeholder;
    }
    if(focus){
      editor.config.focus = focus;
    }
    editor.config.onChange = function (newHtml) {
      onChangeValue(newHtml);
    };

    editor.config.customUploadImg = function(resultFiles, insertImgFn) {
      console.log(resultFiles);
      // insertImgFn(imgUrl);
    };

    editor.config.pasteFilterStyle = false; // 关闭粘贴样式的过滤

    editor.config.onchangeTimeout = 500;  // html内容改变时的 timeOut 配置

    editor.config.menus = [ // 配置菜单
      'head',
      'bold',
      'fontSize',
      'fontName',
      'italic',
      'underline',
      'strikeThrough',
      'indent',
      'lineHeight',
      'foreColor',
      'backColor',
      'link',
      'list',
      'justify',
      'quote',
      // 'emoticon',
      'image',
      'video',
      'table',
      // 'code',
      'splitLine',
      // 'undo',
      // 'redo',
    ];

    editor.create();

    if(value){
      editor.txt.html('<div class="wangEditorHtml">' + value + '</div>');
    }
  },[]);

  return (
    <div id={`wangEditor${key}`}>

    </div>
  )
}
