@flatbiz/antd 4.2.101 → 4.2.102
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,5 +3,5 @@ import './../dynamic-node/index.css';
|
|
|
3
3
|
import './../fba-hooks/index.css';
|
|
4
4
|
import './index.css';
|
|
5
5
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
6
|
-
import{a as e,_ as n}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as t}from"@dimjs/utils/cjs/class-names";import{hooks as r}from"@wove/react/cjs/hooks";import{
|
|
6
|
+
import{a as e,_ as n}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as t}from"@dimjs/utils/cjs/class-names";import{hooks as r}from"@wove/react/cjs/hooks";import{getStrByteLen as i}from"@flatbiz/utils";import{Editor as o}from"@tinymce/tinymce-react";import{useKeyPress as a}from"ahooks";import{Image as l,message as s}from"antd";import{Fragment as c,useRef as u,useState as m}from"react";import d from"@ant-design/icons/es/icons/PlusCircleOutlined";import{dynamicNode as f}from"../dynamic-node/index.js";import{fbaHooks as p}from"../fba-hooks/index.js";import{jsx as v,Fragment as g,jsxs as h}from"react/jsx-runtime";import"react-dom/client";import"../dom-4d04aa64.js";import"@dimjs/lang/cjs/is-array";import"../use-responsive-point-21b8c601.js";var y=function e(n){var t=n.visible,r=n.url;p.useEffectCustom((function(){if(t){f.append({content:v(d,{onClick:n.close,className:"preview-image-popup-close",twoToneColor:"#1890ff"})})}else{f.remove()}}),[t]);if(!r)return v(g,{});return v(c,{children:v(l,{style:{left:"100px"},preview:{className:"preview-image-popup",maskStyle:{backgroundColor:"rgba(0,0,0,0.85)"},visible:t,src:r,onVisibleChange:function e(){n.close()}}},r)})};var b=["onUploadImage","onChange","className"];var C=function l(c){var d,f,p,g;var C=c.onUploadImage,k=c.onChange,x=c.className,_=e(c,b);var w=u(null);var j=m(""),E=j[0],I=j[1];var S=((d=c.init)==null?void 0:d.img_ratio)||[{min:0,max:1e3,ratio:.5},{min:1e3,ratio:.3}];a((function(){return true}),(function(e){try{if(e.type==="keyup"&&e.key==="Escape"){var n;var t=(n=w.current)==null?void 0:n.editorContainer.classList.contains("tox-fullscreen");if(t){var r;(r=w.current)==null?void 0:r.editorCommands.execCommand("mceFullScreen")}}}catch(e){}}),{events:["keydown","keyup"]});var F=r.useCallbackRef((function(e,n){try{if(e.keyCode==27){var t;var r=(t=w.current)==null?void 0:t.editorContainer.classList.contains("tox-fullscreen");if(r){var i;(i=w.current)==null?void 0:i.editorCommands.execCommand("mceFullScreen")}}}catch(e){}c.onKeyDown==null?void 0:c.onKeyDown(e,n)}));var N=r.useCallbackRef((function(e,n){w.current=n;n.on("FullscreenStateChanged",(function(e){c.onFullScreenChange==null?void 0:c.onFullScreenChange(e.state)}));try{var t;(t=n.iframeElement)==null||(t=t.contentDocument)==null?void 0:t.addEventListener("click",(function(e){var n;if(c.imgPreview&&((n=e.target)==null?void 0:n["tagName"])==="IMG"){I(e.target["src"])}}),true)}catch(e){}_.onInit==null?void 0:_.onInit(e,n)}));var P=r.useCallbackRef((function(e,n){w.current=n;_.onEditorChange==null?void 0:_.onEditorChange(e,n);k==null?void 0:k(e)}));var z="https://file.40017.cn/tcsk/tinymce@6.4.1";var R=function e(n){if(S.length===0)return 1;for(var t=0;t<S.length;t++){var r=S[t];if(r.max){if(n>=r.min&&n<=r.max)return r.ratio}else{if(n>=r.min)return r.ratio}}return 1};var D=r.useCallbackRef((function(e,n){try{var t=n.node.children||[];if(t.length===1&&t[0].nodeName==="IMG"){t[0].setAttribute("style","display:none");var r=document.createElement("img");r.src=t[0].getAttribute("src");r.onload=function(){var n=R(r.width);e.execCommand("mceInsertContent",true,'<img src="'+r.src+'" width="'+r.width*n+'" height="'+r.height*n+'" />')}}}catch(e){}}));var K=r.useCallbackRef((function(e,n){var t;var r=(t=c.init)==null?void 0:t.paste_text_limit;if(r){var o=i(n.content);if(o>1024*r.limit){s.error(r.message);n.content=""}}}));return h("div",{className:t("v-editor-wrapper",x),children:[v(o,n({tinymceScriptSrc:z+"/tinymce.min.js"},_,{onInit:N,onKeyDown:F,onEditorChange:P,init:n({promotion:false,language:"zh-Hans",height:500,paste_data_images:C?true:false,paste_postprocess:D,paste_preprocess:K,autosave_ask_before_unload:false,base_url:z,autoresize_bottom_margin:0,images_upload_handler:function e(n){return new Promise((function(e,t){var r,i,o;var a=function(n){try{return e(Promise.reject((n==null?void 0:n.message)||"图片上传异常"))}catch(e){return t(e)}};try{r=n.blob();i=new File([r],r.name,{type:r.type});return Promise.resolve(C==null?void 0:C(i)).then((function(n){try{o=n;return e(Promise.resolve(o))}catch(e){return a(e)}}),a)}catch(e){a(e)}}))},plugins:"lists link image advlist charmap preview fullscreen code table help codesample "+(((f=c.init)==null?void 0:f.plugins_append)||""),toolbar:"undo redo fullscreen preview | bold italic underline strikethrough |"+"fontsize blocks |"+"forecolor backcolor removeformat |"+"numlist bullist advlist |"+"alignleft aligncenter alignright alignjustify |"+"outdent indent |"+"hr image link code codesample |"+(((p=c.init)==null?void 0:p.toolbar_append)||""),font_size_formats:"8px 10px 12px 14px 16px 18px 24px 36px 48px"},c.init,{content_style:"img {max-width:100%;} table{width:100%} "+((g=c.init)==null?void 0:g.content_style),convert_urls:false})})),v(y,{visible:!!E,url:E,close:function e(){I("")}})]})};export{C as RichTextEditor};
|
|
7
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/rich-text-editor/preview/preview.tsx","@flatbiz/antd/src/rich-text-editor/rich-text-editor.tsx"],"sourcesContent":["import { PlusCircleOutlined } from '@ant-design/icons';\nimport { Image } from 'antd';\nimport { Fragment } from 'react';\nimport { dynamicNode } from '../../dynamic-node';\nimport { fbaHooks } from '../../fba-hooks';\nimport './preview.less';\n\nexport const Preview = (props) => {\n const { visible, url } = props;\n\n fbaHooks.useEffectCustom(() => {\n if (visible) {\n dynamicNode.append({\n content: (\n <PlusCircleOutlined\n onClick={props.close}\n className=\"preview-image-popup-close\"\n twoToneColor=\"#1890ff\"\n />\n ),\n });\n } else {\n dynamicNode.remove();\n }\n }, [visible]);\n\n if (!url) return <></>;\n\n return (\n <Fragment>\n <Image\n key={url}\n style={{ left: '100px' }}\n preview={{\n className: 'preview-image-popup',\n maskStyle: { backgroundColor: 'rgba(0,0,0,0.85)' },\n visible,\n src: url,\n onVisibleChange: () => {\n props.close();\n },\n }}\n />\n </Fragment>\n );\n};\n","import { classNames } from '@dimjs/utils';\nimport { type TAny } from '@flatbiz/utils';\nimport { Editor, type IAllProps } from '@tinymce/tinymce-react';\nimport { hooks } from '@wove/react';\nimport { useKeyPress } from 'ahooks';\nimport { useRef, useState } from 'react';\nimport { type Editor as TinyMCEEditor } from 'tinymce';\nimport { Preview } from './preview';\nimport './style.less';\n\nexport interface RichTextEditorProps extends Omit<IAllProps, 'onChange' | 'init'> {\n onChange?: (data?: string) => void;\n // value?: string;\n /** 上传图片服务 */\n onUploadImage?: (file: File) => Promise<string>;\n className?: string;\n /** 图片点击预览 */\n imgPreview?: boolean;\n init?: IAllProps['init'] & {\n /**\n * 通过粘贴图片创建的img标签，显示压缩比例，此处min、max是和指图片宽度\n * 1. 默认值：[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]\n */\n img_ratio?: { min: number; max?: number; ratio: number }[];\n /** 插件添加；自定义plugins后失效 */\n plugins_append?: string;\n /** 工具栏添加；自定义toolbar后失效 */\n toolbar_append?: string;\n };\n /** 点击全屏按钮回调 */\n onFullScreenChange?: (state?: boolean) => void;\n}\n\n/**\n * 富文本编辑器，配置参考tinymce https://www.tiny.cloud/docs/tinymce/6\n * @param props\n * @returns\n * ```\n * 1. 如果需要粘贴上传图片服务，需要提供 onUploadImage 上传图片接口\n * 2. 获取富文本实例，通过onInit(_, editor)函数获取\n * 3. 预览富文本数据，使用 RichTextViewer 组件\n * 4. 添加其他插件使用方式，配置 init.plugins_append、init.toolbar_append\n * <RichTextEditor init={{ plugins_append: 'codesample', toolbar_append: 'codesample' }} />\n * 5. 可通过设置 init.plugins、init.toolbar 完全自定义插件、工具栏\n * 6. 其他插件\n * emoticons 表情插件\n * 7. 可通过设置 init.img_ratio 设置通过粘贴上传的图片压缩显示比例\n * 默认比例：[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]\n * ```\n */\nexport const RichTextEditor = (props: RichTextEditorProps) => {\n const { onUploadImage, onChange, className, ...otherProps } = props;\n\n const editorRef = useRef<TAny>(null);\n const [previewUrl, setPreviewUrl] = useState('');\n const imgRatio = props.init?.img_ratio || [\n { min: 0, max: 1000, ratio: 0.5 },\n { min: 1000, ratio: 0.3 },\n ];\n\n // const varStyleString = useMemo(() => {\n // const merge = { ...defaultVarStyle, ...props.varStyle };\n // let varStyleString = '';\n // Object.keys(merge).map((key) => {\n // varStyleString += `${key}:${merge[key]};`;\n // });\n // return varStyleString;\n // }, [props.varStyle]);\n\n useKeyPress(\n () => true,\n (event) => {\n try {\n if (event.type === 'keyup' && event.key === 'Escape') {\n const isFull = editorRef.current?.editorContainer.classList.contains('tox-fullscreen');\n if (isFull) {\n editorRef.current?.editorCommands.execCommand('mceFullScreen');\n }\n }\n } catch (error) {\n // 异常不处理\n }\n },\n {\n events: ['keydown', 'keyup'],\n },\n );\n\n const onKeyDown = hooks.useCallbackRef((event, editor: TinyMCEEditor) => {\n try {\n if (event.keyCode == 27) {\n const isFull = editorRef.current?.editorContainer.classList.contains('tox-fullscreen');\n if (isFull) {\n editorRef.current?.editorCommands.execCommand('mceFullScreen');\n }\n }\n } catch (error) {\n // 异常不处理\n }\n props.onKeyDown?.(event, editor);\n });\n\n const onInit = hooks.useCallbackRef((_, editor: TinyMCEEditor) => {\n editorRef.current = editor;\n editor.on('FullscreenStateChanged', (e) => {\n props.onFullScreenChange?.(e.state);\n });\n try {\n editor.iframeElement?.contentDocument?.addEventListener(\n 'click',\n (event) => {\n if (props.imgPreview && event.target?.['tagName'] === 'IMG') {\n setPreviewUrl(event.target['src']);\n }\n },\n true,\n );\n } catch (error) {\n //\n }\n otherProps.onInit?.(_, editor);\n });\n\n const onEditorChange = hooks.useCallbackRef((a: string, editor: TinyMCEEditor) => {\n editorRef.current = editor;\n otherProps.onEditorChange?.(a, editor);\n onChange?.(a);\n });\n\n const tinymceBaseUrl = 'https://file.40017.cn/tcsk/tinymce@6.4.1';\n\n const getImgRatio = (width: number) => {\n if (imgRatio.length === 0) return 1;\n for (let index = 0; index < imgRatio.length; index++) {\n const element = imgRatio[index];\n if (element.max) {\n if (width >= element.min && width <= element.max) return element.ratio;\n } else {\n if (width >= element.min) return element.ratio;\n }\n }\n return 1;\n };\n\n const paste_postprocess = hooks.useCallbackRef((editor, args) => {\n try {\n const nodes = (args.node.children || []) as unknown as HTMLElement[];\n if (nodes.length === 1 && nodes[0].nodeName === 'IMG') {\n nodes[0].setAttribute('style', `display:none`);\n const img = document.createElement('img');\n img.src = nodes[0].getAttribute('src') as string;\n img.onload = () => {\n const ratio = getImgRatio(img.width);\n editor.execCommand(\n 'mceInsertContent',\n true,\n `<img src=\"${img.src}\" width=\"${img.width * ratio}\" height=\"${img.height * ratio}\" />`,\n );\n };\n }\n } catch (error) {\n //\n }\n });\n\n return (\n <div className={classNames('v-editor-wrapper', className)}>\n <Editor\n // apiKey=\"ds6j8so4g3d2cycidbhgkds36q0phy1uqd9jd8bot91sfe5l\"\n tinymceScriptSrc={`${tinymceBaseUrl}/tinymce.min.js`}\n {...otherProps}\n onInit={onInit}\n onKeyDown={onKeyDown}\n onEditorChange={onEditorChange}\n init={{\n promotion: false,\n language: 'zh-Hans',\n height: 500,\n paste_data_images: onUploadImage ? true : false,\n paste_postprocess,\n autosave_ask_before_unload: false,\n base_url: tinymceBaseUrl,\n autoresize_bottom_margin: 0,\n images_upload_handler: async (blobInfo) => {\n try {\n const blob = blobInfo.blob();\n const file = new File([blob], blob.name, { type: blob.type });\n const respData = await onUploadImage?.(file);\n return Promise.resolve(respData as string);\n } catch (error: any) {\n return Promise.reject(error?.message || '图片上传异常');\n }\n },\n\n plugins:\n 'lists link image advlist charmap preview fullscreen code table help codesample ' +\n (props.init?.plugins_append || ''),\n toolbar:\n 'undo redo fullscreen preview | bold italic underline strikethrough |' +\n 'fontsize blocks |' +\n 'forecolor backcolor removeformat |' +\n 'numlist bullist advlist |' +\n 'alignleft aligncenter alignright alignjustify |' +\n 'outdent indent |' +\n 'hr image link code codesample |' +\n (props.init?.toolbar_append || ''),\n font_size_formats: '8px 10px 12px 14px 16px 18px 24px 36px 48px',\n ...props.init,\n content_style: `img {max-width:100%;} table{width:100%} ${props.init?.content_style}`,\n }}\n />\n <Preview\n visible={!!previewUrl}\n url={previewUrl}\n close={() => {\n setPreviewUrl('');\n }}\n />\n </div>\n );\n};\n\n/**\n * undo redo\n * codesample\n * fontselect fontsizeselect formatselect\n * image media link anchor\n * preview save print\n * emoticons(表情)\n */\n"],"names":["Preview","props","visible","url","fbaHooks","useEffectCustom","dynamicNode","append","content","_jsx","_PlusCircleOutlined","onClick","close","className","twoToneColor","remove","_Fragment","Fragment","children","Image","style","left","preview","maskStyle","backgroundColor","src","onVisibleChange","RichTextEditor","_props$init","_props$init2","_props$init3","_props$init4","onUploadImage","onChange","otherProps","_objectWithoutPropertiesLoose","_excluded","editorRef","useRef","_useState","useState","previewUrl","setPreviewUrl","imgRatio","init","img_ratio","min","max","ratio","useKeyPress","event","type","key","_editorRef$current","isFull","current","editorContainer","classList","contains","_editorRef$current2","editorCommands","execCommand","error","events","onKeyDown","_hooks","useCallbackRef","editor","keyCode","_editorRef$current3","_editorRef$current4","onInit","_","on","e","onFullScreenChange","state","_editor$iframeElement","iframeElement","contentDocument","addEventListener","_event$target","imgPreview","target","onEditorChange","a","tinymceBaseUrl","getImgRatio","width","length","index","element","paste_postprocess","args","nodes","node","nodeName","setAttribute","img","document","createElement","getAttribute","onload","height","_jsxs","_classNames","Editor","_extends","tinymceScriptSrc","promotion","language","paste_data_images","autosave_ask_before_unload","base_url","autoresize_bottom_margin","images_upload_handler","blobInfo","Promise","$return","$error","blob","_file","respData","$Try_5_Catch","reject","message","$boundEx","file","File","name","resolve","then","$await_6","plugins","plugins_append","toolbar","toolbar_append","font_size_formats","content_style"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/rich-text-editor/preview/preview.tsx","@flatbiz/antd/src/rich-text-editor/rich-text-editor.tsx"],"sourcesContent":["import { PlusCircleOutlined } from '@ant-design/icons';\nimport { Image } from 'antd';\nimport { Fragment } from 'react';\nimport { dynamicNode } from '../../dynamic-node';\nimport { fbaHooks } from '../../fba-hooks';\nimport './preview.less';\n\nexport const Preview = (props) => {\n const { visible, url } = props;\n\n fbaHooks.useEffectCustom(() => {\n if (visible) {\n dynamicNode.append({\n content: (\n <PlusCircleOutlined\n onClick={props.close}\n className=\"preview-image-popup-close\"\n twoToneColor=\"#1890ff\"\n />\n ),\n });\n } else {\n dynamicNode.remove();\n }\n }, [visible]);\n\n if (!url) return <></>;\n\n return (\n <Fragment>\n <Image\n key={url}\n style={{ left: '100px' }}\n preview={{\n className: 'preview-image-popup',\n maskStyle: { backgroundColor: 'rgba(0,0,0,0.85)' },\n visible,\n src: url,\n onVisibleChange: () => {\n props.close();\n },\n }}\n />\n </Fragment>\n );\n};\n","import { classNames } from '@dimjs/utils';\nimport { getStrByteLen, type TAny } from '@flatbiz/utils';\nimport { Editor, type IAllProps } from '@tinymce/tinymce-react';\nimport { hooks } from '@wove/react';\nimport { useKeyPress } from 'ahooks';\nimport { message } from 'antd';\nimport { useRef, useState } from 'react';\nimport { type Editor as TinyMCEEditor } from 'tinymce';\nimport { Preview } from './preview';\nimport './style.less';\n\nexport interface RichTextEditorProps extends Omit<IAllProps, 'onChange' | 'init'> {\n onChange?: (data?: string) => void;\n /** 上传图片服务 */\n onUploadImage?: (file: File) => Promise<string>;\n className?: string;\n /** 图片点击预览 */\n imgPreview?: boolean;\n init?: IAllProps['init'] & {\n /**\n * 通过粘贴图片创建的img标签，显示压缩比例，此处min、max是和指图片宽度\n * ```\n * 1. 默认值：[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]\n * ```\n */\n img_ratio?: { min: number; max?: number; ratio: number }[];\n /**\n * 粘贴文本大小限制\n * ```\n * 1. limit 限制大小，单位KB，例如限制2M，值为2*1024\n * 2. 限制提示文案\n * ```\n */\n paste_text_limit?: {\n limit: number;\n message: string;\n };\n /** 插件添加；自定义plugins后失效 */\n plugins_append?: string;\n /** 工具栏添加；自定义toolbar后失效 */\n toolbar_append?: string;\n };\n /** 点击全屏按钮回调 */\n onFullScreenChange?: (state?: boolean) => void;\n}\n\n/**\n * 富文本编辑器，配置参考tinymce https://www.tiny.cloud/docs/tinymce/6\n * @param props\n * @returns\n * ```\n * 1. 如果需要粘贴上传图片服务，需要提供 onUploadImage 上传图片接口\n * 2. 获取富文本实例，通过onInit(_, editor)函数获取\n * 3. 预览富文本数据，使用 RichTextViewer 组件\n * 4. 添加其他插件使用方式，配置 init.plugins_append、init.toolbar_append\n * <RichTextEditor init={{ plugins_append: 'codesample', toolbar_append: 'codesample' }} />\n * 5. 可通过设置 init.plugins、init.toolbar 完全自定义插件、工具栏\n * 6. 其他插件\n * emoticons 表情插件\n * 7. 可通过设置 init.img_ratio 设置通过粘贴上传的图片压缩显示比例\n * 默认比例：[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]\n * ```\n */\nexport const RichTextEditor = (props: RichTextEditorProps) => {\n const { onUploadImage, onChange, className, ...otherProps } = props;\n\n const editorRef = useRef<TAny>(null);\n const [previewUrl, setPreviewUrl] = useState('');\n const imgRatio = props.init?.img_ratio || [\n { min: 0, max: 1000, ratio: 0.5 },\n { min: 1000, ratio: 0.3 },\n ];\n\n // const varStyleString = useMemo(() => {\n // const merge = { ...defaultVarStyle, ...props.varStyle };\n // let varStyleString = '';\n // Object.keys(merge).map((key) => {\n // varStyleString += `${key}:${merge[key]};`;\n // });\n // return varStyleString;\n // }, [props.varStyle]);\n\n useKeyPress(\n () => true,\n (event) => {\n try {\n if (event.type === 'keyup' && event.key === 'Escape') {\n const isFull = editorRef.current?.editorContainer.classList.contains('tox-fullscreen');\n if (isFull) {\n editorRef.current?.editorCommands.execCommand('mceFullScreen');\n }\n }\n } catch (error) {\n // 异常不处理\n }\n },\n {\n events: ['keydown', 'keyup'],\n },\n );\n\n const onKeyDown = hooks.useCallbackRef((event, editor: TinyMCEEditor) => {\n try {\n if (event.keyCode == 27) {\n const isFull = editorRef.current?.editorContainer.classList.contains('tox-fullscreen');\n if (isFull) {\n editorRef.current?.editorCommands.execCommand('mceFullScreen');\n }\n }\n } catch (error) {\n // 异常不处理\n }\n props.onKeyDown?.(event, editor);\n });\n\n const onInit = hooks.useCallbackRef((_, editor: TinyMCEEditor) => {\n editorRef.current = editor;\n editor.on('FullscreenStateChanged', (e) => {\n props.onFullScreenChange?.(e.state);\n });\n try {\n editor.iframeElement?.contentDocument?.addEventListener(\n 'click',\n (event) => {\n if (props.imgPreview && event.target?.['tagName'] === 'IMG') {\n setPreviewUrl(event.target['src']);\n }\n },\n true,\n );\n } catch (error) {\n //\n }\n otherProps.onInit?.(_, editor);\n });\n\n const onEditorChange = hooks.useCallbackRef((a: string, editor: TinyMCEEditor) => {\n editorRef.current = editor;\n otherProps.onEditorChange?.(a, editor);\n onChange?.(a);\n });\n\n const tinymceBaseUrl = 'https://file.40017.cn/tcsk/tinymce@6.4.1';\n\n const getImgRatio = (width: number) => {\n if (imgRatio.length === 0) return 1;\n for (let index = 0; index < imgRatio.length; index++) {\n const element = imgRatio[index];\n if (element.max) {\n if (width >= element.min && width <= element.max) return element.ratio;\n } else {\n if (width >= element.min) return element.ratio;\n }\n }\n return 1;\n };\n\n const paste_postprocess = hooks.useCallbackRef((editor, args) => {\n try {\n const nodes = (args.node.children || []) as unknown as HTMLElement[];\n if (nodes.length === 1 && nodes[0].nodeName === 'IMG') {\n nodes[0].setAttribute('style', `display:none`);\n const img = document.createElement('img');\n img.src = nodes[0].getAttribute('src') as string;\n img.onload = () => {\n const ratio = getImgRatio(img.width);\n editor.execCommand(\n 'mceInsertContent',\n true,\n `<img src=\"${img.src}\" width=\"${img.width * ratio}\" height=\"${img.height * ratio}\" />`,\n );\n };\n }\n } catch (error) {\n //\n }\n });\n\n const paste_preprocess = hooks.useCallbackRef((_plugin, args) => {\n const paste_text_limit = props.init?.paste_text_limit;\n if (paste_text_limit) {\n const byteLen = getStrByteLen(args.content);\n if (byteLen > 1024 * paste_text_limit.limit) {\n message.error(paste_text_limit.message);\n args.content = '';\n }\n }\n });\n\n return (\n <div className={classNames('v-editor-wrapper', className)}>\n <Editor\n // apiKey=\"ds6j8so4g3d2cycidbhgkds36q0phy1uqd9jd8bot91sfe5l\"\n tinymceScriptSrc={`${tinymceBaseUrl}/tinymce.min.js`}\n {...otherProps}\n onInit={onInit}\n onKeyDown={onKeyDown}\n onEditorChange={onEditorChange}\n init={{\n promotion: false,\n language: 'zh-Hans',\n height: 500,\n paste_data_images: onUploadImage ? true : false,\n paste_postprocess,\n paste_preprocess,\n autosave_ask_before_unload: false,\n base_url: tinymceBaseUrl,\n autoresize_bottom_margin: 0,\n images_upload_handler: async (blobInfo) => {\n try {\n const blob = blobInfo.blob();\n const file = new File([blob], blob.name, { type: blob.type });\n const respData = await onUploadImage?.(file);\n return Promise.resolve(respData as string);\n } catch (error: any) {\n return Promise.reject(error?.message || '图片上传异常');\n }\n },\n plugins:\n 'lists link image advlist charmap preview fullscreen code table help codesample ' +\n (props.init?.plugins_append || ''),\n toolbar:\n 'undo redo fullscreen preview | bold italic underline strikethrough |' +\n 'fontsize blocks |' +\n 'forecolor backcolor removeformat |' +\n 'numlist bullist advlist |' +\n 'alignleft aligncenter alignright alignjustify |' +\n 'outdent indent |' +\n 'hr image link code codesample |' +\n (props.init?.toolbar_append || ''),\n font_size_formats: '8px 10px 12px 14px 16px 18px 24px 36px 48px',\n ...props.init,\n content_style: `img {max-width:100%;} table{width:100%} ${props.init?.content_style}`,\n convert_urls: false,\n }}\n />\n <Preview\n visible={!!previewUrl}\n url={previewUrl}\n close={() => {\n setPreviewUrl('');\n }}\n />\n </div>\n );\n};\n\n/**\n * undo redo\n * codesample\n * fontselect fontsizeselect formatselect\n * image media link anchor\n * preview save print\n * emoticons(表情)\n */\n"],"names":["Preview","props","visible","url","fbaHooks","useEffectCustom","dynamicNode","append","content","_jsx","_PlusCircleOutlined","onClick","close","className","twoToneColor","remove","_Fragment","Fragment","children","Image","style","left","preview","maskStyle","backgroundColor","src","onVisibleChange","RichTextEditor","_props$init","_props$init3","_props$init4","_props$init5","onUploadImage","onChange","otherProps","_objectWithoutPropertiesLoose","_excluded","editorRef","useRef","_useState","useState","previewUrl","setPreviewUrl","imgRatio","init","img_ratio","min","max","ratio","useKeyPress","event","type","key","_editorRef$current","isFull","current","editorContainer","classList","contains","_editorRef$current2","editorCommands","execCommand","error","events","onKeyDown","_hooks","useCallbackRef","editor","keyCode","_editorRef$current3","_editorRef$current4","onInit","_","on","e","onFullScreenChange","state","_editor$iframeElement","iframeElement","contentDocument","addEventListener","_event$target","imgPreview","target","onEditorChange","a","tinymceBaseUrl","getImgRatio","width","length","index","element","paste_postprocess","args","nodes","node","nodeName","setAttribute","img","document","createElement","getAttribute","onload","height","paste_preprocess","_plugin","_props$init2","paste_text_limit","byteLen","getStrByteLen","limit","message","_jsxs","_classNames","Editor","_extends","tinymceScriptSrc","promotion","language","paste_data_images","autosave_ask_before_unload","base_url","autoresize_bottom_margin","images_upload_handler","blobInfo","Promise","$return","$error","blob","_file","respData","$Try_5_Catch","reject","$boundEx","file","File","name","resolve","then","$await_6","plugins","plugins_append","toolbar","toolbar_append","font_size_formats","content_style","convert_urls"],"mappings":"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"}
|
|
@@ -5,5 +5,5 @@ import './../rich-text-editor/index.css';
|
|
|
5
5
|
import './../dynamic-node/index.css';
|
|
6
6
|
import './index.css';
|
|
7
7
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
8
|
-
import e from"@ant-design/icons/es/icons/FullscreenOutlined";import{classNames as i}from"@dimjs/utils/cjs/class-names";import{hooks as r}from"@wove/react/cjs/hooks";import{useKeyPress as o}from"ahooks";import{useState as t,useRef as n}from"react";import{fbaHooks as s}from"../fba-hooks/index.js";import{IconWrapper as a}from"../icon-wrapper/index.js";import{RichTextEditor as
|
|
8
|
+
import e from"@ant-design/icons/es/icons/FullscreenOutlined";import{classNames as i}from"@dimjs/utils/cjs/class-names";import{hooks as r}from"@wove/react/cjs/hooks";import{useKeyPress as o}from"ahooks";import{useState as t,useRef as n}from"react";import{fbaHooks as s}from"../fba-hooks/index.js";import{IconWrapper as a}from"../icon-wrapper/index.js";import{RichTextEditor as l}from"../rich-text-editor/index.js";import{jsxs as m,jsx as c}from"react/jsx-runtime";import"../_rollupPluginBabelHelpers-a0769acd.js";import"@dimjs/lang/cjs/is-array";import"../use-responsive-point-21b8c601.js";import"antd";import"@flatbiz/utils";import"@tinymce/tinymce-react";import"@ant-design/icons/es/icons/PlusCircleOutlined";import"../dynamic-node/index.js";import"react-dom/client";import"../dom-4d04aa64.js";var u=function u(d){var p=t(false),f=p[0],v=p[1];var j=n();o((function(){return true}),(function(e){if(e.type==="keyup"&&e.key==="Escape"&&f){v(false)}}),{events:["keydown","keyup"]});var b=r.useCallbackRef((function(){v(!f)}));var y=r.useCallbackRef((function(e,i){j.current=i;d.onInit==null?void 0:d.onInit(i)}));s.useEffectCustom((function(){var e;(e=j.current)==null?void 0:e.editorCommands.execCommand("mceAutoResize")}),[d.value]);return m("div",{className:i("fba-editor-viewer",{"fba-editor-viewer-fixed":f},d.className),style:d.style,children:[d.children,d.fullscreen&&d.value&&c("div",{className:"fba-editor-viewer-icon",children:c(a,{hoverTips:d.fullscreenIconTips,icon:c(e,{}),onClick:b})}),c(l,{value:d.value,onInit:y,imgPreview:true,disabled:true,init:{plugins:"autoresize",menubar:false,toolbar:"",statusbar:false}})]})};export{u as RichTextViewer};
|
|
9
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/rich-text-viewer/rich-text-viewer.tsx"],"sourcesContent":["import { FullscreenOutlined } from '@ant-design/icons';\nimport { classNames } from '@dimjs/utils';\nimport { hooks } from '@wove/react';\nimport { useKeyPress } from 'ahooks';\nimport { CSSProperties, ReactElement, useRef, useState } from 'react';\nimport { Editor as TinyMCEEditor } from 'tinymce';\n\nimport { fbaHooks } from '../fba-hooks';\nimport { IconWrapper } from '../icon-wrapper';\nimport { RichTextEditor } from '../rich-text-editor';\nimport './style.less';\n\ntype RichTextViewerProps = {\n value: string;\n className?: string;\n style?: CSSProperties;\n fullscreen?: boolean;\n onInit?: (editor: TinyMCEEditor) => void;\n children?: ReactElement;\n fullscreenIconTips?: string;\n};\n\n/**\n * 预览 RichTextEditor 生成的富文本数据\n * ```\n * 1. 通过 onInit 属性可获取实例：editor\n * 2. 如果高度发生变更，可执行 editor.execCommand('mceAutoResize');\n *\n * ```\n * @param props\n * @returns\n */\nexport const RichTextViewer = (props: RichTextViewerProps) => {\n const [isFixed, setIsFixed] = useState(false);\n const editorRef = useRef<TinyMCEEditor>();\n\n useKeyPress(\n () => true,\n (event) => {\n if (event.type === 'keyup' && event.key === 'Escape' && isFixed) {\n setIsFixed(false);\n }\n },\n { events: ['keydown', 'keyup'] },\n );\n\n const onChangeFixed = hooks.useCallbackRef(() => {\n setIsFixed(!isFixed);\n });\n const onInit = hooks.useCallbackRef((_, editor: TinyMCEEditor) => {\n editorRef.current = editor;\n props.onInit?.(editor);\n });\n\n fbaHooks.useEffectCustom(() => {\n editorRef.current?.editorCommands.execCommand('mceAutoResize');\n }, [props.value]);\n\n return (\n <div\n className={classNames('fba-editor-viewer', { 'fba-editor-viewer-fixed': isFixed }, props.className)}\n style={props.style}\n >\n {props.children}\n {props.fullscreen && props.value && (\n <div className=\"fba-editor-viewer-icon\">\n <IconWrapper\n hoverTips={props.fullscreenIconTips}\n icon={<FullscreenOutlined />}\n onClick={onChangeFixed}\n />\n </div>\n )}\n <RichTextEditor\n value={props.value}\n onInit={onInit}\n imgPreview\n disabled\n init={{\n plugins: 'autoresize',\n menubar: false,\n toolbar: '',\n statusbar: false,\n }}\n />\n </div>\n );\n};\n"],"names":["RichTextViewer","props","_useState","useState","isFixed","setIsFixed","editorRef","useRef","useKeyPress","event","type","key","events","onChangeFixed","_hooks","useCallbackRef","onInit","_","editor","current","fbaHooks","useEffectCustom","_editorRef$current","editorCommands","execCommand","value","_jsxs","className","_classNames","style","children","fullscreen","_jsx","IconWrapper","hoverTips","fullscreenIconTips","icon","_FullscreenOutlined","onClick","RichTextEditor","imgPreview","disabled","init","plugins","menubar","toolbar","statusbar"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/rich-text-viewer/rich-text-viewer.tsx"],"sourcesContent":["import { FullscreenOutlined } from '@ant-design/icons';\nimport { classNames } from '@dimjs/utils';\nimport { hooks } from '@wove/react';\nimport { useKeyPress } from 'ahooks';\nimport { CSSProperties, ReactElement, useRef, useState } from 'react';\nimport { Editor as TinyMCEEditor } from 'tinymce';\n\nimport { fbaHooks } from '../fba-hooks';\nimport { IconWrapper } from '../icon-wrapper';\nimport { RichTextEditor } from '../rich-text-editor';\nimport './style.less';\n\ntype RichTextViewerProps = {\n value: string;\n className?: string;\n style?: CSSProperties;\n fullscreen?: boolean;\n onInit?: (editor: TinyMCEEditor) => void;\n children?: ReactElement;\n fullscreenIconTips?: string;\n};\n\n/**\n * 预览 RichTextEditor 生成的富文本数据\n * ```\n * 1. 通过 onInit 属性可获取实例：editor\n * 2. 如果高度发生变更，可执行 editor.execCommand('mceAutoResize');\n *\n * ```\n * @param props\n * @returns\n */\nexport const RichTextViewer = (props: RichTextViewerProps) => {\n const [isFixed, setIsFixed] = useState(false);\n const editorRef = useRef<TinyMCEEditor>();\n\n useKeyPress(\n () => true,\n (event) => {\n if (event.type === 'keyup' && event.key === 'Escape' && isFixed) {\n setIsFixed(false);\n }\n },\n { events: ['keydown', 'keyup'] },\n );\n\n const onChangeFixed = hooks.useCallbackRef(() => {\n setIsFixed(!isFixed);\n });\n const onInit = hooks.useCallbackRef((_, editor: TinyMCEEditor) => {\n editorRef.current = editor;\n props.onInit?.(editor);\n });\n\n fbaHooks.useEffectCustom(() => {\n editorRef.current?.editorCommands.execCommand('mceAutoResize');\n }, [props.value]);\n\n return (\n <div\n className={classNames('fba-editor-viewer', { 'fba-editor-viewer-fixed': isFixed }, props.className)}\n style={props.style}\n >\n {props.children}\n {props.fullscreen && props.value && (\n <div className=\"fba-editor-viewer-icon\">\n <IconWrapper\n hoverTips={props.fullscreenIconTips}\n icon={<FullscreenOutlined />}\n onClick={onChangeFixed}\n />\n </div>\n )}\n <RichTextEditor\n value={props.value}\n onInit={onInit}\n imgPreview\n disabled\n init={{\n plugins: 'autoresize',\n menubar: false,\n toolbar: '',\n statusbar: false,\n }}\n />\n </div>\n );\n};\n"],"names":["RichTextViewer","props","_useState","useState","isFixed","setIsFixed","editorRef","useRef","useKeyPress","event","type","key","events","onChangeFixed","_hooks","useCallbackRef","onInit","_","editor","current","fbaHooks","useEffectCustom","_editorRef$current","editorCommands","execCommand","value","_jsxs","className","_classNames","style","children","fullscreen","_jsx","IconWrapper","hoverTips","fullscreenIconTips","icon","_FullscreenOutlined","onClick","RichTextEditor","imgPreview","disabled","init","plugins","menubar","toolbar","statusbar"],"mappings":";+xBAgCaA,EAAiB,SAAjBA,EAAkBC,GAC7B,IAAAC,EAA8BC,EAAS,OAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GAC1B,IAAMI,EAAYC,IAElBC,GACE,WAAA,OAAM,IACN,IAAA,SAACC,GACC,GAAIA,EAAMC,OAAS,SAAWD,EAAME,MAAQ,UAAYP,EAAS,CAC/DC,EAAW,MACb,CACF,GACA,CAAEO,OAAQ,CAAC,UAAW,WAGxB,IAAMC,EAAgBC,EAAMC,gBAAe,WACzCV,GAAYD,EACd,IACA,IAAMY,EAASF,EAAMC,gBAAe,SAACE,EAAGC,GACtCZ,EAAUa,QAAUD,EACpBjB,EAAMe,QAANf,UAAAA,EAAAA,EAAMe,OAASE,EACjB,IAEAE,EAASC,iBAAgB,WAAM,IAAAC,GAC7BA,EAAAhB,EAAUa,UAAO,UAAA,EAAjBG,EAAmBC,eAAeC,YAAY,gBAChD,GAAG,CAACvB,EAAMwB,QAEV,OACEC,EAAA,MAAA,CACEC,UAAWC,EAAW,oBAAqB,CAAE,0BAA2BxB,GAAWH,EAAM0B,WACzFE,MAAO5B,EAAM4B,MAAMC,SAElB7B,CAAAA,EAAM6B,SACN7B,EAAM8B,YAAc9B,EAAMwB,OACzBO,EAAA,MAAA,CAAKL,UAAU,yBAAwBG,SACrCE,EAACC,EAAW,CACVC,UAAWjC,EAAMkC,mBACjBC,KAAMJ,EAAAK,MACNC,QAASzB,MAIfmB,EAACO,EAAc,CACbd,MAAOxB,EAAMwB,MACbT,OAAQA,EACRwB,WAAU,KACVC,SAAQ,KACRC,KAAM,CACJC,QAAS,aACTC,QAAS,MACTC,QAAS,GACTC,UAAW,WAKrB"}
|
package/index.d.ts
CHANGED
|
@@ -2638,13 +2638,26 @@ export interface RichTextEditorProps extends Omit<IAllProps, "onChange" | "init"
|
|
|
2638
2638
|
init?: IAllProps["init"] & {
|
|
2639
2639
|
/**
|
|
2640
2640
|
* 通过粘贴图片创建的img标签，显示压缩比例，此处min、max是和指图片宽度
|
|
2641
|
+
* ```
|
|
2641
2642
|
* 1. 默认值：[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]
|
|
2643
|
+
* ```
|
|
2642
2644
|
*/
|
|
2643
2645
|
img_ratio?: {
|
|
2644
2646
|
min: number;
|
|
2645
2647
|
max?: number;
|
|
2646
2648
|
ratio: number;
|
|
2647
2649
|
}[];
|
|
2650
|
+
/**
|
|
2651
|
+
* 粘贴文本大小限制
|
|
2652
|
+
* ```
|
|
2653
|
+
* 1. limit 限制大小，单位KB，例如限制2M，值为2*1024
|
|
2654
|
+
* 2. 限制提示文案
|
|
2655
|
+
* ```
|
|
2656
|
+
*/
|
|
2657
|
+
paste_text_limit?: {
|
|
2658
|
+
limit: number;
|
|
2659
|
+
message: string;
|
|
2660
|
+
};
|
|
2648
2661
|
/** 插件添加；自定义plugins后失效 */
|
|
2649
2662
|
plugins_append?: string;
|
|
2650
2663
|
/** 工具栏添加；自定义toolbar后失效 */
|