3.10 工程代码同步master

src/components/richText/braft/index.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useImperativeHandle, useState } from 'react'
+// 引入编辑器组件
+import BraftEditor, { ControlType } from 'braft-editor'
+// 引入编辑器样式
+import 'braft-editor/dist/index.css'
+interface BraftType {
+  braftRef: any;//挂载,
+  disabled?: any;//是否可编辑
+  echo?: any;//回显内容
+  value?: any;
+  height?: number;
+  onChange?: (value: any) => void
+}
+const BraftText: React.FC<BraftType> = (props) => {
+  const {
+    braftRef,
+    echo,
+    disabled,
+    height,
+  } = props;
+
+  const [editorState, editorStateSet] = useState(BraftEditor.createEditorState(null));
+  //工具栏
+  const controls: ControlType[] = [
+    // 'undo', 'redo', 'separator',
+    'font-size', 'line-height', 'letter-spacing', 'separator',
+    'text-color', 'bold', 'italic', 'underline', 'separator',
+    'text-indent', 'text-align', 'separator',
+    'headings', 'list-ul', 'list-ol', 'separator',
+    'remove-styles', 'clear'
+  ]
+  //=========================================================================================================
+  useEffect(() => {
+    echo && editorStateSet(BraftEditor.createEditorState(echo))
+  }, [echo]);
+  /**
+  *提供给父级的内容
+  **/
+  useImperativeHandle(braftRef, () => ({
+    getHtml,
+  }));
+  const handleEditorChange = (editorState: any) => {
+    editorStateSet(editorState)
+  }
+  const getHtml = () => {
+    return editorState.toHTML();
+  }
+  return (
+    <div className="my-component" style={{ border: 'solid', borderWidth: '1px', borderColor: 'rgb(205,205,205)', height: height && height }}>
+      <BraftEditor
+        value={editorState}
+        onChange={handleEditorChange}
+        controls={!disabled ? controls : []}// 查看状态不显示菜单
+        readOnly={disabled}
+        placeholder={'为了能顺利发布，建议您内容去掉下划线等格式，尽量以纯文本形式发布并在粘贴后仔细检查是否有不对的地方。'}
+      />
+    </div>
+  )
+}
+export default BraftText;

src/components/richText/wang/fullScreen.tsx

@@ -0,0 +1,39 @@
+// 引入 wangEditor
+import E from 'wangeditor' // npm 安装
+// 获取必要的变量，这些在下文中都会用到
+const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
+
+// 第一，菜单 class ，Button 菜单继承 BtnMenu class
+class AlertMenu extends BtnMenu {
+  constructor(editor: E) {
+    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
+      const $elem = E.$(
+          `<div data-title="Alert">
+              <button>alert</button>
+          </div>`
+      )
+      super($elem, editor)
+  }
+  // 菜单点击事件
+  clickHandler() {
+      // 做任何你想做的事情
+      // 可参考【常用 API】文档，来操作编辑器
+
+      alert('hello world')
+  }
+  // 菜单是否被激活（如果不需要，这个函数可以空着）
+  // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
+  // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
+  tryChangeActive() {
+      // 激活菜单
+      // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
+      // 2. this.this.isActive === true
+      this.active()
+
+      // // 取消激活菜单
+      // // 1. 菜单 DOM 节点会删掉 .w-e-active
+      // // 2. this.this.isActive === false
+      // this.unActive()
+  }
+}
+export default AlertMenu;

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