feat: 刷题页面

src/views/upload-questions/components/kind-editor/index.jsx

@@ -0,0 +1,153 @@
+import React, { Component } from 'react';
+import './index.less';
+
+import Editor from 'wangeditor';
+
+export default class KindEditor extends Component {
+    defaultValueHead = `<div style='font-size:14px !important;line-height:22px !important;margin-bottom: -15px !important;word-break: break-word  !important;'>`;
+    defaultValueFoot = '</div>';
+    editor = Editor;
+
+    constructor(props) {
+        super(props);
+        this.state = { editorContent: '', isActive: false };
+    }
+
+    /**
+     * 清空内容
+     */
+    onClear = () => {
+        this.editor.txt.clear();
+        this.editor.config.focus = false;
+        this.setState({
+            isActive: false,
+            editorContent: '',
+        });
+    };
+
+    /**
+     * 回现代码
+     */
+    onCashBack = () => {
+        let { cashBackText } = this.props;
+        if (!!!cashBackText) {
+            return;
+        }
+        this.editor.txt.html(`${cashBackText}`);
+        this.editor.config.focus = true;
+    };
+
+    /**
+     * 获得焦点
+     */
+    onFocus = () => {
+        this.editor.config.focus = true;
+        this.setState({
+            isActive: true,
+        });
+    };
+
+    componentDidMount() {
+        const elemMenu = this.refs.editorElemMenu;
+        const elemBody = this.refs.editorElemBody;
+        this.editor = new Editor(elemMenu, elemBody);
+        // // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
+        this.editor.config.onchange = (html) => {
+            let htmlStr = this.editor.txt.html();
+            // console.log('htmlStr ---', htmlStr);
+            if (htmlStr?.indexOf('<div style=') < 0) {
+                htmlStr = this.defaultValueHead + htmlStr + this.defaultValueFoot;
+            }
+            let isActive = false;
+            if (this.state.editorContent) {
+                isActive = true;
+            }
+            this.setState(
+                {
+                    // editorContent: editor.txt.text()
+                    editorContent: htmlStr,
+                    isActive: isActive,
+                },
+                () => {
+                    this.props.onChange(htmlStr);
+                }
+            );
+        };
+        this.editor.config.onfocus = () => {
+            this.setState({
+                isActive: true,
+            });
+        };
+        this.editor.config.onblur = () => {
+            this.setState({
+                isActive: false,
+            });
+        };
+
+        this.editor.config.menus = [
+            // 'head', // 标题
+            // 'bold', // 粗体
+            // 'fontSize', // 字号
+            // 'fontName', // 字体
+            // 'italic', // 斜体
+            // 'underline', // 下划线
+            // 'strikeThrough', // 删除线
+            'foreColor', // 文字颜色
+            // 'backColor', // 背景颜色
+            // 'link', // 插入链接
+            'list', // 列表
+            // 'justify', // 对齐方式
+            // 'quote', // 引用
+            // 'emoticon', // 表情
+            // 'image', // 插入图片
+            // 'table', // 表格
+            // 'video', // 插入视频
+            'code', // 插入代码
+            'undo', // 撤销
+            // 'redo', // 重复
+        ];
+        // this.editor.customConfig.uploadImgShowBase64 = true;
+        // 取消自动 focus
+        this.editor.config.focus = false;
+        this.editor.config.pasteFilterStyle = true; // 样式过滤
+        this.editor.config.pasteIgnoreImg = true; // 如果复制的内容有图片又有文字，则只粘贴文字，不粘贴图片
+        this.editor.config.placeholder = '请输入';
+        this.editor.create();
+    }
+
+    render() {
+        const { isActive } = this.state;
+        const { bodyHeight, bodyWidth, borderRadius } = this.props;
+        return (
+            <div
+                className={`text-area ${isActive && 'kind-editor-active-box'}`}
+                style={{
+                    borderRadius: borderRadius,
+                }}>
+                <div
+                    ref="editorElemMenu"
+                    className="editorelem-menu"
+                    style={{
+                        width: bodyWidth,
+                        borderTopLeftRadius: borderRadius,
+                        borderTopRightRadius: borderRadius,
+                    }}></div>
+                <div
+                    ref="editorElemBody"
+                    className="editorelem-body"
+                    style={{
+                        height: bodyHeight,
+                        width: bodyWidth,
+                        borderBottomLeftRadius: borderRadius,
+                        borderBottomRightRadius: borderRadius,
+                    }}></div>
+            </div>
+        );
+    }
+}
+
+KindEditor.defaultProps = {
+    bodyHeight: 320,
+    bodyWidth: '100%',
+    borderRadius: '4px',
+};