Sfoglia il codice sorgente

内容管理预览提交

liyuliangjiazai 3 mesi fa
parent
commit
084d15a0fb

+ 1 - 1
code/ajyApp/pages/find/index/index.nvue

@@ -32,7 +32,7 @@ import { getPublishedArticles } from '@/utils/api/article.js'
 import config from '@/utils/http/config.js'
 
 // 文章阅读页基础地址(去掉 /api 后缀)
-const serverBase = config.baseUrl.replace(/\/api\/?$/, '')
+const serverBase = config.baseUrl
 
 export default {
 	components: {

+ 2 - 0
code/ajyApp/pages/webview/webview.nvue

@@ -28,7 +28,9 @@ export default {
 		this.id = options.id || ''
 		// 支持直接传入 url 和 title 参数(如文章阅读页)
 		if (options.url) {
+			console.log(options.url)
 			this.url = decodeURIComponent(options.url)
+			console.log(this.url)
 			this.title = options.title ? decodeURIComponent(options.title) : '详情'
 		} else if (this.id === '1') {
 			this.title = '用户协议'

+ 53 - 14
code/backend/src/main/java/com/aijiuyi/admin/controller/ArticleViewController.java

@@ -71,22 +71,62 @@ public class ArticleViewController {
         html.append("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n");
         html.append("<title>").append(title).append("</title>\n");
         html.append("<style>\n");
-        // 基础样式 - 移动端适配
-        html.append("* { margin: 0; padding: 0; box-sizing: border-box; }\n");
-        html.append("body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; ");
-        html.append("line-height: 1.8; color: #333; background: #f5f5f5; }\n");
+        // 页面外层样式(不影响文章内容区域)
+        html.append("*, *::before, *::after { box-sizing: border-box; }\n");
+        html.append("body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif; ");
+        html.append("line-height: 1.6; color: #333; background: #f5f5f5; }\n");
         html.append(".article-container { max-width: 800px; margin: 0 auto; padding: 20px 16px; background: #fff; min-height: 100vh; }\n");
-        html.append(".article-title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; word-break: break-word; }\n");
-        html.append(".article-meta { font-size: 13px; color: #999; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #eee; }\n");
+        html.append(".article-title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0 0 12px 0; word-break: break-word; }\n");
+        html.append(".article-meta { font-size: 13px; color: #999; margin: 0 0 20px 0; padding-bottom: 16px; border-bottom: 1px solid #eee; }\n");
         html.append(".article-meta span { margin-right: 16px; }\n");
-        html.append(".article-content { font-size: 16px; line-height: 1.9; word-break: break-word; overflow-wrap: break-word; }\n");
-        html.append(".article-content img { max-width: 100% !important; height: auto !important; display: block; margin: 12px auto; border-radius: 4px; }\n");
-        html.append(".article-content video { max-width: 100% !important; height: auto !important; display: block; margin: 12px auto; }\n");
-        html.append(".article-content p { margin-bottom: 16px; }\n");
-        html.append(".article-content table { width: 100% !important; overflow-x: auto; display: block; border-collapse: collapse; margin: 12px 0; }\n");
-        html.append(".article-content td, .article-content th { border: 1px solid #ddd; padding: 8px; text-align: left; }\n");
+        // ========== TinyMCE content 区域样式(完全复刻编辑器 iframe 环境) ==========
+        // 对应 TinyMCE 配置中的 content_style(body 样式映射到 .article-content)
+        html.append(".article-content { ");
+        html.append("font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif; ");
+        html.append("font-size: 14px; line-height: 1.6; color: #333; ");
+        html.append("padding: 8px 12px; word-break: break-word; overflow-wrap: break-word; }\n");
+        // 对应 content_style 中的 img/video
+        html.append(".article-content img { max-width: 100%; height: auto; }\n");
+        html.append(".article-content video { max-width: 100%; }\n");
+        // ---- 以下对应 TinyMCE content.css (skins/content/default/content.css) ----
+        html.append(".article-content table { border-collapse: collapse; }\n");
+        html.append(".article-content table:not([cellpadding]) th, .article-content table:not([cellpadding]) td { padding: 0.4rem; }\n");
+        html.append(".article-content table[border]:not([border='0']):not([style*='border-width']) th, ");
+        html.append(".article-content table[border]:not([border='0']):not([style*='border-width']) td { border-width: 1px; }\n");
+        html.append(".article-content table[border]:not([border='0']):not([style*='border-style']) th, ");
+        html.append(".article-content table[border]:not([border='0']):not([style*='border-style']) td { border-style: solid; }\n");
+        html.append(".article-content table[border]:not([border='0']):not([style*='border-color']) th, ");
+        html.append(".article-content table[border]:not([border='0']):not([style*='border-color']) td { border-color: #ccc; }\n");
+        html.append(".article-content figure { display: table; margin: 1rem auto; }\n");
+        html.append(".article-content figure figcaption { color: #999; display: block; margin-top: 0.25rem; text-align: center; }\n");
+        html.append(".article-content hr { border-color: #ccc; border-style: solid; border-width: 1px 0 0 0; }\n");
+        html.append(".article-content code { background-color: #e8e8e8; border-radius: 3px; padding: 0.1rem 0.2rem; }\n");
         html.append(".article-content pre { background: #f6f8fa; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 12px 0; }\n");
-        html.append(".article-content code { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 14px; }\n");
+        html.append(".article-content pre code { background-color: transparent; padding: 0; border-radius: 0; }\n");
+        html.append(".article-content blockquote { border-left: 2px solid #ccc; margin-left: 1.5rem; padding-left: 1rem; }\n");
+        // ---- TinyMCE 默认浏览器样式补充(编辑器 iframe 中自带这些默认渲染) ----
+        html.append(".article-content p { margin: 0 0 1em 0; }\n");
+        html.append(".article-content h1 { display: block; font-size: 2em; margin: 0.67em 0; font-weight: bold; }\n");
+        html.append(".article-content h2 { display: block; font-size: 1.5em; margin: 0.83em 0; font-weight: bold; }\n");
+        html.append(".article-content h3 { display: block; font-size: 1.17em; margin: 1em 0; font-weight: bold; }\n");
+        html.append(".article-content h4 { display: block; font-size: 1em; margin: 1.33em 0; font-weight: bold; }\n");
+        html.append(".article-content h5 { display: block; font-size: 0.83em; margin: 1.67em 0; font-weight: bold; }\n");
+        html.append(".article-content h6 { display: block; font-size: 0.67em; margin: 2.33em 0; font-weight: bold; }\n");
+        html.append(".article-content ul, .article-content ol { padding-left: 40px; margin: 1em 0; }\n");
+        html.append(".article-content li { display: list-item; }\n");
+        html.append(".article-content ul { list-style-type: disc; }\n");
+        html.append(".article-content ol { list-style-type: decimal; }\n");
+        html.append(".article-content a { color: #2563eb; text-decoration: underline; }\n");
+        html.append(".article-content sub { vertical-align: sub; font-size: smaller; }\n");
+        html.append(".article-content sup { vertical-align: super; font-size: smaller; }\n");
+        // TinyMCE 对齐辅助类
+        html.append(".article-content [style*='text-align: center'], .article-content [align='center'] { text-align: center; }\n");
+        html.append(".article-content [style*='text-align: right'], .article-content [align='right'] { text-align: right; }\n");
+        html.append(".article-content [style*='text-align: justify'] { text-align: justify; }\n");
+        // TinyMCE 表格编辑器生成的常见样式
+        html.append(".article-content td[valign='top'] { vertical-align: top; }\n");
+        html.append(".article-content td[valign='middle'] { vertical-align: middle; }\n");
+        html.append(".article-content td[valign='bottom'] { vertical-align: bottom; }\n");
         // 禁止复制样式
         html.append(".no-copy { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }\n");
         // 水印样式
@@ -103,7 +143,6 @@ public class ArticleViewController {
         html.append("@media (max-width: 768px) {\n");
         html.append("  .article-container { padding: 16px 12px; }\n");
         html.append("  .article-title { font-size: 20px; }\n");
-        html.append("  .article-content { font-size: 15px; }\n");
         html.append("}\n");
         html.append("</style>\n");
         html.append("</head>\n<body>\n");