/**
 * WangEditor5的使用
 * 2022年6月21日
 * 官方文档 https://www.wangeditor.com/v5/getting-started.html
 * 将github 的源代码 下载下来 并执行
 * npm install
 * 再在 git bash 中执行
 * npm run build 获取编译后的文件/packages/editor/dist 复制出来放在项目代码中并使用
 * */
import styles from './css/style.less';
import * as WangEditor5 from './index.esm';
import React, { Fragment, useEffect, useState } from 'react';

export default function WangEditorReactComponent(props) {
  const {
    domKey = 'cmsContent',
    height = '450px',
  } = props;
  useEffect(() => {
    console.log(WangEditor5);
    const editorConfig = {
      placeholder: '请输入内容',
      onChange: (editor) => {
        console.log('content', editor.children);
        console.log('html', editor.getHtml());
      },
    };
    const toolbarConfig = {
      // toolbarKeys: [
      //   // 配置菜单
      //   // 'head',
      //   'bold',
      // ],
    };

    const editor = WangEditor5.createEditor({
        selector: '#' + domKey,
        config: editorConfig,
        mode: 'default',
      },
    );
    WangEditor5.createToolbar({
      editor,
      selector: '#wangEditorToolBar',
      config: toolbarConfig,
      mode: 'default',
    });

    // console.log(editor.getAllMenuKeys());
    // console.log(WangEditor5.DomEditor.getToolbar(editor));

  }, []);

  return <div className={styles.wangEditor5}
              style={{ zIndex: '149', }}
  >
    <div id={'wangEditorToolBar'}
         style={{ zIndex: '150', }}
    >

    </div>
    <div id={domKey}
         style={{ zIndex: '149', }}
    >

    </div>
  </div>;
}
