3.10 工程代码同步master

2022-03-10 14:24:13 +08:00
parent 41ab55a4ac
commit 62f6b07ee2
914 changed files with 143121 additions and 29110 deletions
--- a/src/components/richText/wang/index.tsx
+++ b/src/components/richText/wang/index.tsx
@ -0,0 +1,142 @@
+import React, { useEffect, useImperativeHandle, useState } from 'react';
+import AlertMenu from './fullScreen'
+import E from 'wangeditor';
+import { Button } from 'antd';
+
+interface WangType {
+  braftRef: any;//挂载
+  disabled?: any;//是否可编辑
+  echo?: any;//回显内容
+  value?: any;
+  height?: number;
+  onChange?: (value: any) => void
+}
+let editor: any = null;
+
+const BraftText: React.FC<WangType> = (props) => {
+  let willCreate = true;
+
+  // 菜单 key ，各个菜单不能重复-自定义工具
+  const menuKey = 'alertMenuKey'
+  //======================================================================================state
+  const [content, setContent] = useState('');
+  const [fullScreen, fullScreenSet] = useState(false);
+  const {
+    braftRef,
+    echo,
+    disabled,
+    value,
+    height,
+    onChange,
+  } = props;
+
+  const tools = [//工具栏
+    'head',//标题
+    'fontSize', //字号
+    'lineHeight', //行高
+    'foreColor', //颜色
+    'bold', //加粗
+    'italic', //斜体
+    'underline', //下划线
+    'strikeThrough', //文字删除线
+    'indent', //缩进
+    'justify', //文字对齐方式
+    'undo', //撤销
+    'redo', //重做
+    'fullscreen', //全屏
+
+    'emoticon',//表情
+    'image',//图片
+    'video',//视频
+    'table',//表格
+    'todo',//待办
+  ];
+
+  //=======================================================================================func
+  useEffect(() => {
+    if (willCreate) {
+      // 注：class写法需要在componentDidMount 创建编辑器
+      editor = new E("#div1")
+
+      //工具栏
+      editor.config.menus = tools;
+      //提示
+      editor.config.placeholder = '为了能顺利发布，建议您内容去掉下划线等格式，尽量以纯文本形式发布。'
+      // 配置 onchange 回调函数
+      editor.config.onchange = editorOnChange;
+      // 注册菜单
+      // editor.menus.extend(menuKey, AlertMenu);
+
+      // 将菜单加入到 editor.config.menus 中    const menuKey = 'alertMenuKey' 
+      // 也可以通过配置 menus 调整菜单的顺序，参考【配置菜单】部分的文档    editor.config.menus.push(menuKey)
+      // editor.config.menus = editor.config.menus.concat(menuKey)
+
+      // 设置编辑区域高度为 500px
+      height && (editor.config.height = height);
+      /**一定要创建 */
+      editor.create();
+
+      //控制是否可编辑
+      disabled && makeDis();
+
+      willCreate = false;
+    }
+
+    // 重新设置编辑器内容
+    echo && editor.txt.html(echo);
+    value && editor.txt.html(value);
+
+    return () => {
+      // 组件销毁时销毁编辑器  注：class写法需要在componentWillUnmount中调用
+      editor.destroy()
+    }
+  }, [value, echo]);
+  /**
+  *提供给父级的内容
+  **/
+  useImperativeHandle(braftRef, () => ({
+    getText,
+    getHtml,
+    getHtml1,
+    makeDis,
+  }));
+
+  // 获取html方法1
+  function getHtml() {
+    return content
+  }
+
+  // 获取html方法2
+  function getHtml1() {
+    return editor.txt.html()
+  }
+
+  // 获取text
+  function getText() {
+    alert(editor.txt.text())
+  }
+
+  //change
+  function editorOnChange(newHtml: any) {
+    setContent(newHtml);
+    triggerChange(newHtml)
+  }
+
+  //不可编辑
+  function makeDis() {
+    editor.disable();
+  }
+
+  //form取值
+  const triggerChange = (newHtml: any) => {
+    onChange?.(newHtml);
+  };
+  return (
+    <div>
+      {/* <Button onClick={() => { editor.enable() }}>全屏</Button>
+      <Button onClick={() => { editor.disable() }}>全屏</Button> */}
+      <div id="div1" style={{ textAlign: 'left' }}></div>
+    </div>
+  )
+}
+export default BraftText