@flatbiz/antd
Version:
265 lines (258 loc) • 11.2 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { _ as _objectWithoutProperties, a as _slicedToArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BspM60Sw.js';
import { classNames } from '@dimjs/utils/class-names/class-names';
import { Fragment as Fragment$1, useRef, useState } from 'react';
import { useKeyPress, useMemoizedFn } from 'ahooks';
import { Image, message } from 'antd';
import { getStrByteLen } from '@flatbiz/utils';
import { Editor } from '@tinymce/tinymce-react';
import _PlusCircleOutlined from '@ant-design/icons/es/icons/PlusCircleOutlined.js';
import { d as dynamicNode } from './dynamic-node-B_An5owN.js';
import { fbaHooks } from './fba-hooks/index.js';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
var Preview = function Preview(props) {
var visible = props.visible,
url = props.url;
fbaHooks.useEffectCustom(function () {
if (visible) {
dynamicNode.append({
content: /*#__PURE__*/jsx(_PlusCircleOutlined, {
onClick: props.close,
className: "preview-image-popup-close",
twoToneColor: "#1890ff"
})
});
} else {
dynamicNode.remove();
}
}, [visible]);
if (!url) return /*#__PURE__*/jsx(Fragment, {});
return /*#__PURE__*/jsx(Fragment$1, {
children: /*#__PURE__*/jsx(Image, {
style: {
left: '100px'
},
preview: {
className: 'preview-image-popup',
maskStyle: {
backgroundColor: 'rgba(0,0,0,0.85)'
},
visible: visible,
src: url,
onVisibleChange: function onVisibleChange() {
props.close();
}
}
}, url)
});
};
var _excluded = ["onUploadImage", "onChange", "height", "className"];
/**
* 富文本编辑器，配置参考tinymce https://www.tiny.cloud/docs/tinymce/6
* @param props
* @returns
* ```
* 1. 如果需要粘贴上传图片服务，需要提供 onUploadImage 上传图片接口
* 2. 获取富文本实例，通过onInit(_, editor)函数获取
* 3. 预览富文本数据，使用 RichTextViewer 组件
* 4. 添加其他插件使用方式，配置 init.plugins_append、init.toolbar_append
* <RichTextEditor init={{ plugins_append: 'codesample', toolbar_append: 'codesample' }} />
* 5. 可通过设置 init.plugins、init.toolbar 完全自定义插件、工具栏
* 6. 其他插件
* emoticons 表情插件
* 7. 可通过设置 init.img_ratio 设置通过粘贴上传的图片压缩显示比例
* 默认比例：[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]
* ```
*/
var RichTextEditor = function RichTextEditor(props) {
var _props$init, _props$init3, _props$init4, _props$init5;
var onUploadImage = props.onUploadImage,
onChange = props.onChange,
height = props.height,
className = props.className,
otherProps = _objectWithoutProperties(props, _excluded);
var editorRef = useRef(null);
var _useState = useState(''),
_useState2 = _slicedToArray(_useState, 2),
previewUrl = _useState2[0],
setPreviewUrl = _useState2[1];
var imgRatio = ((_props$init = props.init) === null || _props$init === void 0 ? void 0 : _props$init.img_ratio) || [{
min: 0,
max: 1000,
ratio: 0.5
}, {
min: 1000,
ratio: 0.3
}];
// const varStyleString = useMemo(() => {
// const merge = { ...defaultVarStyle, ...props.varStyle };
// let varStyleString = '';
// Object.keys(merge).map((key) => {
// varStyleString += `${key}:${merge[key]};`;
// });
// return varStyleString;
// }, [props.varStyle]);
useKeyPress(function () {
return true;
}, function (event) {
try {
if (event.type === 'keyup' && event.key === 'Escape') {
var _editorRef$current;
var isFull = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.editorContainer.classList.contains('tox-fullscreen');
if (isFull) {
var _editorRef$current2;
(_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 || _editorRef$current2.editorCommands.execCommand('mceFullScreen');
}
}
} catch (_error) {
// 异常不处理
}
}, {
events: ['keydown', 'keyup']
});
var onKeyDown = useMemoizedFn(function (event, editor) {
var _props$onKeyDown;
try {
if (event.keyCode == 27) {
var _editorRef$current3;
var isFull = (_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 ? void 0 : _editorRef$current3.editorContainer.classList.contains('tox-fullscreen');
if (isFull) {
var _editorRef$current4;
(_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 || _editorRef$current4.editorCommands.execCommand('mceFullScreen');
}
}
} catch (_error) {
// 异常不处理
}
(_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, event, editor);
});
var onInit = useMemoizedFn(function (_, editor) {
var _otherProps$onInit;
editorRef.current = editor;
editor.on('FullscreenStateChanged', function (e) {
var _props$onFullScreenCh;
(_props$onFullScreenCh = props.onFullScreenChange) === null || _props$onFullScreenCh === void 0 || _props$onFullScreenCh.call(props, e.state);
});
try {
var _editor$iframeElement;
(_editor$iframeElement = editor.iframeElement) === null || _editor$iframeElement === void 0 || (_editor$iframeElement = _editor$iframeElement.contentDocument) === null || _editor$iframeElement === void 0 || _editor$iframeElement.addEventListener('click', function (event) {
var _event$target;
if (props.imgPreview && ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target['tagName']) === 'IMG') {
setPreviewUrl(event.target['src']);
}
}, true);
} catch (_error) {
//
}
(_otherProps$onInit = otherProps.onInit) === null || _otherProps$onInit === void 0 || _otherProps$onInit.call(otherProps, _, editor);
});
var onEditorChange = useMemoizedFn(function (a, editor) {
var _otherProps$onEditorC;
editorRef.current = editor;
(_otherProps$onEditorC = otherProps.onEditorChange) === null || _otherProps$onEditorC === void 0 || _otherProps$onEditorC.call(otherProps, a, editor);
onChange === null || onChange === void 0 || onChange(a);
});
var tinymceBaseUrl = 'https://file.40017.cn/tcsk/tinymce@6.4.1';
var getImgRatio = function getImgRatio(width) {
if (imgRatio.length === 0) return 1;
for (var index = 0; index < imgRatio.length; index++) {
var element = imgRatio[index];
if (element.max) {
if (width >= element.min && width <= element.max) return element.ratio;
} else {
if (width >= element.min) return element.ratio;
}
}
return 1;
};
var paste_postprocess = useMemoizedFn(function (editor, args) {
try {
var nodes = args.node.children || [];
if (nodes.length === 1 && nodes[0].nodeName === 'IMG') {
nodes[0].setAttribute('style', "display:none");
var img = document.createElement('img');
img.src = nodes[0].getAttribute('src');
img.onload = function () {
var ratio = getImgRatio(img.width);
editor.execCommand('mceInsertContent', true, "<img src=\"".concat(img.src, "\" width=\"").concat(img.width * ratio, "\" height=\"").concat(img.height * ratio, "\" />"));
};
}
} catch (_error) {
//
}
});
var paste_preprocess = useMemoizedFn(function (_plugin, args) {
var _props$init2;
var paste_text_limit = (_props$init2 = props.init) === null || _props$init2 === void 0 ? void 0 : _props$init2.paste_text_limit;
if (paste_text_limit) {
var byteLen = getStrByteLen(args.content);
if (byteLen > 1024 * paste_text_limit.limit) {
void message.error(paste_text_limit.message);
args.content = '';
}
}
});
return /*#__PURE__*/jsxs("div", {
className: classNames('v-editor-wrapper', className),
children: [/*#__PURE__*/jsx(Editor, _objectSpread2(_objectSpread2({
tinymceScriptSrc: "".concat(tinymceBaseUrl, "/tinymce.min.js")
}, otherProps), {}, {
onInit: onInit,
onKeyDown: onKeyDown,
onEditorChange: onEditorChange,
init: _objectSpread2(_objectSpread2({
promotion: false,
language: 'zh-Hans',
height: height,
paste_data_images: onUploadImage ? true : false,
paste_postprocess: paste_postprocess,
paste_preprocess: paste_preprocess,
autosave_ask_before_unload: false,
base_url: tinymceBaseUrl,
autoresize_bottom_margin: 0,
images_upload_handler: function images_upload_handler(blobInfo) {
return new Promise(function ($return, $error) {
var blob, file, respData;
var $Try_5_Catch = function (error) {
try {
return $return(Promise.reject((error === null || error === void 0 ? void 0 : error.message) || '图片上传异常'));
} catch ($boundEx) {
return $error($boundEx);
}
};
try {
blob = blobInfo.blob();
file = new File([blob], blob['name'], {
type: blob.type
});
return Promise.resolve(onUploadImage === null || onUploadImage === void 0 ? void 0 : onUploadImage(file)).then(function ($await_6) {
try {
respData = $await_6;
return $return(Promise.resolve(respData));
} catch ($boundEx) {
return $Try_5_Catch($boundEx);
}
}, $Try_5_Catch);
} catch (error) {
$Try_5_Catch(error);
}
});
},
plugins: 'lists link image advlist charmap preview fullscreen code table help codesample ' + (((_props$init3 = props.init) === null || _props$init3 === void 0 ? void 0 : _props$init3.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 |' + (((_props$init4 = props.init) === null || _props$init4 === void 0 ? void 0 : _props$init4.toolbar_append) || ''),
font_size_formats: '8px 10px 12px 14px 16px 18px 24px 36px 48px'
}, props.init), {}, {
content_style: "img {max-width:100%;} table{width:100%} ".concat((_props$init5 = props.init) === null || _props$init5 === void 0 ? void 0 : _props$init5.content_style),
convert_urls: false
})
})), /*#__PURE__*/jsx(Preview, {
visible: !!previewUrl,
url: previewUrl,
close: function close() {
setPreviewUrl('');
}
})]
});
};
export { RichTextEditor as R };
//# sourceMappingURL=rich-text-editor-k8SgoKVU.js.map