build(deps): 新增 CKEditor 与 TinyMCE 依赖

2026-09-11 15:28:18 +08:00
parent 23d85cf8ce
commit 7035c6f378
13 changed files with 3165 additions and 184 deletions
@@ -23,6 +23,47 @@ const statusLabel = computed(() => {

  return documentStatusLabels[props.template.status]
 })
+
+// 预置文书的 contentHtml 是完整 HTML 文档（自带版式样式）；
+// Word 自维护文书存的是编辑器产出的 HTML 片段，需要叠加文书基础渲染样式
+// （表格边框、正文字体等），使导入路径的"裸表格"等语义结构也有合理的文书外观。
+const DOCUMENT_BASE_STYLE = `
+  body {
+    margin: 0;
+    padding: 24px 28px 36px;
+    color: #1c2b33;
+    font-family: 'SimSun', 'Songti SC', 'STSong', serif;
+    font-size: 14px;
+    line-height: 1.85;
+    background: #fff;
+  }
+  img {
+    max-width: 100%;
+  }
+  table {
+    width: 100%;
+    margin: 8px 0;
+    border-collapse: collapse;
+    font-size: 12.5px;
+    line-height: 1.6;
+  }
+  th,
+  td {
+    padding: 5px 7px;
+    border: 1px solid #52646e;
+    vertical-align: middle;
+  }
+`
+
+const previewSrcDoc = computed(() => {
+  const contentHtml = props.template?.contentHtml ?? ''
+
+  if (/^\s*<!doctype html|^\s*<html[\s>]/i.test(contentHtml)) {
+    return contentHtml
+  }
+
+  return `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8" /><style>${DOCUMENT_BASE_STYLE}</style></head><body>${contentHtml}</body></html>`
+})
 </script>

 <template>
@@ -58,7 +99,7 @@ const statusLabel = computed(() => {
          <iframe
            v-else-if="template.contentHtml"
            class="preview-frame"
-            :srcdoc="template.contentHtml"
+            :srcdoc="previewSrcDoc"
            sandbox=""
            title="文档模板内容预览"
          />