@chenyomi/leafer-htmltext-editor 1.0.0

package/src/fonts/utils.ts

@@ -0,0 +1,232 @@
+const FONT_CSS_TAG = "data-fonts"
+const FONT_CSS_TAG_BASE64 = "base64-fonts"
+
+export async function fetchFontAsBase64(url: string): Promise<string> {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch font from ${url}`);
+    }
+    // 获取文件类型
+    const contentType = response.headers.get('Content-Type');
+    let mimeType: string;
+
+    // 根据 Content-Type 设置 MIME 类型
+    if (contentType?.includes('font/woff2')) {
+        mimeType = 'font/woff2';
+    } else if (contentType?.includes('font/woff')) {
+        mimeType = 'font/woff';
+    } else if (contentType?.includes('font/ttf') || contentType?.includes('font/sfnt')) {
+        mimeType = 'font/ttf';
+    } else if (contentType?.includes('application/octet-stream')) {
+        // 如果 Content-Type 是通用的二进制流，尝试从文件扩展名推断类型
+        const extension = url.split('.').pop()?.toLowerCase();
+        if (extension === 'woff2') {
+            mimeType = 'font/woff2';
+        } else if (extension === 'woff') {
+            mimeType = 'font/woff';
+        } else if (extension === 'ttf') {
+            mimeType = 'font/ttf';
+        } else {
+            throw new Error(`Unsupported font file type: ${extension}`);
+        }
+    } else {
+        throw new Error(`Unsupported Content-Type: ${contentType}`);
+    }
+
+    // 将文件转换为 Base64
+    const arrayBuffer = await response.arrayBuffer();
+    const base64String = arrayBufferToBase64(arrayBuffer);
+
+    // 返回 data: URL
+    return `data:${mimeType};charset=utf-8;base64,${base64String}`;
+}
+
+function arrayBufferToBase64(buffer: ArrayBuffer): string {
+    let binary = '';
+    const bytes = new Uint8Array(buffer);
+    const len = bytes.byteLength;
+    for (let i = 0; i < len; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+}
+
+/**
+ * 批量添加自定义字体样式
+ * @param fontList
+ */
+export function addCustomFonts(fontList: any = []) {
+    let styleTag = document.createElement('style');
+    styleTag.setAttribute(FONT_CSS_TAG, 'true');
+    let fontRules = fontList.map((font: any) => `@font-face {
+        font-family: "${font.name}";
+        src: local("${font.name}"), url("${font.download}")
+    }`).join('\n');
+    styleTag.textContent = fontRules;
+    document.head.appendChild(styleTag);
+}
+
+/**
+ * 获取自定义字体样式
+ */
+export function getCustomFontsStyle() {
+    const styleTag = document.querySelector('style[data-fonts]');
+    return styleTag?.textContent || '';
+}
+
+/**
+ * 添加单个自定义字体样式
+ * @param font
+ */
+export function addCustomFont(font: any) {
+    let styleTag = document.querySelector('style[data-fonts]') as HTMLStyleElement | null;
+    // 如果不存在样式标签，则创建一个新的style标签
+    if (!styleTag) {
+        styleTag = document.createElement('style');
+        styleTag.setAttribute(FONT_CSS_TAG, 'true');
+        document.head.appendChild(styleTag);
+    }
+    
+    if (!styleTag.sheet) return;
+    
+    let existingFonts: string[] = [];
+    existingFonts = Array.from(styleTag.sheet.cssRules).map((rule: CSSRule) => {
+        const match = rule.cssText.match(/font-family: "([^"]+)"/);
+        return match ? match[1] : null;
+    }).filter((font): font is string => font !== null);
+
+    // 判断要添加的字体是否已经存在于样式表中
+    if (!existingFonts.includes(font.name)) {
+        // 创建新的 @font-face 规则
+        const newFontRule = `@font-face {
+          font-family: "${font.name}";
+          src: url("${font.download}");
+        }`;
+
+        // 插入新的 @font-face 规则到样式表中
+        try {
+            styleTag.sheet.insertRule(newFontRule, styleTag.sheet.cssRules.length);
+        } catch (e) {
+            console.error('Failed to insert font rule:', e);
+        }
+    }
+}
+
+/**
+ * 批量加载字体（要在生成完字体css后再调用次方法执行）
+ * @param fontNameList 字体名称
+ */
+export async function batchLoadFont(fontNameList: any = []) {
+    // FontFaceObserver 需要额外安装，这里注释掉
+    // 可以使用浏览器原生的 document.fonts API
+    try {
+        for (const fontFamily of fontNameList) {
+            await document.fonts.load(`16px ${fontFamily}`);
+        }
+    } catch (e) {
+        console.warn('Font loading failed:', e);
+    }
+}
+
+function getFontUrlFromCSS(selectors: string, fontFamilyName: string): string | null {
+    // 获取所有 <style> 标签
+    const styleTags = document.querySelectorAll(selectors);
+    
+    for (let i = 0; i < styleTags.length; i++) {
+        const styleTag = styleTags[i];
+        // 获取 CSS 内容
+        const cssText = styleTag.textContent || '';
+
+        // 使用正则表达式匹配 @font-face 规则
+        const fontFaceRules = cssText.match(/@font-face\s*\{[^}]+\}/g);
+
+        if (fontFaceRules) {
+            for (const rule of fontFaceRules) {
+                // 提取 font-family
+                const fontFamilyMatch = rule.match(/font-family:\s*(["'])(.*?)\1/);
+                if (fontFamilyMatch && fontFamilyMatch[2] === fontFamilyName) {
+                    // 提取 src
+                    const srcMatch = rule.match(/src:\s*url\((["'])(.*?)\1\)/);
+                    if (srcMatch) {
+                        return srcMatch[2]; // 返回字体文件 URL
+                    } else {
+                        const srcMatch2 = rule.match(/src:\s*(?:local\([^)]+\)\s*,\s*)?url\((["'])(.*?)\1\)/);
+                        if (srcMatch2) {
+                            return srcMatch2[2];
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    return null; // 未找到匹配的字体
+}
+
+/**
+ * 添加单个自定义字体样式（Base64格式）
+ * @param font
+ */
+export async function addCustomFontBase64(font: any) {
+    const fontUrl = getFontUrlFromCSS(`style[${FONT_CSS_TAG}]`, font);
+    if (!fontUrl) {
+        console.warn('Font URL not found for:', font);
+        return;
+    }
+    
+    console.log('fontUrl=', fontUrl);
+    let styleTag = document.querySelector(`style[${FONT_CSS_TAG_BASE64}]`) as HTMLStyleElement | null;
+    // 如果不存在样式标签，则创建一个新的style标签
+    if (!styleTag) {
+        styleTag = document.createElement('style');
+        styleTag.setAttribute(FONT_CSS_TAG_BASE64, 'true');
+        document.head.appendChild(styleTag);
+    }
+
+    // 确保样式标签已经被添加到文档中
+    if (!styleTag.sheet) {
+        await new Promise(resolve => setTimeout(resolve, 10)); // 等待样式标签被加载
+    }
+
+    if (!styleTag.sheet) return;
+
+    let existingFonts = Array.from(styleTag.sheet.cssRules).map((rule: CSSRule) => {
+        const match = rule.cssText.match(/font-family: "([^"]+)"/);
+        return match ? match[1] : null;
+    }).filter((font): font is string => font !== null);
+    
+    // 判断要添加的字体是否已经存在于样式表中
+    if (!existingFonts.includes(font)) {
+        const base64Url = await fetchFontAsBase64(fontUrl);
+        // 创建新的 @font-face 规则
+        const newFontRule = `@font-face {
+          font-family: "${font}";
+          src: local("${font}"), url("${base64Url}");
+        }`;
+
+        // 插入新的 @font-face 规则到样式表中
+        try {
+            styleTag.sheet.insertRule(newFontRule, styleTag.sheet.cssRules.length);
+            styleTag.textContent += newFontRule;
+        } catch (e) {
+            console.error('Failed to insert font rule:', e);
+        }
+    }
+}
+
+/**
+ * 获取自定义字体样式
+ */
+export function getBase64CustomFontsStyle() {
+    const styleTag = document.querySelector(`style[${FONT_CSS_TAG_BASE64}]`);
+    return styleTag?.textContent || '';
+}
+
+/**
+ * 加载单个字体并转换为 Base64 格式
+ * @param font 字体名称
+ * @returns Promise<void>
+ */
+export async function loadFont(font: string): Promise<void> {
+    await addCustomFontBase64(font);
+}

package/src/index.ts

@@ -0,0 +1,92 @@
+import { TextEditor } from "./TextEditor";
+export { TextEditor } from "./TextEditor";
+import "./TextEditTool";
+import { Plugin } from "@leafer-ui/core";
+import { Delta } from "quill";
+import Quill from "quill";
+import "quill/dist/quill.core.css";
+
+// 导出工具函数
+export { updataHtmlText, setHTMLText } from "./utils";
+export { fontManager, defaultFonts, FontManager } from "./fonts/font";
+
+Plugin.add("leafer-htmltext-editor", "editor");
+
+export function initTextEditorQuill(container?: HTMLElement) {
+  const textInner = document.getElementById("textInnerEditor");
+  if (!textInner) {
+    const el = document.createElement("div");
+    el.id = "textInnerEditor";
+    el.style.position = "fixed";
+    el.style.transformOrigin = "left top";
+    el.style.overflowWrap = "break-word";
+    el.style.wordBreak = "break-all";
+    el.style.visibility = "hidden";
+    document.body.appendChild(el);
+  }
+
+  TextEditor.quill = new Quill("#textInnerEditor", {
+    theme: null as any,
+    modules: {
+      toolbar: false,
+      keyboard: {
+        bindings: {
+          enter: {
+            key: "Enter",
+            handler: (range: any, context: any) => {
+              const [line] = TextEditor.quill.getLine(range.index);
+
+              // 使用 Quill.import 获取 bubbleFormats
+              const BlockBlot = Quill.import("blots/block");
+              if (!BlockBlot || !(BlockBlot as any).bubbleFormats) return;
+              const lineFormats = (BlockBlot as any).bubbleFormats(line);
+
+              const delta = new Delta()
+                .retain(range.index)
+                .delete(range.length)
+                .insert("\n", lineFormats);
+
+              TextEditor.quill.updateContents(delta, Quill.sources.USER);
+              TextEditor.quill.setSelection(
+                range.index + 1,
+                Quill.sources.SILENT,
+              );
+              return false;
+            },
+          },
+        },
+      },
+    },
+  });
+  
+  const FontAttributor: any = Quill.import("attributors/class/font");
+  FontAttributor.whitelist = [
+    "Roboto",
+    "RobotoMono",
+    "Inter",
+    "OpenSans",
+    "Montserrat",
+    "RobotoCondensed",
+    "Arimo",
+    "NotoSans",
+    "NotoSansSymbols",
+    "Merriweather",
+    "PlayfairDisplay",
+    "NotoSerif",
+    "Lato",
+    "Spectral",
+    "DancingScript",
+    "NotoSansSimplifiedChinese",
+    "NotoSerifSimplifiedChinese",
+    "NotoSansTraditionalChinese",
+    "NotoSansHongKong",
+    "NotoSerifTraditionalChinese",
+    "NotoSerifHongKong",
+    "NotoSansJapanese",
+    "NotoSansKorean",
+    "Poppins",
+  ];
+  Quill.register(FontAttributor, true);
+  
+  return TextEditor.quill;
+}

package/src/utils.ts

@@ -0,0 +1,331 @@
+import { TextEditor } from './TextEditor';
+
+// 获取编辑器和quill实例的辅助函数
+function getEditorContext() {
+  const quill = TextEditor.quill;
+  return { quill };
+}
+
+// 更新text样式
+export const updataHtmlText = async (e?: any, base64font?: any, fontObj?: any) => {
+  const { scaleX, scaleY } = e.worldTransform;
+  const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+  const dom: HTMLElement | null = document.querySelector('#textInnerEditor');
+  
+  if (dom && e.data.textData?.fontFamily) {
+    dom.style.fontFamily = e.data.textData.fontFamily;
+  }
+  if (dom && e.data.textData?.fontSize) {
+    dom.style.fontSize = `${e.data.textData.fontSize * zoomScale}px`;
+  }
+  if (dom && e.data.textData?.lineHeight) {
+    dom.style.lineHeight = e.data.textData.lineHeight;
+  }
+  if (dom && e.data.textData?.letterSpacing) {
+    dom.style.letterSpacing = `${e.data.textData.letterSpacing}px`;
+  }
+  if (dom && e.data.textData?.textShadow) {
+    dom.style.textShadow = e.data.textData.textShadow;
+  } else if (dom) {
+    dom.style.textShadow = 'none';
+  }
+  if (dom && e.data.textData?.alignContent) {
+    const qlEditor: any = dom.querySelector('.ql-editor');
+    if (qlEditor) {
+      qlEditor.style.alignContent = e.data.textData.alignContent;
+    }
+  }
+  
+  const { quill } = getEditorContext();
+  if (!quill) return;
+
+  // 如果是空的就把text置空
+  const html = quill.getSemanticHTML();
+  if (html === '<p></p>') {
+    if (e.text.includes('<style>@font-face')) {
+      e.text = e.text.split('</style>')[0] + '</style>';
+    } else {
+      e.text = '';
+    }
+    return;
+  }
+  
+  if (e.text.includes('<style>@font-face')) {
+    // text已经加载过字体
+    const style = e.text.split('</style>')[0];
+    if (fontObj && !style.includes(fontObj.code)) {
+      // 在字体style标签检索是否有当前字体 没有就添加字体style
+      const addStyle = `@font-face {font-family: ${fontObj.code};src: url(${base64font}) format('woff2') } .ql-font-${fontObj?.code?.replace(/\s+/g, '')} {font-family: ${fontObj.name};}`;
+      e.text =
+        style +
+        addStyle +
+        '</style>' +
+        addFontSizeToP(
+          e,
+          html,
+          e.data.textData.fontSize,
+          e.data.textData.lineHeight,
+          e.data.textData.letterSpacing,
+          e.data.textData.textShadow,
+          e.data.textData?.alignContent
+        );
+    } else {
+      // 样式当前字体已经存在
+      e.text =
+        style +
+        '</style>' +
+        addFontSizeToP(
+          e,
+          html,
+          e.data.textData.fontSize,
+          e.data.textData.lineHeight,
+          e.data.textData.letterSpacing,
+          e.data.textData.textShadow,
+          e.data.textData?.alignContent
+        );
+    }
+  } else if (base64font && fontObj) {
+    // 未加载过字体初次添加字体 存在base64font && fontObj才触发
+    const style = `<style>@font-face {font-family: ${e.data.textData.fontFamily.split(',')[0]};src: url(${base64font}) format('woff2') } .ql-font-${fontObj?.code?.replace(/\s+/g, '')} {font-family: ${fontObj.name};}</style>`;
+    e.text =
+      style +
+      addFontSizeToP(
+        e,
+        html,
+        e.data.textData.fontSize,
+        e.data.textData.lineHeight,
+        e.data.textData.letterSpacing,
+        e.data.textData.textShadow,
+        e.data.textData?.alignContent
+      );
+  } else {
+    // text没有包含字体就不加字体style
+    e.text = addFontSizeToP(
+      e,
+      html,
+      e.data.textData.fontSize,
+      e.data.textData.lineHeight,
+      e.data.textData.letterSpacing,
+      e.data.textData.textShadow,
+      e.data.textData?.alignContent
+    );
+  }
+};
+
+const addFontSizeToP = (
+  e: any,
+  html: any,
+  fontSize = 16,
+  lineHeight = '1.5',
+  letterSpacing = '0',
+  textShadow = 'none',
+  alignContent = 'start'
+) => {
+  const { quill } = getEditorContext();
+  if (!quill) return html;
+
+  const { scaleX, scaleY } = e.worldTransform;
+  const zoomScale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+  const wrapper = document.createElement('div');
+  wrapper.innerHTML = html;
+  
+  // 添加的样式 用于HTMLText渲染
+  const wrapperStyle: any = {
+    fontSize: `${fontSize}px`,
+    lineHeight,
+    letterSpacing: `${letterSpacing}px`,
+    textShadow
+  };
+  
+  wrapper.querySelectorAll('p,ol,ul').forEach((p: any) => {
+    Object.assign(p.style, wrapperStyle);
+  });
+
+  // 这个上下标还是要控制一下尺寸 因为html和canvas规范不一样 所以这里要控制一下
+  let str = wrapper.innerHTML;
+  
+  // 排查如果有回车换行的加上一个字符
+  if (/<p\b[^>]*><\/p>/.test(str)) {
+    str = str.replace(/<p\b([^>]*)><\/p>/g, '<p$1>&nbsp;</p>');
+  }
+  
+  let height;
+  const div: any = document.querySelector('#textInnerEditor');
+
+  // 获取包含自动换行的实际内容高度
+  const actualHeight = Number((quill.scroll.domNode.scrollHeight / zoomScale).toFixed(0));
+  const actualWidth = Number((quill.scroll.domNode.scrollWidth / zoomScale).toFixed(0));
+  
+  if (['center', 'end'].includes(e.data.textData.alignContent)) {
+    if (e.parent.height < actualHeight) {
+      e.data.textData.alignContent = 'start';
+      height = (actualHeight || e.__layout.boxBounds.height) + 'px';
+    } else {
+      height = `${e.parent.height}px`;
+    }
+  } else {
+    if (e.parent.height < actualHeight) {
+      height = (actualHeight || e.__layout.boxBounds.height) + 'px';
+    } else {
+      height = `${e.parent.height}px`;
+    }
+  }
+
+  // 水平居中相关样式内嵌
+  const style = `<style>sub,sup{font-size:63%;}.ql-ui{position:absolute}ol,ul{counter-reset:list-0;padding-left:1.5em;margin:0}ol>li,ul>li{counter-increment:list-0;list-style-type:none;position:relative;padding-left:0;margin:0}ol>li::before{content:counter(list-0,decimal) '. ';position:absolute;left:-1.5em;width:1.2em;text-align:right}ul>li::before{content:'\\u2022';position:absolute;left:-1.5em;width:1.2em;text-align:right}li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-align-center{text-align:center}.ql-align-right{text-align:right}.ql-align-left{text-align:left}.ql-align-justify{text-align:justify}</style>`;
+  
+  let divBox = '';
+  if (e.parent.children[0].tag.includes('Shape')) {
+    divBox =
+      style +
+      `<div style="width: ${e.parent.width}px;height: ${e.parent.height}px;overflow-wrap:break-word;word-break:break-all;align-content:center;">${str}</div>`;
+  } else if (e.data.canChangeBox) {
+    divBox =
+      style +
+      `<div style="width: ${e.parent.width}px;height:${height};overflow-wrap:break-word;word-break:break-all;align-content:${alignContent};">${str}</div>`;
+  } else {
+    // 斜体补偿宽度 控制
+    if (e.data.textData.italic) {
+      divBox = style + str;
+    } else {
+      divBox = style + `<div style="width: ${actualWidth - 10}px">${str}</div>`;
+    }
+  }
+  console.log(divBox, '最终的html内容');
+  return divBox;
+};
+
+export const setHTMLText = (
+  key: string,
+  value?: any,
+  base64font?: any,
+  editor?: any,
+  isInnerEditor?: boolean
+) => {
+  const { quill } = getEditorContext();
+  if (!quill) {
+    console.error('Quill editor not initialized');
+    return;
+  }
+
+  const rangeStr = localStorage.getItem('selection-change');
+  const range = rangeStr ? JSON.parse(rangeStr) : null;
+  
+  if (range && isInnerEditor) {
+    quill.setSelection(range.index, range.length);
+  }
+
+  if (!editor || !editor.dateEdit) {
+    console.warn('Editor context not available for dateEdit');
+    return;
+  }
+
+  editor.dateEdit(async (e: any) => {
+    if (key === 'font') {
+      const fontSimpleName = value.code.replace(/\s+/g, '');
+      if (isInnerEditor) {
+        if (range && range.length) {
+          quill.formatText(range.index, range.length, key, fontSimpleName);
+        } else {
+          quill.formatText(0, quill.getLength() - 1, key, fontSimpleName);
+        }
+        updataHtmlText(e, base64font ?? null, value ?? null);
+      } else {
+        editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+        quill.formatText(0, quill.getLength() - 1, key, fontSimpleName);
+        updataHtmlText(e, base64font ?? null, value ?? null);
+      }
+    } else if (key === 'fontSize') {
+      e.data.textData[key] = value;
+      editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+      updataHtmlText(e, base64font ?? null);
+    } else if (key === 'textCase') {
+      if (isInnerEditor && range) {
+        const text = quill.getText(range.index, range.length);
+        const formats = quill.getFormat(range.index, range.length);
+        quill.deleteText(range.index, range.length);
+        let convertedText;
+        if (text === text.toUpperCase() && /[A-Z]/.test(text)) {
+          convertedText = text.toLowerCase();
+        } else if (text === text.toLowerCase() && /[a-z]/.test(text)) {
+          convertedText = text.toUpperCase();
+        } else {
+          convertedText = text.toUpperCase();
+        }
+
+        quill.insertText(range.index, convertedText, formats);
+        if (range && isInnerEditor) {
+          quill.setSelection(range.index, range.length);
+        }
+      }
+    } else if (key === 'script') {
+      let val = 'sub';
+      if (value === 'super') val = 'sup';
+      if (isInnerEditor) {
+        if (range && range.length) {
+          quill.formatText(range.index, range.length, key, quill.getFormat(range).script === value ? false : val);
+        } else {
+          quill.formatText(0, quill.getLength() - 1, key, quill.getFormat().script === value ? false : val);
+        }
+      } else {
+        editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+        quill.formatText(0, quill.getLength() - 1, key, quill.getFormat().script === value ? false : val);
+        updataHtmlText(e);
+      }
+    } else if (key === 'align') {
+      editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+      if (isInnerEditor) {
+        quill.format(key, value);
+      } else {
+        quill.formatLine(0, quill.getLength(), key, value);
+      }
+      updataHtmlText(e);
+    } else if (key === 'alignContent') {
+      editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+      e.data.textData[key] = value;
+      updataHtmlText(e);
+    } else if (key === 'color') {
+      editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+      quill.formatText(0, quill.getLength() - 1, key, value);
+      if (e.tag === 'HTMLText') {
+        updataHtmlText(e);
+      } else if (e.parent.findOne && e.parent.findOne('HTMLText')) {
+        updataHtmlText(e.parent.findOne('HTMLText'));
+      }
+    } else if (key === 'textShadow') {
+      editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+      e.data.textData[key] = value;
+      updataHtmlText(e);
+    } else if (key === 'list') {
+      editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+      if (isInnerEditor) {
+        const [line] = quill.getLine(range?.index || 0);
+        if (line.formats().list) {
+          quill.format(key, false);
+        } else {
+          quill.format(key, value);
+        }
+      } else {
+        const [line] = quill.getLine(range?.index || 0);
+        if (line.formats().list) {
+          quill.formatLine(0, quill.getLength(), key, false);
+        } else {
+          quill.formatLine(0, quill.getLength(), key, value);
+        }
+      }
+      updataHtmlText(e);
+    } else {
+      if (isInnerEditor) {
+        if (range && range.length) {
+          quill.formatText(range.index, range.length, key, !quill.getFormat(range)[key]);
+        } else {
+          quill.formatText(0, quill.getLength() - 1, key, !quill.getFormat()[key]);
+        }
+      } else {
+        editor.isMultiSelect && editor.isMultiSelect() && quill.clipboard.dangerouslyPasteHTML(e.text);
+        quill.formatText(0, quill.getLength() - 1, key, !quill.getFormat()[key]);
+        updataHtmlText(e);
+      }
+    }
+  }, 1);
+};