@lingxiteam/lcdp-ueditor-react 1.0.4-alpha.1 → 1.0.4-alpha.3

package/es/LcdpUeditor.d.ts

@@ -82,6 +82,7 @@ declare class LcdpUeditor extends React.Component<ILcdpUeditorProps, {}> {
      * 初始化编辑器实例
      */
     initUeditor(): Promise<void>;
+    onSettingChange: (setting: any) => void;
     /**
      * 渲染状态栏
      */

package/es/LcdpUeditor.js

@@ -15,6 +15,7 @@ import UeditorResourceLoader from "./tools/UeditorResourceLoader";
 import debounce from 'lodash/debounce';
 import { filterHtmlNode } from "./tools/filterHtmlNode";
 import ToolBottomBar from "./ToolBottomBar";
+var BOTTOM_STATUS_BAR_CLASS = 'ueditor-bottom-bar-with-status';
 var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
   _inherits(LcdpUeditor, _React$Component);
   var _super = _createSuper(LcdpUeditor);
@@ -80,9 +81,13 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
      * 编辑器配置项
      */
     _defineProperty(_assertThisInitialized(_this), "editorConfig", {});
+    _defineProperty(_assertThisInitialized(_this), "onSettingChange", function (setting) {
+      _this.editorConfig.onSettingChange(setting);
+      _this.onContentChange();
+    });
     var config = props.config,
       prefixCls = props.prefixCls,
-      onFormatChange = props.onFormatChange;
+      onSettingChange = props.onSettingChange;
     _this.containerId = "ueditor_".concat(Date.now(), "_").concat(String(Math.random()).slice(2, 6));
     if (_this.props.ueditorPath) {
       _this.ueditorPath = _this.props.ueditorPath;
@@ -121,7 +126,7 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
       uploadFunction: _this.uploadFunction,
       initialContent: '',
       pasteplain: (config === null || config === void 0 ? void 0 : config.pasteplain) === true,
-      onFormatChange: onFormatChange,
+      onSettingChange: onSettingChange,
       exportFileName: (config === null || config === void 0 ? void 0 : config.exportFileName) || '未命名'
     });
     _this.debounceContentChange = debounce(_this.onContentChange.bind(_assertThisInitialized(_this)), 300);
@@ -154,7 +159,7 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _prevProps$config, _this$props;
-      if (this.state.isReady && (prevProps.defaultFormatSetting !== this.props.defaultFormatSetting || prevProps.bottomTypes !== this.props.bottomTypes || (prevProps === null || prevProps === void 0 || (_prevProps$config = prevProps.config) === null || _prevProps$config === void 0 ? void 0 : _prevProps$config.exportFileName) !== ((_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.config) === null || _this$props === void 0 ? void 0 : _this$props.exportFileName))) {
+      if (this.state.isReady && (prevProps.defaultSetting !== this.props.defaultSetting || prevProps.bottomTypes !== this.props.bottomTypes || (prevProps === null || prevProps === void 0 || (_prevProps$config = prevProps.config) === null || _prevProps$config === void 0 ? void 0 : _prevProps$config.exportFileName) !== ((_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.config) === null || _this$props === void 0 ? void 0 : _this$props.exportFileName))) {
         this.renderStatusBar();
       }
     }
@@ -400,14 +405,14 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
         return _initUeditor.apply(this, arguments);
       }
       return initUeditor;
-    }()
+    }())
+  }, {
+    key: "renderStatusBar",
+    value:
     /**
      * 渲染状态栏
      */
-    )
-  }, {
-    key: "renderStatusBar",
-    value: function renderStatusBar() {
+    function renderStatusBar() {
       var _this$containerRef$cu, _this$props2;
       var _ref4 = this.ueditorInst.ui || {},
         id = _ref4.id;
@@ -416,8 +421,8 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
         ueditorInst: this.ueditorInst,
         prefixCls: this.prefixCls,
         containerRef: this.containerRef,
-        defaultFormatSetting: this.props.defaultFormatSetting,
-        onFormatChange: this.editorConfig.onFormatChange,
+        defaultSetting: this.props.defaultSetting,
+        onSettingChange: this.onSettingChange,
         isReady: this.state.isReady,
         bottomTypes: this.props.bottomTypes,
         exportFileName: (_this$props2 = this.props) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.config) === null || _this$props2 === void 0 ? void 0 : _this$props2.exportFileName
@@ -427,10 +432,10 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
         // 获取底部状态组件
         var statusContainer = bottomBarContainer.querySelector("#".concat(id, "_bottomStatusBar"));
         // 移除底部状态栏的样式
-        bottomBarContainer.classList.remove('ueditor-bottom-bar-with-status');
+        bottomBarContainer.classList.remove(BOTTOM_STATUS_BAR_CLASS);
         // 如果底部状态栏有类型，则添加样式
         if ((_this$props$bottomTyp = this.props.bottomTypes) !== null && _this$props$bottomTyp !== void 0 && _this$props$bottomTyp.length) {
-          bottomBarContainer.classList.add('ueditor-bottom-bar-with-status');
+          bottomBarContainer.classList.add(BOTTOM_STATUS_BAR_CLASS);
           // 如果底部状态栏没有组件，则创建组件
           if (!statusContainer) {
             statusContainer = document.createElement('div');

package/es/ToolBottomBar/FormatModal/index.js

@@ -99,6 +99,33 @@ var defaultSettings = {
   }
 };
 
+// 字体翻译映射 - 从简体中文国际化文件获取
+var fontFamilyTranslations = {
+  default: '默认',
+  songti: '宋体',
+  kaiti: '楷体',
+  heiti: '黑体',
+  lishu: '隶书',
+  yahei: '微软雅黑',
+  fangsong: '仿宋',
+  dengxian: '等线',
+  segoeUI: 'Segoe UI',
+  calibri: 'Calibri',
+  arial: 'arial',
+  timesNewRoman: 'times new roman',
+  pingfangSC: '苹方(简)',
+  pingfangTC: '苹方(繁)',
+  hiraginoSansGB: '冬青黑体',
+  stFangsong: '华文仿宋',
+  sanFrancisco: '旧金山字体',
+  helveticaNeue: 'Helvetica Neue',
+  sourceHanSans: 'Source Han Sans',
+  wenQuanYiMicroHei: '文泉驿微米黑',
+  wenQuanYiZenHei: '文泉驿正黑',
+  dejaVuSans: 'DejaVu Sans',
+  liberationSans: 'Liberation Sans'
+};
+
 // 检测操作系统类型
 var getOSType = function getOSType() {
   var userAgent = navigator.userAgent.toLowerCase();
@@ -159,121 +186,98 @@ var generateFontOptions = function generateFontOptions() {
     value: '系统字体',
     label: '系统字体(推荐)'
   }, {
-    value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Helvetica, Arial, sans-serif",
-    label: '完整系统字体栈'
-  }];
+    value: 'STHeiti, 黑体, SimHei, "Noto Sans CJK SC"',
+    label: fontFamilyTranslations.heiti
+  }, {
+    value: 'STSong, 宋体, SimSun, "Noto Serif CJK SC"',
+    label: fontFamilyTranslations.songti
+  }
+  // { value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Helvetica, Arial, sans-serif", label: '完整系统字体栈' },
+  ];
 
-  // 各平台特定字体
+  // 各平台特定字体 - 参考font.js中的getFontList定义，相同label的字体value已合并
   var platformFonts = {
     windows: [{
-      value: '微软雅黑',
-      label: '微软雅黑'
+      value: '微软雅黑,Microsoft YaHei',
+      label: fontFamilyTranslations.yahei
     }, {
       value: '仿宋',
-      label: '仿宋'
-    }, {
-      value: '黑体',
-      label: '黑体'
+      label: fontFamilyTranslations.fangsong
     }, {
-      value: '楷体',
-      label: '楷体'
+      value: 'STKaiti, 楷体, 楷体_GB2312, SimKai',
+      label: fontFamilyTranslations.kaiti
     }, {
-      value: '宋体',
-      label: '宋体'
+      value: '隶书,SimLi',
+      label: fontFamilyTranslations.lishu
     }, {
       value: '等线',
-      label: '等线'
+      label: fontFamilyTranslations.dengxian
     }, {
       value: 'Segoe UI',
-      label: 'Segoe UI'
+      label: fontFamilyTranslations.segoeUI
     }, {
       value: 'Calibri',
-      label: 'Calibri'
+      label: fontFamilyTranslations.calibri
+    }, {
+      value: 'arial,helvetica,sans-serif',
+      label: fontFamilyTranslations.arial
+    }, {
+      value: 'times new roman',
+      label: fontFamilyTranslations.timesNewRoman
     }],
     mac: [{
+      value: 'STKaiti, 楷体, 楷体_GB2312, SimKai',
+      label: fontFamilyTranslations.kaiti
+    }, {
       value: 'PingFang SC',
-      label: '苹方(简)'
+      label: fontFamilyTranslations.pingfangSC
     }, {
       value: 'PingFang TC',
-      label: '苹方(繁)'
+      label: fontFamilyTranslations.pingfangTC
     }, {
       value: 'Hiragino Sans GB',
-      label: '冬青黑体'
-    }, {
-      value: 'STHeiti',
-      label: '华文黑体'
-    }, {
-      value: 'STKaiti',
-      label: '华文楷体'
-    }, {
-      value: 'STSong',
-      label: '华文宋体'
+      label: fontFamilyTranslations.hiraginoSansGB
     }, {
       value: 'STFangsong',
-      label: '华文仿宋'
+      label: fontFamilyTranslations.stFangsong
     }, {
       value: 'San Francisco',
-      label: '旧金山字体'
+      label: fontFamilyTranslations.sanFrancisco
     }, {
       value: 'Helvetica Neue',
-      label: 'Helvetica Neue'
+      label: fontFamilyTranslations.helveticaNeue
     }],
     linux: [{
-      value: 'Noto Sans CJK SC',
-      label: '思源黑体'
-    }, {
-      value: 'Noto Serif CJK SC',
-      label: '思源宋体'
-    }, {
       value: 'Source Han Sans',
-      label: 'Source Han Sans'
+      label: fontFamilyTranslations.sourceHanSans
     }, {
       value: 'WenQuanYi Micro Hei',
-      label: '文泉驿微米黑'
+      label: fontFamilyTranslations.wenQuanYiMicroHei
     }, {
       value: 'WenQuanYi Zen Hei',
-      label: '文泉驿正黑'
+      label: fontFamilyTranslations.wenQuanYiZenHei
     }, {
       value: 'DejaVu Sans',
-      label: 'DejaVu Sans'
+      label: fontFamilyTranslations.dejaVuSans
     }, {
       value: 'Liberation Sans',
-      label: 'Liberation Sans'
+      label: fontFamilyTranslations.liberationSans
     }]
   };
 
   // 通用Web安全字体
-  var webSafeFonts = [{
-    value: 'Arial',
-    label: 'Arial'
-  }, {
-    value: 'Helvetica',
-    label: 'Helvetica'
-  }, {
-    value: 'Times New Roman',
-    label: 'Times New Roman'
-  }, {
-    value: 'Times',
-    label: 'Times'
-  }, {
-    value: 'Courier New',
-    label: 'Courier New'
-  }, {
-    value: 'Georgia',
-    label: 'Georgia'
-  }, {
-    value: 'Verdana',
-    label: 'Verdana'
-  }, {
-    value: 'sans-serif',
-    label: '系统无衬线字体'
-  }, {
-    value: 'serif',
-    label: '系统衬线字体'
-  }, {
-    value: 'monospace',
-    label: '系统等宽字体'
-  }];
+  // const webSafeFonts = [
+  //   { value: 'Arial', label: 'Arial' },
+  //   { value: 'Helvetica', label: 'Helvetica' },
+  //   { value: 'Times New Roman', label: 'Times New Roman' },
+  //   { value: 'Times', label: 'Times' },
+  //   { value: 'Courier New', label: 'Courier New' },
+  //   { value: 'Georgia', label: 'Georgia' },
+  //   { value: 'Verdana', label: 'Verdana' },
+  //   { value: 'sans-serif', label: '系统无衬线字体' },
+  //   { value: 'serif', label: '系统衬线字体' },
+  //   { value: 'monospace', label: '系统等宽字体' },
+  // ];
 
   // 合并字体列表
   var allFonts = [].concat(baseFonts);
@@ -284,7 +288,7 @@ var generateFontOptions = function generateFontOptions() {
   }
 
   // 添加Web安全字体
-  allFonts.push.apply(allFonts, webSafeFonts);
+  // allFonts.push(...webSafeFonts);
 
   // 启用字体检测，但不阻塞界面
   var availableFonts = allFonts.map(function (font) {

package/es/ToolBottomBar/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { FormatSettings } from '../tools/generateStylesFromSettings';
 import './index.less';
 import { ILcdpUeditorProps } from '../type';
 declare const ToolBottomBar: (props: {
@@ -15,8 +14,8 @@ declare const ToolBottomBar: (props: {
      * 容器引用
      */
     containerRef?: React.RefObject<HTMLDivElement> | undefined;
-    defaultFormatSetting?: FormatSettings | undefined;
-    onFormatChange?: ((val: FormatSettings) => void) | undefined;
+    defaultSetting?: Record<"chineseCount" | "charCount" | "pageWidth" | "formatSetting" | "exportPdf" | "fullScreen" | "copy", any> | undefined;
+    onSettingChange?: ((setting: Partial<Record<Required<ILcdpUeditorProps>['bottomTypes'][number], any>>) => void) | undefined;
     /**
      * 是否准备就绪
      */

package/es/ToolBottomBar/index.js

@@ -20,13 +20,12 @@ var MENU_OPTIONS = {
   a5: 'A5',
   a0: '铺满'
 };
-var STYLE_ID = 'ueditor-custom-styles';
 var ToolBottomBar = function ToolBottomBar(props) {
   var ueditorInst = props.ueditorInst,
     prefixCls = props.prefixCls,
     containerRef = props.containerRef,
-    defaultFormatSetting = props.defaultFormatSetting,
-    onFormatChange = props.onFormatChange,
+    defaultSetting = props.defaultSetting,
+    onSettingChange = props.onSettingChange,
     isReady = props.isReady,
     bottomTypes = props.bottomTypes,
     exportFileName = props.exportFileName;
@@ -54,6 +53,10 @@ var ToolBottomBar = function ToolBottomBar(props) {
     setPageWidth = _useState10[1];
   var timer = useRef(undefined);
   var progressModalRef = useRef(null);
+  var _useState11 = useState(undefined),
+    _useState12 = _slicedToArray(_useState11, 2),
+    formatSetting = _useState12[0],
+    setFormatSetting = _useState12[1];
   var debounceContentChange = debounce(function () {
     try {
       var _plainTxt$match;
@@ -141,34 +144,58 @@ var ToolBottomBar = function ToolBottomBar(props) {
    * @param settings 格式设置
    */
   var handleApply = function handleApply(settings) {
-    var _containerRef$current, _contentDocument;
     var isUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    // 生成样式
-    var cssStyles = generateStylesFromSettings(settings);
-
-    // 触发编辑器视图更新
-    var frame = ueditorInst.frame || (containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector("#".concat(uiId, "_iframeholder > iframe")));
-    if (frame !== null && frame !== void 0 && (_contentDocument = frame.contentDocument) !== null && _contentDocument !== void 0 && _contentDocument.documentElement) {
-      var _contentDocument2;
-      // 查找或创建样式元素
-      var styleEl = frame === null || frame === void 0 || (_contentDocument2 = frame.contentDocument) === null || _contentDocument2 === void 0 ? void 0 : _contentDocument2.getElementById(STYLE_ID);
-      if (!styleEl) {
-        styleEl = document.createElement('style');
-        styleEl.id = STYLE_ID;
-        frame.contentDocument.head.appendChild(styleEl);
+    if (!settings) {
+      return;
+    }
+    setFormatSetting(settings);
+    if (isUpdate) {
+      // 生成样式
+      if (ueditorInst.body) {
+        generateStylesFromSettings(settings, ueditorInst.body);
       }
-      // 设置样式内容
-      styleEl.textContent = cssStyles;
+      onSettingChange === null || onSettingChange === void 0 || onSettingChange({
+        formatSetting: settings,
+        pageWidth: pageWidth
+      });
     }
+  };
+  useEffect(function () {
+    handleApply(defaultSetting === null || defaultSetting === void 0 ? void 0 : defaultSetting.formatSetting, false);
+  }, [defaultSetting === null || defaultSetting === void 0 ? void 0 : defaultSetting.formatSetting]);
+  var handlePageWidthChange = function handlePageWidthChange(key) {
+    var isUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    // 设置编辑器宽度
+    var newClass = "ueditor-rich-status-content-".concat(key);
+    var oldClass = "ueditor-rich-status-content-".concat(pageWidth);
+    if (containerRef !== null && containerRef !== void 0 && containerRef.current) {
+      var frame = containerRef.current.querySelector("#".concat(uiId, "_iframeholder"));
+      var frameContainer = ueditorInst.container || containerRef.current.querySelector("#".concat(uiId));
+      if (frame) {
+        frame.classList.remove(oldClass);
+        frame.classList.add(newClass);
+      }
+      if (frameContainer) {
+        if (key === 'a0') {
+          frameContainer.classList.remove('ueditor-rich-status-not-full');
+        } else {
+          frameContainer.classList.add('ueditor-rich-status-not-full');
+        }
+      }
+    }
+    setPageWidth(key);
     if (isUpdate) {
-      onFormatChange === null || onFormatChange === void 0 || onFormatChange(settings);
+      onSettingChange === null || onSettingChange === void 0 || onSettingChange({
+        pageWidth: key,
+        formatSetting: formatSetting
+      });
     }
   };
   useEffect(function () {
-    if (defaultFormatSetting) {
-      handleApply(defaultFormatSetting, false);
+    if (defaultSetting !== null && defaultSetting !== void 0 && defaultSetting.pageWidth) {
+      handlePageWidthChange(defaultSetting.pageWidth, false);
     }
-  }, [defaultFormatSetting]);
+  }, [defaultSetting === null || defaultSetting === void 0 ? void 0 : defaultSetting.pageWidth]);
   var onProgress = function onProgress(progress, title) {
     var _progressModalRef$cur;
     (_progressModalRef$cur = progressModalRef.current) === null || _progressModalRef$cur === void 0 || _progressModalRef$cur.updateProgress(progress, title);
@@ -200,25 +227,7 @@ var ToolBottomBar = function ToolBottomBar(props) {
     overlay: /*#__PURE__*/React.createElement(Menu, {
       onClick: function onClick(_ref2) {
         var key = _ref2.key;
-        // 设置编辑器宽度
-        var newClass = "ueditor-rich-status-content-".concat(key);
-        var oldClass = "ueditor-rich-status-content-".concat(pageWidth);
-        if (containerRef !== null && containerRef !== void 0 && containerRef.current) {
-          var frame = containerRef.current.querySelector("#".concat(uiId, "_iframeholder"));
-          var frameContainer = ueditorInst.container || containerRef.current.querySelector("#".concat(uiId));
-          if (frame) {
-            frame.classList.remove(oldClass);
-            frame.classList.add(newClass);
-          }
-          if (frameContainer) {
-            if (key === 'a0') {
-              frameContainer.classList.remove('ueditor-rich-status-not-full');
-            } else {
-              frameContainer.classList.add('ueditor-rich-status-not-full');
-            }
-          }
-        }
-        setPageWidth(key);
+        handlePageWidthChange(key);
       }
     }, Object.keys(MENU_OPTIONS).map(function (k) {
       return /*#__PURE__*/React.createElement(Menu.Item, {
@@ -230,7 +239,7 @@ var ToolBottomBar = function ToolBottomBar(props) {
     extraNode: /*#__PURE__*/React.createElement(DownOutlined, null)
   })), (bottomTypes === null || bottomTypes === void 0 ? void 0 : bottomTypes.includes('formatSetting')) && /*#__PURE__*/React.createElement(FormatModal, {
     onApply: handleApply,
-    initialSettings: defaultFormatSetting
+    initialSettings: defaultSetting === null || defaultSetting === void 0 ? void 0 : defaultSetting.formatSetting
   }, getStatusBarItem({
     icon: /*#__PURE__*/React.createElement(SettingOutlined, null),
     content: '格式设置'
@@ -256,7 +265,7 @@ var ToolBottomBar = function ToolBottomBar(props) {
     content: '导出文档',
     onClick: function () {
       var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var _contentDocument3, frame, _contentDocument4;
+        var _contentDocument, frame, _contentDocument2;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -265,12 +274,12 @@ var ToolBottomBar = function ToolBottomBar(props) {
                 break;
               }
               frame = ueditorInst.frame || containerRef.current.querySelector("#".concat(uiId, "_iframeholder > iframe"));
-              if (!(frame !== null && frame !== void 0 && (_contentDocument3 = frame.contentDocument) !== null && _contentDocument3 !== void 0 && _contentDocument3.body)) {
+              if (!(frame !== null && frame !== void 0 && (_contentDocument = frame.contentDocument) !== null && _contentDocument !== void 0 && _contentDocument.body)) {
                 _context.next = 6;
                 break;
               }
               _context.next = 5;
-              return domloadPdf(frame === null || frame === void 0 || (_contentDocument4 = frame.contentDocument) === null || _contentDocument4 === void 0 ? void 0 : _contentDocument4.body, pageWidth || 'a0', exportFileName, onProgress);
+              return domloadPdf(frame === null || frame === void 0 || (_contentDocument2 = frame.contentDocument) === null || _contentDocument2 === void 0 ? void 0 : _contentDocument2.body, pageWidth || 'a0', exportFileName, onProgress);
             case 5:
               onProgress(100, '导出完成');
             case 6:

package/es/tools/generateStylesFromSettings.d.ts

@@ -29,10 +29,24 @@ export interface FormatSettings {
         ol: ListStyle;
     };
 }
+export declare const STYLE_ID = "ueditor-custom-styles";
+export declare const FORMAT_STYLE_TAG = "format-style";
 /**
  * 生成CSS样式内容
+ * 将css设置到元素上
  * @param settings 格式设置
- * @returns CSS样式字符串
  */
-export declare const generateStylesFromSettings: (settings: FormatSettings) => string;
+export declare const generateStylesFromSettings: (settings: FormatSettings, body: HTMLElement) => string;
+/**
+ * 从现有样式标签中提取格式设置
+ * @param body HTML body元素
+ * @returns 格式设置对象，如果未找到样式标签则返回undefined
+ */
+export declare const extractSettingsFromStyles: (body: HTMLElement) => FormatSettings | undefined;
+/**
+ * 设置格式设置
+ * @param body
+ * @param settings
+ */
+export declare const setFormatSettings: (body: HTMLElement, cssStyles: string) => void;
 export {};