lu-lowcode-package-form 0.9.47 → 0.9.48

package/src/components/wangEditor/index.jsx

@@ -0,0 +1,167 @@
+/**
+ * @description React wangEditor usage
+ * @author wangfupeng
+ */
+
+import React, { useState, useEffect } from 'react'
+import '@wangeditor/editor/dist/css/style.css'
+import { Editor, Toolbar } from '@wangeditor/editor-for-react'
+import { Boot } from '@wangeditor/editor'
+import { DomEditor } from '@wangeditor/editor'
+import CustomMenu from "./menu/custom-menu"
+import { Modal } from 'antd'
+
+
+
+let setSize = null;
+let setRotation = null;
+
+const printSizeConf = {
+    key: 'printSize',
+    factory() {
+        return new CustomMenu("纸张大小", (editor, value) => {
+            typeof setSize === 'function' && setSize(editor, value)
+        })
+    }
+}
+const printRotationConf = {
+    key: 'printRotation',
+    factory() {
+        return new CustomMenu("纸张方向", (editor, value) => {
+            typeof setRotation === 'function' && setRotation(editor, value)
+        })
+    }
+}
+const formParamsConf = {
+    key: 'formParams',
+    factory() {
+        return new CustomMenu("表单参数", (editor, value) => {
+            typeof setRotation === 'function' && setRotation(editor, value)
+        })
+    }
+}
+Boot.registerMenu(printSizeConf)
+Boot.registerMenu(printRotationConf)
+Boot.registerMenu(formParamsConf)
+
+
+
+const WangEditor = () => {
+
+    const [showEdit, setShowEdit] = useState(false)
+    const [modalTitle, setModalTitle] = useState('纸张大小')
+    const [editor, setEditor] = useState(null) // 存储 editor 实例
+    const [html, setHtml] = useState('<p>hello</p>')
+    setSize = (editor, value) => {
+        setModalTitle('设置纸张大小')
+        setShowEdit(true)
+    }
+    setRotation = (editor, value) => {
+        setModalTitle('设置纸张方向')
+        setShowEdit(true)
+
+    }
+    // 模拟 ajax 请求，异步设置 html
+    useEffect(() => {
+
+    }, [])
+    useEffect(() => {
+        if (editor) {
+            
+            console.log("editor.menus ////",editor.menus)
+            editor.on('before-delete', (type, range) => {
+                console.log('before-delete', type, range);
+                const selection = window.getSelection();
+                const anchorNode = selection.anchorNode;
+                if (anchorNode && anchorNode.parentNode.tagName === 'A') {
+                    const aNode = anchorNode.parentNode;
+                    const parent = aNode.parentNode;
+                    if (parent && (parent.tagName === 'P' || parent.tagName === 'DIV')) {
+                        // 移除整个 <a> 标签
+                        parent.removeChild(aNode);
+                        // 更新编辑器的内容
+                        editor.txt.html(parent.innerHTML);
+                        return false; // 阻止默认的删除行为
+                    }
+                }
+            });
+
+            const toolbar = DomEditor.getToolbar(editor)
+
+            const curToolbarConfig = toolbar.getConfig()
+            console.log(curToolbarConfig.toolbarKeys)
+        }
+    }, [editor])
+    const handleWithOk = () => {
+
+    }
+    const toolbarConfig = {
+        insertKeys: {
+            index: 0,
+            keys: ['formParams' ,'printSize', 'printRotation','|' ], // show menu in toolbar
+        },
+        excludeKeys : [
+            'fullScreen' ,"insertLink"
+        ],
+        hoverbar :{
+            table:['insertTable', 'deleteTable', 'insertRowUp', 'insertRowDown', 'insertColLeft', 'insertColRight','formParams' ]
+        }
+    }
+    const editorConfig = {
+        placeholder: '请输入内容...',
+    }
+
+    // 及时销毁 editor
+    useEffect(() => {
+        return () => {
+            if (editor == null) return
+            editor.destroy()
+            setEditor(null)
+        }
+    }, [editor])
+
+    function insertText() {
+        if (editor == null) return
+        editor.insertText(' hello ')
+    }
+
+    function printHtml() {
+        if (editor == null) return
+        console.log(editor.getHtml())
+    }
+
+    return (
+        <>
+            <div className='fflex fflex-col fitems-center fgap-y-2'>
+                <div className='fflex fgap-2 fborder-b'>
+                    <div className='fflex-1 '> <Toolbar
+                        editor={editor}
+                        defaultConfig={toolbarConfig}
+                        mode="default"
+                    /></div>
+                </div>
+                <div className=' frounded fshadow-lg  fw-[960px] fborder fborder-gray-100 '>
+                    <Editor
+                        defaultConfig={editorConfig}
+                        value={html}
+                        onCreated={setEditor}
+                        onChange={editor => setHtml(editor.getHtml())}
+                        mode="default"
+                        style={{ height: '500px' }}
+                    /></div>
+            </div>
+            <Modal
+                destroyOnClose={true}
+                width={500}
+                title={modalTitle}
+                open={showEdit}
+                onCancel={() => setShowEdit(false)}
+                onOk={handleWithOk}
+            >
+                111111111111
+            </Modal>
+        </>
+    )
+}
+
+export { WangEditor }

package/src/components/wangEditor/menu/custom-menu.jsx

@@ -0,0 +1,23 @@
+
+class CustomMenu  {
+    constructor(title, handleClick) {
+        this.title = title
+        this.tag = 'button'
+        this.handleClick = handleClick
+    }
+
+    getValue(editor) {
+        return 'A4' 
+    }
+    isActive(editor) {
+        return false // or true
+    }
+    isDisabled(editor) {
+        return false // or true
+    }
+    exec(editor, value) {
+       typeof this.handleClick === 'function' && this.handleClick(editor,value)
+    }
+}
+
+export default CustomMenu

package/src/components/wangEditorNext/index.jsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import '@wangeditor-next/editor/dist/css/style.css';
+import { Editor, Toolbar } from '@wangeditor-next/editor-for-react';
+
+function WangEditorNext() {
+  const [editor, setEditor] = useState(null); // 存储 editor 实例
+  const [html, setHtml] = useState('<p>hello</p>');
+
+  // 模拟 ajax 请求，异步设置 html
+  useEffect(() => {
+    setTimeout(() => {
+      setHtml('<p>hello&nbsp;<strong>world</strong>.</p>\n<p><br></p>');
+    }, 1500);
+  }, []);
+
+  const toolbarConfig = {};
+  const editorConfig = {
+    placeholder: '请输入内容...',
+  };
+
+  // 及时销毁 editor
+  useEffect(() => {
+    return () => {
+      if (editor == null) return;
+      editor.destroy();
+      setEditor(null);
+    };
+  }, [editor]);
+
+  function insertText() {
+    if (editor == null) return;
+    editor.insertText(' hello ');
+  }
+
+  function printHtml() {
+    if (editor == null) return;
+    console.log(editor.getHtml());
+  }
+
+  return (
+    <>
+      <div style={{ border: '1px solid #ccc', zIndex: 100, marginTop: '15px' }}>
+        <Toolbar
+          editor={editor}
+          defaultConfig={toolbarConfig}
+          mode="default"
+          style={{ borderBottom: '1px solid #ccc' }}
+        />
+        <Editor
+          defaultConfig={editorConfig}
+          value={html}
+          onCreated={setEditor}
+          onChange={(editor) => setHtml(editor.getHtml())}
+          mode="default"
+          style={{ height: '500px' }}
+        />
+      </div>
+    </>
+  );
+}
+
+export {WangEditorNext} ;