zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tijiao

Browse Source
This commit is contained in:
始于初见
2025-03-21 09:06:56 +08:00
parent aa69846e09
commit 46f3923a06
21 changed files with 880 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip Normal file
View File

Binary file not shown.

16
npminstall-debug.log
View File

@@ -3,7 +3,14 @@
registry: 'https://registry.npmmirror.com', registry: 'https://registry.npmmirror.com',
pkgs: [ pkgs: [
{ {
name: 'spellchecker', name: 'tinymce',
version: 'latest',
type: 'tag',
alias: undefined,
arg: [Result]
},
{
name: 'tinymce-kityformula-editor',
version: 'latest', version: 'latest',
type: 'tag', type: 'tag',
alias: undefined, alias: undefined,
@@ -15,7 +22,7 @@
cacheDir: 'C:\\Users\\Administrator\\.npminstall_tarball', cacheDir: 'C:\\Users\\Administrator\\.npminstall_tarball',
env: { env: {
npm_config_registry: 'https://registry.npmmirror.com', npm_config_registry: 'https://registry.npmmirror.com',
npm_config_argv: '{"remain":[],"cooked":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\Administrator\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","spellchecker"],"original":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\Administrator\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","spellchecker"]}', npm_config_argv: '{"remain":[],"cooked":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\Administrator\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","tinymce","tinymce-kityformula-editor"],"original":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\Administrator\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","tinymce","tinymce-kityformula-editor"]}',
npm_config_user_agent: 'npminstall/7.12.0 npm/? node/v16.14.1 win32 x64', npm_config_user_agent: 'npminstall/7.12.0 npm/? node/v16.14.1 win32 x64',
npm_config_cache: 'C:\\Users\\Administrator\\.npminstall_tarball', npm_config_cache: 'C:\\Users\\Administrator\\.npminstall_tarball',
NODE: 'C:\\Program Files\\nodejs\\node.exe', NODE: 'C:\\Program Files\\nodejs\\node.exe',
@@ -119,7 +126,10 @@
}, },
fsevents: { host: 'https://cdn.npmmirror.com/binaries/fsevents' }, fsevents: { host: 'https://cdn.npmmirror.com/binaries/fsevents' },
nodejieba: { host: 'https://cdn.npmmirror.com/binaries/nodejieba' }, nodejieba: { host: 'https://cdn.npmmirror.com/binaries/nodejieba' },
canvas: { host: 'https://cdn.npmmirror.com/binaries/canvas' }, canvas: {
host: 'https://cdn.npmmirror.com/binaries/canvas',
remote_path: 'v{version}'
},
'skia-canvas': { host: 'https://cdn.npmmirror.com/binaries/skia-canvas' }, 'skia-canvas': { host: 'https://cdn.npmmirror.com/binaries/skia-canvas' },
'flow-bin': { 'flow-bin': {
replaceHost: 'https://github.com/facebook/flow/releases/download/v', replaceHost: 'https://github.com/facebook/flow/releases/download/v',

1
package.json
View File

@@ -23,6 +23,7 @@
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
"install": "^0.13.0", "install": "^0.13.0",
"jszip": "^3.10.1", "jszip": "^3.10.1",
"katex": "^0.16.21",
"mammoth": "^1.5.1", "mammoth": "^1.5.1",
"mathlive": "^0.104.0", "mathlive": "^0.104.0",
"mavon-editor": "^2.6.17", "mavon-editor": "^2.6.17",

3
public/index.html
View File

@@ -15,7 +15,8 @@
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body><script src="<%=BASE_URL %>/tinymce/tinymce.min.js"></script> </body><script src="<%=BASE_URL %>/tinymce/tinymce.min.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="/js/global-math.js"></script>
<script src="https://www.paypal.com/sdk/js?client-id=ATqBigrhcNdqR8J83aDjTOoJHsAVz0U45JRY4H0stcEcv0mQrMDHQmyrydQInYd1w4lJ1ee3Wsblm2WP"></script> <script src="https://www.paypal.com/sdk/js?client-id=ATqBigrhcNdqR8J83aDjTOoJHsAVz0U45JRY4H0stcEcv0mQrMDHQmyrydQInYd1w4lJ1ee3Wsblm2WP"></script>
</html> </html>

110
public/js/global-math.js Normal file
View File

@@ -0,0 +1,110 @@
// 确保 MathJax 配置正确
window.MathJax = window.MathJax || {
loader: {
load: ['[tex]/ams', '[tex]/newcommand']
},
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']]
},
a11y: {
// 启用 MathJax 可访问性功能，确保使用 aria-label
texHints: true,
screenReader: true,
mathml: {
enable: true,
},
label: {
// 公式的 aria-label 配置
enable: true,
texClass: 'MathJax-Label',
form: 'LaTeX'
}
},
svg: { fontCache: 'global' }
};
// **定义全局渲染方法**
window.renderMathJax = function (tinymceId) {
// if (window.MathJax && typeof window.MathJax.typesetPromise === "function") {
// console.log("正在渲染 MathJax 公式...");
// // 如果提供了 TinyMCE 编辑器 ID
// if (tinymceId) {
// const editorInstance = window.tinymce.get(tinymceId); // 根据 ID 获取编辑器实例
// if (!editorInstance) {
// return;
// }
// // 获取指定的 TinyMCE 编辑器中的内容
// const editorBody = editorInstance.getBody();
// // 渲染 editorBody 中所有 <wmath> 标签，并使用 data-latex 的值
// const wmathElements = editorBody.querySelectorAll('wmath');
// wmathElements.forEach((element) => {
// // 检查 <wmath> 标签是否包含有效的 data-latex 属性值
// const latexContent = element.getAttribute('data-latex');
// if (latexContent) {
// // 将元素的内部内容替换为 data-latex 的值
// element.innerHTML = latexContent;
// // 渲染 MathJax 公式
// window.MathJax.typesetPromise([element]).catch((err) => {
// console.warn("TinyMCE MathJax 渲染失败:", err);
// });
// }
// });
// // 渲染 editorBody 中所有 <math> 标签（MathML 内容）
// const mathElements = editorBody.querySelectorAll('math');
// mathElements.forEach((element) => {
// // 渲染 MathJax 公式
// window.MathJax.typesetPromise([element]).catch((err) => {
// console.warn("MathJax 渲染失败:", err);
// });
// });
// } else {
// // 处理全局文档中的 <wmath> 标签
// const wmathElements = document.querySelectorAll('wmath');
// wmathElements.forEach((element) => {
// // 检查 <wmath> 标签是否包含有效的 data-latex 属性值
// const latexContent = element.getAttribute('data-latex');
// if (latexContent) {
// // 将元素的内部内容替换为 data-latex 的值
// element.innerHTML = latexContent;
// // 渲染 MathJax 公式
// window.MathJax.typesetPromise([element]).catch((err) => {
// console.warn("MathJax 渲染失败:", err);
// });
// }
// });
// // 处理全局文档中的 <math> 标签（MathML 内容）
// const mathElements = document.querySelectorAll('math');
// mathElements.forEach((element) => {
// // 渲染 MathJax 公式
// window.MathJax.typesetPromise([element]).catch((err) => {
// console.warn("MathJax 渲染失败:", err);
// });
// });
// }
// } else {
// console.warn("MathJax 未正确加载！");
// }
}

20
src/assets/css/main.css
View File

@@ -1258,7 +1258,7 @@ a {
/* 自动调整列宽 */ /* 自动调整列宽 */
text-align: left; text-align: left;
font-family: 'Charis SIL' !important; font-family: 'Charis SIL' !important;
font-size: 12px !important; font-size: 14px !important;
mso-font-kerning: 1pt !important; mso-font-kerning: 1pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -1274,7 +1274,7 @@ a {
/* 长单词自动换行 */ /* 长单词自动换行 */
word-break: normal; word-break: normal;
font-family: 'Charis SIL' !important; font-family: 'Charis SIL' !important;
font-size: 12px !important; font-size: 14px !important;
mso-font-kerning: 1pt !important; mso-font-kerning: 1pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -1303,7 +1303,7 @@ a {
margin: 0; margin: 0;
font-family: 'Charis SIL' !important; font-family: 'Charis SIL' !important;
font-size: 12px !important; font-size: 14px !important;
mso-font-kerning: 1pt !important; mso-font-kerning: 1pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -1313,7 +1313,7 @@ a {
color: #000000; color: #000000;
text-align: left !important; text-align: left !important;
font-family: 'Charis SIL' !important; font-family: 'Charis SIL' !important;
font-size: 12px !important; font-size: 14px !important;
mso-font-kerning: 1pt !important; mso-font-kerning: 1pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -1322,7 +1322,7 @@ a {
.word-container table .color-highlight { .word-container table .color-highlight {
color: rgb(0, 130, 170) !important; color: rgb(0, 130, 170) !important;
font-family: 'Charis SIL' !important; font-family: 'Charis SIL' !important;
font-size: 12px !important; font-size: 14px !important;
mso-font-kerning: 1pt !important; mso-font-kerning: 1pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -1433,4 +1433,12 @@ a {
/* 设置字体颜色 */ /* 设置字体颜色 */
text-decoration: line-through !important; text-decoration: line-through !important;
/* 设置字体颜色 */ /* 设置字体颜色 */
} }
mjx-container {
font-size: 14px !important;
}
wmath{
width: 100%;
display: block;display: flex;
}

195
src/common/js/commonJS.js
View File

@@ -1,4 +1,5 @@
import Vue from 'vue'; import Vue from 'vue';
import katex from 'katex';
import JSZip from 'jszip'; import JSZip from 'jszip';
import Common from '@/components/common/common' import Common from '@/components/common/common'
import Tiff from 'tiff.js'; import Tiff from 'tiff.js';
@@ -18,6 +19,90 @@ const capitalizeFirstLetter = function (text) {
}); });
}; };
export default { export default {
extractLatexFromMathJax() {
// 获取所有 MathJax 渲染的公式容器
const mathContainers = document.querySelectorAll('mjx-container');
mathContainers.forEach(container => {
// 查找每个渲染公式对应的 MathML 部分
const mathElement = container.querySelector('mjx-math');
console.log('mathElement at line 28:', mathElement)
if (mathElement) {
// 获取 MathJax 渲染的公式对象
const jax = window.MathJax.getJaxFor(mathElement);
console.log('jax at line 32:', jax)
if (jax) {
// 使用 MathJax API 获取公式的 LaTeX 代码
const latex = jax.getLiteral(); // 获取 LaTeX 表达式
console.log('提取到的 LaTeX 公式:', latex); // 输出 LaTeX 代码
} else {
console.warn('MathJax 对象未找到');
}
}
});
},
replaceWMathContent(inputHtml, callback) {
// 使用正则表达式查找所有 <wmath> 标签，并提取 data-latex 的内容
var str = inputHtml.replace(/<wmath data-latex="([^"]+)">[^<]*<\/wmath>/g, function(match, latexContent) {
// 返回 <wmath> 标签，内容替换为 data-latex 的值
return `<wmath data-latex="${latexContent}">${latexContent}</wmath>`;
});
// 调用回调函数并传递处理后的结果
callback(str);
// 输出结果到控制台
console.log('Processed HTML:', str);
}
,
// **解析 MathJax 公式，获取 LaTeX**
async extractMathJaxLatex(cell, callback) {
console.log('cell at line 67:', cell)
return new Promise((resolve, reject) => {
// Step 1: First, process the math content and extract LaTeX from <wmath> tags
let updatedContent = cell.innerHTML; // Start with the cell's inner HTML
console.log('cell content at the start:', updatedContent);
// Find all <wmath> elements
const wmathElements = cell.querySelectorAll('wmath');
wmathElements.forEach((element) => {
// Get the LaTeX content from the data-latex attribute
const latexContent = element.getAttribute('data-latex');
console.log('LaTeX content from data-latex:', latexContent);
// Replace the <wmath> tag with its LaTeX content wrapped in $$...$$
updatedContent = updatedContent.replace(element.outerHTML, `<wmath data-latex="${latexContent}">${latexContent}</wmath>`);
});
console.log('updatedContent after processing wmath tags:', updatedContent);
// Step 2: Now extract content without the outer <span> tags
updatedContent = this.extractContentWithoutOuterSpan(updatedContent);
console.log('updatedContent after extractContentWithoutOuterSpan:', updatedContent);
// Step 3: Call the callback function with the final updated content
// callback(updatedContent);
// Resolve the promise with the final content
resolve(updatedContent);
});
}
,
renderLatex(latexString) {
return katex.renderToString(latexString, {
throwOnError: false
});
},
decodeHtml(html) { decodeHtml(html) {
var txt = document.createElement('textarea'); var txt = document.createElement('textarea');
txt.innerHTML = html; txt.innerHTML = html;
@@ -25,9 +110,15 @@ export default {
}, },
//去掉最外层自定义的span标签 //去掉最外层自定义的span标签
extractContentWithoutOuterSpan(cell) { extractContentWithoutOuterSpan(cell) {
console.log('cell at line 90:', cell)
var str = '' var str = ''
if(!cell){
return ''
}
// 获取单元格的 HTML 内容 // 获取单元格的 HTML 内容
let htmlContent = cell.innerHTML.trim(); let htmlContent = cell.trim();
console.log('htmlContent at line 94:', htmlContent)
str = this.transformHtmlString(htmlContent) str = this.transformHtmlString(htmlContent)
@@ -68,9 +159,10 @@ export default {
console.log('str at line 141:', str)
// 如果没有 <span> 标签，直接返回原始 HTML 内容 // 如果没有 <span> 标签，直接返回原始 HTML 内容
return str; return str;
}, },
async extractPastedWordTablesToArrays(pastedHtml, callback) { async extractPastedWordTablesToArrays(pastedHtml, callback) {
try { try {
@@ -236,31 +328,31 @@ export default {
rowspan = 1; // 初始化 rowspan rowspan = 1; // 初始化 rowspan
let nextRowIdx = rowIndex + 1; let nextRowIdx = rowIndex + 1;
let maxRowspan = rows.length - rowIndex; // 确保 rowspan 不会超过剩余行数 let maxRowspan = rows.length - rowIndex; // 确保 rowspan 不会超过剩余行数
while (nextRowIdx < rows.length) { while (nextRowIdx < rows.length) {
const nextRowCells = rows[nextRowIdx].getElementsByTagNameNS(namespace, "tc"); const nextRowCells = rows[nextRowIdx].getElementsByTagNameNS(namespace, "tc");
// console.log(`🔍 检查下一行单元格 at row ${nextRowIdx}, col ${cellIndex}:`, nextRowCells); // console.log(`🔍 检查下一行单元格 at row ${nextRowIdx}, col ${cellIndex}:`, nextRowCells);
if (nextRowCells.length > cellIndex) { if (nextRowCells.length > cellIndex) {
const nextCell = nextRowCells[cellIndex]; const nextCell = nextRowCells[cellIndex];
if (!nextCell) { if (!nextCell) {
// console.warn(`⚠️ nextCell 未定义 at row ${nextRowIdx}, col ${cellIndex}`); // console.warn(`⚠️ nextCell 未定义 at row ${nextRowIdx}, col ${cellIndex}`);
break; break;
} }
const nextVMerge = nextCell.getElementsByTagNameNS(namespace, "vMerge")[0]; const nextVMerge = nextCell.getElementsByTagNameNS(namespace, "vMerge")[0];
// console.log(`🔍 检查 nextVMerge at row ${nextRowIdx}, col ${cellIndex}:`, nextVMerge); // console.log(`🔍 检查 nextVMerge at row ${nextRowIdx}, col ${cellIndex}:`, nextVMerge);
// **如果 nextVMerge 为空，则不应继续增长 rowspan** // **如果 nextVMerge 为空，则不应继续增长 rowspan**
if (!nextVMerge) { if (!nextVMerge) {
// console.log(`⚠️ nextVMerge 为空 at row ${nextRowIdx}, col ${cellIndex} - 停止扩展`); // console.log(`⚠️ nextVMerge 为空 at row ${nextRowIdx}, col ${cellIndex} - 停止扩展`);
break; break;
} }
// **解析 nextVMerge 的值** // **解析 nextVMerge 的值**
const vMergeVal = nextVMerge.getAttribute("w:val"); const vMergeVal = nextVMerge.getAttribute("w:val");
if (!vMergeVal || vMergeVal === "continue") { if (!vMergeVal || vMergeVal === "continue") {
if (rowspan < maxRowspan) { // 限制 rowspan 最大值 if (rowspan < maxRowspan) { // 限制 rowspan 最大值
rowspan++; rowspan++;
@@ -286,7 +378,7 @@ export default {
continue; continue;
} }
} }
console.log('rowspan at line 265:', rowspan) console.log('rowspan at line 265:', rowspan)
const currentLevelNumbers = {}; const currentLevelNumbers = {};
for (const paragraph of paragraphs) { for (const paragraph of paragraphs) {
@@ -621,11 +713,23 @@ export default {
// inputHtml = inputHtml.replace(/(<[^>]+) style="[^"]*"/g, '$1'); // 移除style属性 // inputHtml = inputHtml.replace(/(<[^>]+) style="[^"]*"/g, '$1'); // 移除style属性
// inputHtml = inputHtml.replace(/(<[^>]+) class="[^"]*"/g, '$1'); // 移除class属性 // inputHtml = inputHtml.replace(/(<[^>]+) class="[^"]*"/g, '$1'); // 移除class属性
inputHtml = inputHtml.replace(/<([a-zA-Z0-9]+)[^>]*>/g, '<$1>'); // 删除标签上的所有属性 // inputHtml = inputHtml.replace(/<([a-zA-Z0-9]+)[^>]*>/g, '<$1>'); // 删除标签上的所有属性
inputHtml = inputHtml.replace(/<([a-zA-Z0-9]+)([^>]*)>/g, function (match, tag, attributes) {
// 使用正则表达式删除属性（保留 data-latex）
let updatedAttributes = attributes.replace(/\s([a-zA-Z0-9-]+)(="[^"]*")?/g, function (attrMatch, attrName) {
// 只保留 data-latex 属性，其他属性删除
if (attrName === "data-latex") {
return attrMatch;
}
return ''; // 删除其他属性
});
// 返回标签，保留 data-latex 属性
return `<${tag}${updatedAttributes}>`;
});
// 2. 删除所有不需要的标签 (除 `strong`, `em`, `sub`, `sup`, `b`, `i` 外的所有标签) // 2. 删除所有不需要的标签 (除 `strong`, `em`, `sub`, `sup`, `b`, `i` 外的所有标签)
inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue))[^>]+>/g, ''); // 删除不需要的标签 inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue|wmath))[^>]+>/g, ''); // 删除不需要的标签
// 3. 如果有 `<strong>` 和 `<em>` 标签，去掉内部样式并保留内容 // 3. 如果有 `<strong>` 和 `<em>` 标签，去掉内部样式并保留内容
inputHtml = inputHtml.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, ''); // 去除span标签 inputHtml = inputHtml.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, ''); // 去除span标签
@@ -645,62 +749,74 @@ export default {
let tempDiv = document.createElement('div'); let tempDiv = document.createElement('div');
tempDiv.innerHTML = content; // 解析 HTML 内容 tempDiv.innerHTML = content; // 解析 HTML 内容
let paragraphs = tempDiv.querySelectorAll("p"); // 选取所有 <p> 作为数据项 let paragraphs = tempDiv.querySelectorAll("p"); // 选取所有 <p> 作为数据项
// 2️⃣ 将 <p> 内容转换为数组，并处理内容 // 2️⃣ 将 <p> 内容转换为数组，并处理内容
let parsedData = Array.from(paragraphs).map(p => { let parsedData = Array.from(paragraphs).map(p => {
let text = p.innerHTML.trim(); // 获取内容，去除两端空格 let text = p.innerHTML.trim(); // 获取内容，去除两端空格
text= this.transformHtmlString(text)
// 3️⃣ **正确移除 <o:p>（Word 复制的无效标签）** // 3️⃣ **正确移除 <o:p>（Word 复制的无效标签）**
text = text.replace(/<\/?o:p[^>]*>/g, ""); text = text.replace(/<\/?o:p[^>]*>/g, "");
// 4️⃣ **移除所有 style="..."** // 4️⃣ **移除所有 style="..."**
text = text.replace(/\s*style="[^"]*"/gi, ""); text = text.replace(/\s*style="[^"]*"/gi, "");
// 5️⃣ **修正标签替换** // 5️⃣ **修正标签替换**
text = text.replace(/<strong>/gi, "<b>").replace(/<\/strong>/gi, "</b>"); text = text.replace(/<strong>/gi, "<b>").replace(/<\/strong>/gi, "</b>");
text = text.replace(/<em>/gi, "<i>").replace(/<\/em>/gi, "</i>"); text = text.replace(/<em>/gi, "<i>").replace(/<\/em>/gi, "</i>");
// 6️⃣ **移除空的 span、b、i 标签** // 6️⃣ **移除空的 span、b、i 标签**
text = text.replace(/<span>\s*<\/span>/gi, ""); text = text.replace(/<span>\s*<\/span>/gi, "");
text = text.replace(/<b>\s*<\/b>/gi, ""); text = text.replace(/<b>\s*<\/b>/gi, "");
text = text.replace(/<i>\s*<\/i>/gi, ""); text = text.replace(/<i>\s*<\/i>/gi, "");
// 7️⃣ **确保不移除半个标签（修复匹配规则）** // 7️⃣ **确保不移除半个标签（修复匹配规则）**
text = text.replace(/<[^\/>]+>\s*<\/[^>]+>/gi, match => { text = text.replace(/<[^\/>]+>\s*<\/[^>]+>/gi, match => {
return match.trim() === "" ? "" : match; return match.trim() === "" ? "" : match;
}); });
// 8️⃣ **返回最终内容** // 8️⃣ **返回最终内容**
return text.trim() === "" ? "" : text; return text.trim() === "" ? "" : text;
}); });
console.log(parsedData); // 输出数组，方便调试 console.log(parsedData); // 输出数组，方便调试
return parsedData; return parsedData;
} }
, ,
parseTableToArray(tableString, callback) { async parseTableToArray(tableString, callback) {
const parser = new DOMParser(); const parser = new DOMParser();
const doc = parser.parseFromString(tableString, 'text/html'); const doc = parser.parseFromString(tableString, 'text/html');
const rows = doc.querySelectorAll('table tr'); // 获取所有的行（<tr>） const rows = doc.querySelectorAll('table tr'); // 获取所有的行（<tr>）
callback(Array.from(rows).map(row => { // 使用 Promise 来处理异步的 MathJax 解析
const cells = row.querySelectorAll('th, td'); // 获取每个行中的单元格（包括 <th> 和 <td>） const result = await Promise.all(
return Array.from(cells).map(cell => ({ Array.from(rows).map(async (row) => {
const cells = row.querySelectorAll('th, td'); // 获取每个行中的单元格（包括 <th> 和 <td>）
return await Promise.all(
Array.from(cells).map(async (cell) => {
const text = await this.extractMathJaxLatex(cell);
return {
text,
colspan: cell.getAttribute('colspan') ? parseInt(cell.getAttribute('colspan')) : 1, // 提取 colspan，默认值为 1
rowspan: cell.getAttribute('rowspan') ? parseInt(cell.getAttribute('rowspan')) : 1 // 提取 rowspan，默认值为 1
};
})
);
})
);
console.log('result at line 78611:', result)
callback(result)
// 返回处理后的数组
text: this.extractContentWithoutOuterSpan(cell),
colspan: cell.getAttribute('colspan') ? parseInt(cell.getAttribute('colspan')) : 1, // 提取 colspan，默认值为 1
rowspan: cell.getAttribute('rowspan') ? parseInt(cell.getAttribute('rowspan')) : 1 // 提取 rowspan，默认值为 1
}));
}));
}, },
parseNumbering(numberingDoc) { parseNumbering(numberingDoc) {
const numberingMap = new Map(); const numberingMap = new Map();
if (!numberingDoc) return numberingMap; if (!numberingDoc) return numberingMap;
@@ -1834,19 +1950,14 @@ export default {
}); });
ed.ui.registry.addButton('LateX', { ed.ui.registry.addButton('LateX', {
text: 'LateX', // 按钮文本 text: 'LateX', // 按钮文本
className: 'custom-button-blue', // 添加自定义类 // className: 'custom-button-blue', // 添加自定义类
// shortcut: "Ctrl+J", // shortcut: "Ctrl+J",
onAction: function () { onAction: function () {
// 在选中的文本周围包裹 <blue> 标签 window.open('/LateX?id=4477', '_blank', 'width=600,height=400');
// var selectedText = ed.selection.getContent();
// console.log('selectedText at line 529:', selectedText); // 在新页面中插入 MathLive 编辑器
// if (selectedText) { // formulaWindow.document.write(``);
// var wrappedText = `<blue>${selectedText}</blue>`; }
// ed.selection.setContent(wrappedText);
// } else {
// this.$message.error('请选择要添加蓝色的文本');
// }
}
}); });
ed.ui.registry.addButton('myuppercase', { ed.ui.registry.addButton('myuppercase', {

55
src/components/common/Home.vue
View File

@@ -1,31 +1,42 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<template v-if="!this.$route.meta.hideSidebar"> <template v-if="!this.$route.meta.hideTitle"
<v-head></v-head> ><template v-if="!this.$route.meta.hideSidebar">
<v-head></v-head>
<v-sidebar></v-sidebar> <v-sidebar></v-sidebar>
<div class="content-box" :class="{ 'content-collapse': collapse }"> <div class="content-box" :class="{ 'content-collapse': collapse }">
<v-tags></v-tags> <v-tags></v-tags>
<div class="content"> <div class="content">
<transition name="move" mode="out-in"> <transition name="move" mode="out-in">
<keep-alive :include="tagsList"> <keep-alive :include="tagsList">
<router-view></router-view> <router-view></router-view>
</keep-alive> </keep-alive>
</transition> </transition>
<el-backtop target=".content"></el-backtop> <el-backtop target=".content"></el-backtop>
</div>
</div> </div>
</div> </template>
<template v-else>
<v-head2 :home="true"></v-head2>
<div style="width: 100%; height: calc(100% - 62px); overflow: hidden">
<div class="content" style="padding: 0; overflow: hidden">
<!-- <transition name="move" mode="out-in"> -->
<!-- <keep-alive :include="tagsList"> -->
<router-view></router-view>
<!-- </keep-alive> -->
<!-- </transition> -->
<el-backtop target=".content"></el-backtop>
</div>
</div>
</template>
</template> </template>
<template v-else> <template v-else>
<v-head2 :home="true"></v-head2> <div style="width: 100%; height: calc(100%); overflow: hidden">
<div style="width: 100%;height: calc(100% - 62px);overflow: hidden;"> <div class="content" style="padding: 0; overflow: hidden">
<div class="content" style="padding: 0;overflow: hidden;"> <router-view></router-view>
<!-- <transition name="move" mode="out-in"> -->
<!-- <keep-alive :include="tagsList"> -->
<router-view></router-view>
<!-- </keep-alive> -->
<!-- </transition> -->
<el-backtop target=".content"></el-backtop> <el-backtop target=".content"></el-backtop>
</div> </div>
</div> </div>

93
src/components/page/GenerateCharts.vue
View File

@@ -162,25 +162,30 @@
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="pictVisible = false"> Cancel </el-button> <el-button @click="pictVisible = false"> Cancel </el-button>
<el-button type="primary" @click="savePic"> <el-button type="primary" @click="savePic" >
<i class="el-icon-finished" style="margin-right: 5px"></i> <i class="el-icon-finished" style="margin-right: 5px;"></i>
Save Figure Save Figure
</el-button> </el-button>
</span> </span>
</el-dialog> </el-dialog>
<!-- 添加表格 --> <!-- 添加表格 -->
<el-dialog <el-drawer
class="editTableDialog" title="我嵌套了表格!"
class="editTableDialog"
destroy-on-close destroy-on-close
v-if="threeVisible" v-if="threeVisible"
:title="lineStyle.visiTitle" :title="lineStyle.visiTitle"
:visible.sync="threeVisible" :visible.sync="threeVisible"
width="1200px" :wrapperClosable ="false"
:close-on-click-modal="false" :close-on-click-modal="false"
> direction="rtl"
<el-form ref="editMes" :model="lineStyle" label-width="115px"> size="70%">
<el-form-item label="Table Title :"> <el-form ref="editMes" :model="lineStyle" label-width="80px">
<!-- <common-late-x></common-late-x> -->
<el-form-item label="Title:">
<common-content <common-content
:id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-title`" :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-title`"
:isAutomaticUpdate="true" :isAutomaticUpdate="true"
@@ -196,7 +201,62 @@
<el-form-item label="Word"> <el-form-item label="Word">
<span slot="label"> <span slot="label">
<font style="color: #f56c6c; margin-right: 5px">*</font> <font style="color: #f56c6c; margin-right: 5px">*</font>
Table : Table:
</span>
<common-table
@getContent="getContent"
v-if="threeVisible"
ref="commonTable"
:lineStyle="lineStyle"
></common-table>
</el-form-item>
<el-form-item label="Note:">
<common-content
:id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-note`"
:isAutomaticUpdate="true"
:value="lineStyle.note"
@getContent="getContent"
v-if="threeVisible"
@updateChange="(res) => updateChange(res, 'note')"
:height="120"
ref="tinymceChildNote"
></common-content>
</el-form-item>
</el-form>
<p style="margin-top: 20px; text-align: right">
<el-button @click="threeVisible = false"> Cancel </el-button>
<el-button type="primary" plain @click="handleSaveTable" style="background-color: #006699 !important;background: #006699 !important;margin-right: 20px;color: #fff !important;"> save Table </el-button>
</p>
</el-drawer>
<!-- <el-dialog
class="editTableDialog"
destroy-on-close
v-if="threeVisible"
:title="lineStyle.visiTitle"
:visible.sync="threeVisible"
width="1200px"
:close-on-click-modal="false"
>
<el-form ref="editMes" :model="lineStyle" label-width="80px">
<el-form-item label="Title:">
<common-content
:id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-title`"
:isAutomaticUpdate="true"
:value="lineStyle.title"
@getContent="getContent"
v-if="threeVisible"
@updateChange="(res) => updateChange(res, 'title')"
:height="120"
ref="tinymceChildTitle"
style="margin-left: -115px"
></common-content>
</el-form-item>
<el-form-item label="Word">
<span slot="label">
<font style="color: #f56c6c; margin-right: 5px">*</font>
Table:
</span> </span>
<common-table <common-table
@getContent="getContent" @getContent="getContent"
@@ -206,7 +266,7 @@
:lineStyle="lineStyle" :lineStyle="lineStyle"
></common-table> ></common-table>
</el-form-item> </el-form-item>
<el-form-item label="Bottom Title :"> <el-form-item label="Note:">
<common-content <common-content
:id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-note`" :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-note`"
:isAutomaticUpdate="true" :isAutomaticUpdate="true"
@@ -224,7 +284,7 @@
<el-button @click="threeVisible = false"> Cancel </el-button> <el-button @click="threeVisible = false"> Cancel </el-button>
<el-button type="primary" plain @click="handleSaveTable"> save Table </el-button> <el-button type="primary" plain @click="handleSaveTable"> save Table </el-button>
</p> </p>
</el-dialog> </el-dialog> -->
<el-dialog <el-dialog
destroy-on-close destroy-on-close
v-if="commentVisible" v-if="commentVisible"
@@ -541,10 +601,8 @@ export default {
async getContent(type, content) { async getContent(type, content) {
console.log('content at line 539:', content); console.log('content at line 539:', content);
if (type == 'content') { if (type == 'content') {
content = content.replace(/<(?!\/?(img|b|i|sub|sup|span|strong|em |blue)\b)[^>]+>/g, ''); content = this.$commonJS.transformHtmlString(content);
console.log('content at line 604:', content)
content = content.replace(/\s*style="[^"]*"/g, '');
var div = document.createElement('div'); var div = document.createElement('div');
div.innerHTML = content; // 将 HTML 字符串加载到 div 中 div.innerHTML = content; // 将 HTML 字符串加载到 div 中
// 替换所有 <strong> 为 <b> // 替换所有 <strong> 为 <b>
@@ -581,6 +639,7 @@ export default {
this.saveContentList(list, this.currentId); this.saveContentList(list, this.currentId);
} else if (type == 'table') { } else if (type == 'table') {
this.saveTable(content); this.saveTable(content);
} else if (type == 'comment') { } else if (type == 'comment') {
this.addComment(content); this.addComment(content);
@@ -1093,7 +1152,8 @@ export default {
} }
}, },
updateChange(content, type) { updateChange(content, type) {
console.log('content at line 976:', content); console.log('content at line 1154:', content)
// console.log('content at line 976:', content);
var str = this.$commonJS.transformHtmlString(content); var str = this.$commonJS.transformHtmlString(content);
if (type == 'imgNote') { if (type == 'imgNote') {
this.picStyle.note = str; this.picStyle.note = str;
@@ -2063,4 +2123,5 @@ export default {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #555; /* 滑块悬停时的颜色 */ background: #555; /* 滑块悬停时的颜色 */
} }
</style> </style>

3
src/components/page/Login.vue
View File

@@ -215,8 +215,7 @@
localStorage.setItem('U_role', 'superadmin'); localStorage.setItem('U_role', 'superadmin');
localStorage.setItem('U_name', res.userinfo.account); localStorage.setItem('U_name', res.userinfo.account);
localStorage.setItem('U_id', res.userinfo.user_id); localStorage.setItem('U_id', res.userinfo.user_id);
return false
// localStorage.setItem('U_id', res.userinfo.admin_id);
this.$router.push('/'); this.$router.push('/');
} else if (res.data.roles.includes('editor')) { } else if (res.data.roles.includes('editor')) {
localStorage.setItem('U_status', '1'); //编辑 localStorage.setItem('U_status', '1'); //编辑

135
src/components/page/articleAdd.vue
View File

@@ -20,7 +20,7 @@
</div> </div>
<div class="manu_add" style="width: 960px" v-loading="loading"> <div class="manu_add" style="width: 960px" v-loading="loading">
<el-form ref="articleform" :model="form" :rules="rules" label-width="160px"> <el-form ref="articleform" :model="form" :rules="rules" label-width="120px">
<div class="bag_color" v-if="show_step == 1"> <div class="bag_color" v-if="show_step == 1">
<div> <div>
<h3>Manuscript Information</h3> <h3>Manuscript Information</h3>
@@ -56,8 +56,8 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="Research areas :" prop="major"> <el-form-item label="Research areas :" prop="major" label-width="160px">
<common-major-list :list="majorValueList" @load="(e)=>this.majorValueList=e"></common-major-list> <common-major-list :list="majorValueList" @load="(e) => (this.majorValueList = e)"></common-major-list>
<!-- <el-select <!-- <el-select
v-model="form.major_a" v-model="form.major_a"
placeholder="Please select major" placeholder="Please select major"
@@ -102,7 +102,7 @@
></el-option> ></el-option>
</el-select> --> </el-select> -->
</el-form-item> </el-form-item>
<el-form-item label="Manuscript Title :" prop="title"> <el-form-item label="Manuscript Title :" prop="title" label-width="160px">
<el-input v-model="form.title" placeholder="Please enter title"></el-input> <el-input v-model="form.title" placeholder="Please enter title"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="Whether ethical approval was obtained ?" prop="approval" label-width="300px"> <el-form-item label="Whether ethical approval was obtained ?" prop="approval" label-width="300px">
@@ -189,17 +189,19 @@
> >
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="Article Processing Charge :" v-if="ms_alias == null" label-width="180px"> <el-form-item label="Article Processing Charge :" v-if="form.journal != 0" label-width="180px">
$ {{ getFee(form.journal) }} $ {{ getFee(form.journal) }}
<div style="color: #8c8d8f"v-if=" getFee(form.journal)&&getFee(form.journal)!='0.00'"> <div style="color: #8c8d8f" v-if="getFee(form.journal) && getFee(form.journal) != '0.00'">
<i class="el-icon-warning" style="color: #517fd5; margin-right: 4px"></i>The article processing fee applies to papers submitted and ultimately accepted for publication after January 1, 2025. For authors seeking to apply for fee discounts, please <a <i class="el-icon-warning" style="color: #517fd5; margin-right: 4px"></i>The article processing fee
applies to papers submitted and ultimately accepted for publication after January 1, 2025. For
authors seeking to apply for fee discounts, please
<a
style="color: rgb(81, 127, 213); cursor: pointer; text-decoration: underline" style="color: rgb(81, 127, 213); cursor: pointer; text-decoration: underline"
href="https://www.tmrjournals.com/apc/" href="https://www.tmrjournals.com/apc/"
target="_blank" target="_blank"
>click here</a >click here</a
> to view detailed policies. >
to view detailed policies.
</div> </div>
</el-form-item> </el-form-item>
<div style="text-align: center; margin: 40px 0 0 0"> <div style="text-align: center; margin: 40px 0 0 0">
@@ -967,7 +969,7 @@
export default { export default {
data() { data() {
return { return {
majorValueList:[], majorValueList: [],
baseUrl: this.Common.baseUrl, baseUrl: this.Common.baseUrl,
usercap: localStorage.getItem('U_role'), usercap: localStorage.getItem('U_role'),
ms_alias: localStorage.getItem('ms_journal_alias'), ms_alias: localStorage.getItem('ms_journal_alias'),
@@ -1008,7 +1010,7 @@ export default {
], ],
form: { form: {
article_id: 0, article_id: 0,
journal: localStorage.getItem('ms_journal_alias') ? parseInt(localStorage.getItem('ms_journal_alias')) : 1, journal: localStorage.getItem('ms_journal_alias') ? parseInt(localStorage.getItem('ms_journal_alias')) : '',
username: localStorage.getItem('U_name'), username: localStorage.getItem('U_name'),
user_id: localStorage.getItem('U_id'), user_id: localStorage.getItem('U_id'),
title: '', title: '',
@@ -1196,21 +1198,20 @@ export default {
} }
], ],
major: [ major: [
{ {
required: true, required: true,
validator: (rule, value, callback) => { validator: (rule, value, callback) => {
console.log('value at line 1202:', this.form); console.log('value at line 1202:', this.form);
var major=this.majorValueList.map(item => item.selectedValue[item.selectedValue.length - 1]).toString(',') var major = this.majorValueList.map((item) => item.selectedValue[item.selectedValue.length - 1]).toString(',');
if (major=='') { if (major == '') {
callback(new Error('Please select the Research areas')); callback(new Error('Please select the Research areas'));
} else { } else {
callback(); callback();
} }
// 如果你需要在此处使用 this 访问 Vue 实例的数据，使用箭头函数保持上下文 // 如果你需要在此处使用 this 访问 Vue 实例的数据，使用箭头函数保持上下文
// 其他逻辑 // 其他逻辑
} }
} }
], ],
abstrart: [ abstrart: [
{ {
@@ -2509,10 +2510,27 @@ export default {
this.form.checkedjours = []; this.form.checkedjours = [];
this.form.istransfer = false; this.form.istransfer = false;
this.form.becomeRev = false; this.form.becomeRev = false;
if (this.$route.query.id) {
this.saveArticle();
}
this.initMajor(); this.initMajor();
// this.getTopics() // this.getTopics()
}, },
saveArticle() {
// api/Article/changeJournal
this.$api
.post('api/Article/changeJournal', {
article_id: this.$route.query.id,
journal_id: this.form.journal
})
.then((res) => {
if (res.code == 0) {
} else {
// this.$message.error(res.msg);
}
});
},
// 点击tab变化 // 点击tab变化
StepCode(e) { StepCode(e) {
console.log('🚀 ~ StepCode ~ e111:', e); console.log('🚀 ~ StepCode ~ e111:', e);
@@ -2610,14 +2628,17 @@ export default {
}, },
// 点击进行下一步 // 点击进行下一步
onStep(e) { onStep(e) {
console.log('this.majorValueList at line 2604:', this.majorValueList);
console.log('this.majorValueList at line 2604:', this.majorValueList) console.log('this.form at line 2622:', this.form);
console.log('this.form at line 2622:', this.form)
this.$refs.articleform.validate((valid) => { this.$refs.articleform.validate((valid) => {
if (valid) { if (valid) {
if (e == 1) { if (e == 1) {
if (this.form.journal == 0 || !this.form.journal) {
this.$message.error('Please select the Journal');
return false;
}
// this.onStaging(1) // this.onStaging(1)
// setTimeout(() => { // setTimeout(() => {
// console.log('456') // console.log('456')
@@ -2633,13 +2654,15 @@ export default {
} }
} }
this.form.keyWords = fstr == '' ? '' : fstr.substring(0, fstr.length - 1); this.form.keyWords = fstr == '' ? '' : fstr.substring(0, fstr.length - 1);
this.form.major=this.majorValueList.map(item => item.selectedValue[item.selectedValue.length - 1]).toString(',') this.form.major = this.majorValueList
if(this.form.major==''){ .map((item) => item.selectedValue[item.selectedValue.length - 1])
this.$message.error('Please select the Research areas') .toString(',');
return false if (this.form.major == '') {
} this.$message.error('Please select the Research areas');
return false;
}
this.$api.post('api/Article/addArticlePart1', this.form).then((res) => { this.$api.post('api/Article/addArticlePart1', this.form).then((res) => {
if (res.code == 0) { if (res.code == 0) {
this.stagingID = res.data.article_id; this.stagingID = res.data.article_id;
this.form.article_id = res.data.article_id; this.form.article_id = res.data.article_id;
@@ -2716,7 +2739,12 @@ export default {
onStaging(e) { onStaging(e) {
var that = this; var that = this;
console.log('e at line 2584:', e); console.log('e at line 2584:', e);
console.log('this.form at line 2622:', this.form);
if (e == 1) { if (e == 1) {
if (this.form.journal == 0 || !this.form.journal) {
this.$message.error('Please select the Journal');
return false;
}
var flist = this.keywordsList; var flist = this.keywordsList;
var fstr = ''; var fstr = '';
for (var fu in flist) { for (var fu in flist) {
@@ -2724,15 +2752,14 @@ export default {
fstr += flist[fu].ke.trim() + ','; fstr += flist[fu].ke.trim() + ',';
} }
} }
console.log('this.form at line 2707:', this.form) console.log('this.form at line 2707:', this.form);
this.form.keyWords = fstr == '' ? '' : fstr.substring(0, fstr.length - 1); this.form.keyWords = fstr == '' ? '' : fstr.substring(0, fstr.length - 1);
this.form.major=this.majorValueList.map(item => item.selectedValue[item.selectedValue.length - 1]).toString(',') this.form.major = this.majorValueList.map((item) => item.selectedValue[item.selectedValue.length - 1]).toString(',');
if(this.form.major==''){ if (this.form.major == '') {
this.$message.error('Please select the Research areas') this.$message.error('Please select the Research areas');
return false return false;
} }
this.$api.post('api/Article/addArticlePart1', this.form).then((res) => { this.$api.post('api/Article/addArticlePart1', this.form).then((res) => {
if (res.code == 0) { if (res.code == 0) {
this.stagingID = res.data.article_id; this.stagingID = res.data.article_id;
this.form.article_id = res.data.article_id; this.form.article_id = res.data.article_id;
@@ -2869,10 +2896,14 @@ export default {
console.log(res.data.base); console.log(res.data.base);
// this.form.topics = res.data.base.topics // this.form.topics = res.data.base.topics
// 领域 // 领域
this.majorValueList = res.data.majors.map(item => ({ this.majorValueList = res.data.majors.map((item) => ({
selectedValue: Array.isArray(item.major)
selectedValue: Array.isArray(item.major) ? item.major : (typeof item.major === 'string' ? item.major.split(',').map(Number) : [item.major]) ? item.major
})); console.log('this.majorValueList at line 2853:', this.majorValueList) : typeof item.major === 'string'
? item.major.split(',').map(Number)
: [item.major]
}));
console.log('this.majorValueList at line 2853:', this.majorValueList);
// this.$api // this.$api
// .post('api/Major/getMajorForAddArticle', { // .post('api/Major/getMajorForAddArticle', {
// journal_id: this.form.journal, // journal_id: this.form.journal,
@@ -3310,26 +3341,30 @@ export default {
} }
.jour_ku_all { .jour_ku_all {
font-size: 12px; font-size: 14px;
float: left; float: left;
width: 265px; width: 48%;
padding-left: 10px; padding-left: 10px;
cursor: pointer; cursor: pointer;
color: #666; color: #666;
line-height: 26px; line-height: 26px;
} }
.jour_ku_all:nth-child(3n + 1) { /* .jour_ku_all:nth-child(3n + 1) {
width: 230px; width: 230px;
} }
.jour_ku_all:nth-child(3n + 2) { .jour_ku_all:nth-child(3n + 2) {
width: 220px; width: 220px;
} } */
.jour_ku_all.B_style { .jour_ku_all.B_style {
color: #006699; color: #1161ea;
font-weight: bold; font-weight: bold;
font-size: 16px;
background: #ebf5ff;
border-radius: 4px;
/* border: 1px solid #b3d8ff ; */
} }
.tally_jour { .tally_jour {

10
src/components/page/components/Tinymce/index copy 2.vue
View File

@@ -41,7 +41,7 @@ const tableStyle = ` b span{
table-layout: auto; /* 自动调整列宽 */ table-layout: auto; /* 自动调整列宽 */
text-align:left; text-align:left;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -53,7 +53,7 @@ const tableStyle = ` b span{
word-wrap: break-word; /* 长单词自动换行 */ word-wrap: break-word; /* 长单词自动换行 */
word-break: break-word; word-break: break-word;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -80,7 +80,7 @@ const tableStyle = ` b span{
margin:0; margin:0;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -89,7 +89,7 @@ const tableStyle = ` b span{
color:#000000;text-align:left !important; color:#000000;text-align:left !important;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -97,7 +97,7 @@ const tableStyle = ` b span{
table .color-highlight{ table .color-highlight{
color:rgb(0,130,170) !important; color:rgb(0,130,170) !important;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;

202
src/components/page/components/Tinymce/index.vue
View File

@@ -41,7 +41,7 @@ const tableStyle = ` b span{
table-layout: auto; /* 自动调整列宽 */ table-layout: auto; /* 自动调整列宽 */
text-align:left; text-align:left;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -53,7 +53,7 @@ const tableStyle = ` b span{
word-wrap: break-word; /* 长单词自动换行 */ word-wrap: break-word; /* 长单词自动换行 */
word-break: break-word; word-break: break-word;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -82,7 +82,7 @@ const tableStyle = ` b span{
margin:0; margin:0;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -91,7 +91,7 @@ const tableStyle = ` b span{
color:#000000;text-align:left !important; color:#000000;text-align:left !important;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -99,7 +99,7 @@ const tableStyle = ` b span{
table .color-highlight{ table .color-highlight{
color:rgb(0,130,170) !important; color:rgb(0,130,170) !important;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -118,6 +118,15 @@ const tableStyle = ` b span{
.wordTableHtml table tr.table-header-row:nth-of-type(2) td { .wordTableHtml table tr.table-header-row:nth-of-type(2) td {
border-bottom: 1px solid #000 !important; border-bottom: 1px solid #000 !important;
} }
mjx-container {
font-size: 14px !important;
;
}
wmath{
width: 100%;
display: block;
display: flex;
}
`; `;
export default { export default {
@@ -148,7 +157,7 @@ export default {
height: { height: {
type: Number, type: Number,
required: false, required: false,
default: 360 default: 400
}, },
width: { width: {
type: String, type: String,
@@ -220,9 +229,12 @@ export default {
}, },
watch: { watch: {
value(val) { value(val) {
console.log('val at line 208:', val); // console.log('val at line 208:', val);
if (!this.hasChange && this.hasInit) { if (!this.hasChange && this.hasInit) {
this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val)); this.$nextTick(() => {
window.tinymce.get(this.tinymceId).setContent(val);
// window.renderMathJax(); // 主动触发 MathJax 渲染
});
} }
} }
}, },
@@ -238,6 +250,9 @@ export default {
this.destroyTinymce(); this.destroyTinymce();
}, },
methods: { methods: {
onpenLatex() {
console.log('at line 254:', '打开数字公式');
},
handleSubmit() { handleSubmit() {
this.$refs.uploadImage.handleSubmit(); this.$refs.uploadImage.handleSubmit();
}, },
@@ -275,20 +290,17 @@ export default {
window.tinymce.init({ window.tinymce.init({
inline: false, // 使用 iframe 模式 inline: false, // 使用 iframe 模式
selector: `#${this.tinymceId}`, selector: `#${this.tinymceId}`,
// noneditable_regexp: "/<wmath>.*?<\/wmath>/g",
content_css: false, // 禁用默认样式 content_css: false, // 禁用默认样式
table_resize_bars: true, // 启用拖动调整功能 table_resize_bars: true, // 启用拖动调整功能
valid_elements: this.type == 'table' ? '*[*]' : 'img[src|alt|width|height],strong,em,sub,sup,blue,table,b,i', // 允许的标签和属性 valid_elements: this.type == 'table' ? '*[*]' : 'img[src|alt|width|height],strong,em,sub,sup,blue,table,b,i,wmath', // 允许的标签和属性
// valid_elements: '*[*]', // 允许所有 HTML 标签 // valid_elements: '*[*]', // 允许所有 HTML 标签
noneditable_editable_class: 'MathJax',
height: this.height, height: this.height,
paste_preprocess: function (plugin, args) { paste_preprocess: function (plugin, args) {
let content = args.content; let content = args.content; // 获取粘贴的内容
// 创建一个临时 div 元素来解析粘贴的 HTML
let tempDiv = document.createElement('div'); let tempDiv = document.createElement('div');
tempDiv.innerHTML = content; tempDiv.innerHTML = content;
// 检查粘贴的内容是否包含 <table> 元素
if (tempDiv.querySelector('table')) { if (tempDiv.querySelector('table')) {
console.log('粘贴的内容包含表格'); console.log('粘贴的内容包含表格');
if (_this.type == 'table') { if (_this.type == 'table') {
@@ -324,30 +336,121 @@ export default {
// _this.updateTableStyles(container); // 根据需要应用额外的样式 // _this.updateTableStyles(container); // 根据需要应用额外的样式
args.content = container.innerHTML; // 更新处理后的内容 args.content = container.innerHTML; // 更新处理后的内容
}); });
}else{ } else {
} }
} else { } else {
if (_this.isAutomaticUpdate) { console.log('Original content:', content); // 输出原始粘贴内容
args.content = _this.$commonJS.transformHtmlString(args.content); // 更新处理后的内容
// 改进的正则表达式，匹配 $$...$$ 格式的 LaTeX 公式
} const mathRegex = /\$\$([^$]+)\$\$/g;
console.log('粘贴的内容不包含表格');
// 如果粘贴的内容包含 $$...$$ 格式的公式，进行处理
content = content.replace(mathRegex, function (match, formula) {
console.log('Matched formula:', formula); // 输出每个匹配的公式
// 将公式包裹在 <wmath> 标签中，保留 $$...$$ 结构
return `<wmath data-latex="${match}">${match}</wmath>`;
});
console.log('Processed content:', content); // 输出处理后的内容
} }
// 阻止默认的粘贴行为
// 更新 args.content 为处理后的内容
// 阻止默认的粘贴行为，确保自定义处理优先执行
if (args.event) { if (args.event) {
args.event.preventDefault(); // 阻止默认的粘贴处理 args.event.preventDefault();
args.event.stopPropagation(); // 阻止事件冒泡，确保自定义处理优先执行 args.event.stopPropagation();
} }
if (_this.isAutomaticUpdate) {
args.content = _this.$commonJS.transformHtmlString(content); // 更新处理后的内容
} else {
args.content = content;
}
setTimeout(() => {
window.renderMathJax(_this.tinymceId);
}, 10);
}, },
// paste_preprocess: function (plugin, args) {
// let content = args.content;
// // 创建一个临时 div 元素来解析粘贴的 HTML
// let tempDiv = document.createElement('div');
// tempDiv.innerHTML = content;
// // 检查粘贴的内容是否包含 <table> 元素
// if (tempDiv.querySelector('table')) {
// console.log('粘贴的内容包含表格');
// if (_this.type == 'table') {
// _this.$commonJS.parseTableToArray(content, (tableList) => {
// console.log('res at line 104:', tableList);
// var contentHtml = `
// <div class="thumbnailTableBox wordTableHtml table_Box" style="">
// <table border="1" style="width: auto; border-collapse: collapse; text-align: center;">
// ${tableList
// .map((row) => {
// return `
// <tr>
// ${row
// .map((cell) => {
// return `
// <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
// <span>${cell.text || ''}</span>
// </td>
// `;
// })
// .join('')}
// </tr>
// `;
// })
// .join('')}
// </table>
// </div>
// `;
// const container = document.createElement('div');
// container.innerHTML = contentHtml;
// // _this.updateTableStyles(container); // 根据需要应用额外的样式
// args.content = container.innerHTML; // 更新处理后的内容
// });
// } else {
// }
// } else {
// const mathRegex = /\$\$([^$]+)\$\$/g;
// // 如果粘贴的内容包含 $$...$$ 格式的公式，进行处理
// content = content.replace(mathRegex, function (match, formula) {
// console.log('Matched formula:', formula); // 输出每个匹配的公式
// // 将公式包裹在 <wmath> 标签中，保留 $$...$$ 结构
// return `<wmath data-latex="${match}">${match}</wmath>`;
// });
// // 更新 args.content 为处理后的内容
// if (_this.isAutomaticUpdate) {
// args.content = _this.$commonJS.transformHtmlString(content); // 更新处理后的内容
// }
// setTimeout(() => {
// window.renderMathJax(_this.tinymceId);
// }, 50);
// console.log('粘贴的内容不包含表格');
// }
// // 阻止默认的粘贴行为
// if (args.event) {
// args.event.preventDefault(); // 阻止默认的粘贴处理
// args.event.stopPropagation(); // 阻止事件冒泡，确保自定义处理优先执行
// }
// },
content_style: ` content_style: `
${tableStyle} ${tableStyle}
${_this.wordStyle} ${_this.wordStyle}
`, `,
formats: { formats: {
@@ -362,7 +465,7 @@ export default {
custom_colors: false, custom_colors: false,
color_map: ['0082AA', 'TMR Blue'], color_map: ['0082AA', 'TMR Blue'],
plugins: 'texttransform', // 启用 forecolor 和 code 插件 plugins: 'texttransform kityformula-editor noneditable', // 启用 forecolor 和 code 插件
// plugins: 'forecolor code paste table image mathType searchreplace raw', // 启用 forecolor 和 code 插件 // plugins: 'forecolor code paste table image mathType searchreplace raw', // 启用 forecolor 和 code 插件
end_container_on_empty_block: true, end_container_on_empty_block: true,
content_css: 'default', // 加载 TinyMCE 默认样式表 content_css: 'default', // 加载 TinyMCE 默认样式表
@@ -374,7 +477,15 @@ export default {
//设置自定义按钮 myCustomToolbarButton //设置自定义按钮 myCustomToolbarButton
setup(ed) { setup(ed) {
_this.$commonJS.initEditorButton(_this, ed); _this.$commonJS.initEditorButton(_this, ed);
ed.on('click', function (e) {
console.log('e at line 471:', e);
// 判断点击是否为 wmath 标签
const wmathElement = e.target.closest('wmath');
if (wmathElement) {
// 执行点击 wmath 标签时的操作
}
});
ed.ui.registry.addButton('uploadWord', { ed.ui.registry.addButton('uploadWord', {
text: 'Word', text: 'Word',
icon: 'import-word', // 使用自定义图标 icon: 'import-word', // 使用自定义图标
@@ -421,15 +532,18 @@ export default {
ed.on('init', function () { ed.on('init', function () {
_this.$commonJS.inTinymceButtonClass(); _this.$commonJS.inTinymceButtonClass();
const editorBody = ed.getBody(); const editorBody = ed.getBody();
// 创建 MutationObserver 监听内容变化 // 创建 MutationObserver 监听内容变化
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {
const currentContent = ed.getContent(); const currentContent = ed.getContent();
console.log('currentContent at line 447:', currentContent);
if (_this.isAutomaticUpdate) { if (_this.isAutomaticUpdate) {
// _this.$emit('updateChange', _this.$commonJS.decodeHtml(currentContent)); // _this.$emit('updateChange', _this.$commonJS.decodeHtml(currentContent));
_this.$emit('updateChange',currentContent); _this.$commonJS.replaceWMathContent(currentContent, (res) => {
console.log('res at line 451:', res);
_this.$emit('updateChange', res);
});
} }
}); });
@@ -486,11 +600,21 @@ export default {
init_instance_callback: (editor) => { init_instance_callback: (editor) => {
if (_this.value) { if (_this.value) {
editor.setContent(_this.value); editor.setContent(_this.value);
console.log('at line 489:', ' 页面');
setTimeout(() => {
window.renderMathJax(_this.tinymceId); // 初始化时渲染 MathJax
}, 10);
} }
_this.hasInit = true; _this.hasInit = true;
editor.on('NodeChange Change KeyUp SetContent', () => { editor.on('NodeChange Change KeyUp SetContent', () => {
this.hasChange = true; this.hasChange = true;
this.$emit('input', editor.getContent()); this.$emit('input', editor.getContent());
console.log('at line 518:', '改变');
// setTimeout(() => {
// window.renderMathJax(); // 初始化时渲染 MathJax
// }, 50);
}); });
} }
}); });
@@ -516,16 +640,16 @@ export default {
window.tinymce.get(this.tinymceId).setContent(value); window.tinymce.get(this.tinymceId).setContent(value);
}, },
//获取内容 //获取内容
async getContent(type) { async getContent(type) {
var content = window.tinymce.get(this.tinymceId).getContent(); var content = window.tinymce.get(this.tinymceId).getContent();
content = content.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, ''); // 去除span标签 console.log('content at line 627:', content);
content = content.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, ''); // 去除span标签
content = content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>'); content = content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>');
content = content.replace(/<em>/g, '<i>').replace(/<\/em>/g, '</i>'); content = content.replace(/<em>/g, '<i>').replace(/<\/em>/g, '</i>');
content = content.replace(/&nbsp;/g, ' '); // 将所有 &nbsp; 替换为空格 content = content.replace(/&nbsp;/g, ' '); // 将所有 &nbsp; 替换为空格
this.$emit('getContent', type, content); console.log('content at line 632:', content);
this.$emit('getContent', type, content);
}, },
async export(type, data) { async export(type, data) {

177
src/components/page/components/table/LateX.vue
View File

@@ -1,56 +1,151 @@
<template> <template>
<div> <div style="position: fixed;top: 0;left: 0;background-color: #f8f8f8; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(to top, #fbfffe, #ebf9ff);">
<label>输入 LaTeX 公式:</label> <div class="navbar-default">
<div ref="mathField" class="math-container"></div> <div class="nav commonWidth" style="height: 100%">
<p>LaTeX 代码: {{ latex }}</p> <div class="title">Digital Formula Editor</div>
</div>
</div> </div>
<div class="commonWidth" style="padding:40px 20px; box-sizing: border-box;">
<!-- <div style="margin-bottom: 20px;font-size: 20px;">Numerical formula:</div> -->
<div style="display: flex;align-items: center;justify-content: space-between;">
<div ref="mathField" class="math-container" style="width: calc(100% - 100px);"></div>
<span @click="copyLatex" style="font-size: 20px;width: 80px;cursor: pointer;">📋 Copy </span>
</div>
<!-- 公式显示框 -->
<div class="formula-box" :style="{ opacity: showLatex ? 1 : 0 }">
<p>LaTeX 代码:</p>
<textarea ref="latexBox" class="latex-text" readonly>$${{ latex }}$$</textarea>
</div>
</div>
</div>
</template> </template>
<script> <script>
import { MathfieldElement } from 'mathlive'; // 直接导入 MathLive 组件 import { MathfieldElement } from 'mathlive';
export default { export default {
data() { data() {
return { return {
latex: '\\frac{a}{b} + \\sqrt{x^2 + y^2} + e^{i\\pi}', // 默认 LaTeX 公式, latex: '', // 默认公式
mathFieldInstance: null // latex: '\\frac{a}{b} + \\sqrt{x^2 + y^2} + e^{i\\pi}', // 默认公式
}; mathFieldInstance: null,
}, showLatex: false, // 控制 LaTeX 代码框的显示与隐藏
watch: { };
latex(newVal) { },
if (this.mathFieldInstance && this.mathFieldInstance.value !== newVal) { mounted() {
this.mathFieldInstance.setValue(newVal); if (this.$refs.mathField) {
} // 创建 MathfieldElement 组件
} const mf = new MathfieldElement();
}, mf.style.width = '100%';
mf.virtualKeyboardMode = 'manual'; // 显示虚拟键盘
mf.value = this.latex; // 设置默认值
mounted() { // 监听输入变化，更新 LaTeX 代码
if (this.$refs.mathField) { mf.addEventListener('input', (event) => {
// 创建 MathfieldElement 组件 this.latex = event.target.value;
const mf = new MathfieldElement(); });
mf.style.width = '100%'; // 让输入框撑满
mf.virtualKeyboardMode = 'manual'; // 显示虚拟键盘 // 挂载到 DOM
mf.addEventListener('input', (event) => { this.$refs.mathField.appendChild(mf);
this.latex = event.target.value; // 监听输入并更新 LaTeX 公式 this.mathFieldInstance = mf;
});
mf.value = this.latex; // 设置默认值 // 强制显示虚拟键盘并保持显示
this.$refs.mathField.appendChild(mf); // 挂载到 DOM mf.executeCommand('showVirtualKeyboard');
this.mathFieldInstance = mf;
} else { // 保证虚拟键盘持续显示
console.error('MathLive 未正确加载'); this.keepKeyboardVisible(mf);
} } else {
}, console.error('MathLive 未正确加载');
beforeDestroy() {
this.mathFieldInstance = null; // 组件销毁时清除实例
} }
},
methods: {
keepKeyboardVisible(mf) {
// 每秒确保虚拟键盘显示
setInterval(() => {
mf.executeCommand('showVirtualKeyboard');
}, 20); // 每秒确保键盘显示
},
copyLatex() {
if (this.$refs.latexBox) {
this.$refs.latexBox.select(); // 选中文本
document.execCommand('copy'); // 复制到剪贴板
setTimeout(( )=>{
window.close();
},100)
}
},
},
beforeDestroy() {
this.mathFieldInstance = null; // 组件销毁时清除实例
}
}; };
</script> </script>
<style> <style scoped>
.commonWidth {
width: 100%;
margin: 0 auto;
}
.title {
font-size: 32px;
font-weight: bold;
line-height: 80px;
background-color: #0f4eb6;
color: #fff;
}
.navbar-default {
width: 100%;
height: 80px;
background-color: #0f4eb6;
border-color: #e7e7e7;
}
.math-container { .math-container {
min-height: 40px; min-height: 40px;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 5px; padding: 5px;
font-size: 18px; font-size: 18px;
/* margin-bottom: 20px; */
}
/* 公式弹出框样式 */
.formula-box {
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* LaTeX 代码框 */
.latex-text {
width: 100%;
height: 50px;
font-size: 16px;
border: 1px solid #ccc;
padding: 5px;
margin-bottom: 10px;
resize: none;
}
/* 复制按钮 */
button {
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
/* 防止虚拟键盘覆盖 */
::v-deep .ML__virtual-keyboard-toggle {
opacity: 1 !important; /* 确保虚拟键盘的按钮可见 */
} }
</style> </style>

2
src/components/page/components/table/content.vue
View File

@@ -22,7 +22,7 @@
max-height: 60vh; max-height: 60vh;
overflow: auto; overflow: auto;
font-size: 12px; font-size: 12px;
font-size: 7.5pt; /* 字体大小 */ font-size: 14px; /* 字体大小 */
margin-top: 0pt; /* 段前间距 */ margin-top: 0pt; /* 段前间距 */
margin-bottom: 0pt; /* 段后间距 */ margin-bottom: 0pt; /* 段后间距 */

10
src/components/page/components/table/editTable.vue
View File

@@ -92,7 +92,7 @@ b span{
table-layout: auto; /* 自动调整列宽 */ table-layout: auto; /* 自动调整列宽 */
text-align:left; text-align:left;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -104,7 +104,7 @@ b span{
word-wrap: nomarl; /* 长单词自动换行 */ word-wrap: nomarl; /* 长单词自动换行 */
word-break: nomarl; word-break: nomarl;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -134,7 +134,7 @@ b span{
margin:0; margin:0;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -143,7 +143,7 @@ b span{
color:#000000;text-align:left !important; color:#000000;text-align:left !important;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -151,7 +151,7 @@ b span{
table .color-highlight{ table .color-highlight{
color:rgb(0,130,170) !important; color:rgb(0,130,170) !important;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;

19
src/components/page/components/table/table.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div>
<!--uploadWord |customButtonExportWord |customButtonExportImg --> <!--uploadWord |customButtonExportWord |customButtonExportImg -->
<tinymce <tinymce
@@ -8,23 +8,24 @@
ref="tinymceChild1" ref="tinymceChild1"
:wordStyle="wordStyle" :wordStyle="wordStyle"
@getContent="getContent" @getContent="getContent"
:height="calcDynamicWidth()"
:value="updatedHtml" :value="updatedHtml"
:typesettingType="typesettingType" :typesettingType="typesettingType"
class="paste-area text-container" class="paste-area text-container"
:toolbar="['bold italic|customBlue removeBlue|myuppercase myuppercasea Line|subscript superscript|table tabledelete| searchreplace |clearButton']" :toolbar="['bold italic|customBlue removeBlue|kityformula-editor |myuppercase myuppercasea Line|subscript superscript|table tabledelete| searchreplace |clearButton']"
style=" style="
/* white-space: pre-line; */ /* white-space: pre-line; */
line-height: 12px; line-height: 12px;
max-height: 60vh; /* max-height: 60vh; */
overflow: auto; overflow: auto;
font-size: 12px; font-size: 12px;
font-size: 7.5pt; /* 字体大小 */ font-size: 14px; /* 字体大小 */
margin-top: 0pt; /* 段前间距 */ margin-top: 0pt; /* 段前间距 */
margin-bottom: 0pt; /* 段后间距 */ margin-bottom: 0pt; /* 段后间距 */
" "
></tinymce> ></tinymce>
</div>
</div> </div>
</template> </template>
@@ -100,6 +101,11 @@ export default {
} }
}, },
methods: { methods: {
calcDynamicWidth() {
const parentWidth = window.innerHeight; // 获取窗口宽度
const result = parentWidth - 420; // 计算 `100% - 200px`
return result ;
},
isHeaderRow(rowIndex,table) { isHeaderRow(rowIndex,table) {
@@ -113,11 +119,12 @@ export default {
}, },
getContent(type, content) { getContent(type, content) {
if (content) { if (content) {
console.log('content at line 121:', content)
const container = document.createElement('div'); const container = document.createElement('div');
container.innerHTML = content; container.innerHTML = content;
this.$commonJS.parseTableToArray(content, (table) => { this.$commonJS.parseTableToArray(content, (table) => {
console.log('res at line 104:', table); console.log('res at line 104:', table);
// return false
this.$emit('getContent', type, { html_data: content, table: table }); this.$emit('getContent', type, { html_data: content, table: table });
}); });
} else { } else {

10
src/components/page/components/table/word copy.vue
View File

@@ -373,7 +373,7 @@ b span{
table-layout: auto; /* 自动调整列宽 */ table-layout: auto; /* 自动调整列宽 */
text-align:left; text-align:left;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -385,7 +385,7 @@ b span{
word-wrap: nomarl; /* 长单词自动换行 */ word-wrap: nomarl; /* 长单词自动换行 */
word-break: nomarl; word-break: nomarl;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -413,7 +413,7 @@ b span{
margin:0; margin:0;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -422,7 +422,7 @@ b span{
color:#000000;text-align:left !important; color:#000000;text-align:left !important;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -430,7 +430,7 @@ b span{
table .color-highlight{ table .color-highlight{
color:rgb(0,130,170) !important; color:rgb(0,130,170) !important;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;

54
src/components/page/components/table/word.vue
View File

@@ -65,7 +65,6 @@
<i class="el-icon-document"> </i> <i class="el-icon-document"> </i>
Batch Add content Batch Add content
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -117,8 +116,7 @@
position: relative; position: relative;
" "
> >
<!-- <common-late-x></common-late-x> -->
<!-- <common-late-x></common-late-x> -->
<template v-for="(item, index) in wordList"> <template v-for="(item, index) in wordList">
<el-checkbox <el-checkbox
@change="updateUniqueIds" @change="updateUniqueIds"
@@ -155,7 +153,7 @@
<el-button <el-button
v-if="currentId == item.am_id" v-if="currentId == item.am_id"
style="background-color: #006699d1; font-weight: bold; color: #fff; font-size: 16px !important" style="background-color: #006699d1; font-weight: bold; color: #fff; font-size: 16px !important"
:style="index==0?' opacity: 0.2;':' opacity: 1;'" :style="index == 0 ? ' opacity: 0.2;' : ' opacity: 1;'"
size="mini" size="mini"
plain plain
:disabled="index != 0 ? false : true" :disabled="index != 0 ? false : true"
@@ -164,15 +162,9 @@
> >
<el-button <el-button
v-if="currentId == item.am_id" v-if="currentId == item.am_id"
style=" style="background-color: #006699d1; font-weight: bold; color: #fff; font-size: 16px !important"
background-color: #006699d1;
font-weight: bold;
color: #fff;
font-size: 16px !important;
"
size="mini" size="mini"
:style="index == wordList.length - 1 ?' opacity: 0.2;':' opacity: 1;'" :style="index == wordList.length - 1 ? ' opacity: 0.2;' : ' opacity: 1;'"
plain plain
:disabled="index == wordList.length - 1 ? true : false" :disabled="index == wordList.length - 1 ? true : false"
@click="changeSort('down')" @click="changeSort('down')"
@@ -181,6 +173,7 @@
</div> </div>
<div <div
@dblclick="dblclickEdit(item.am_id, 'img', item, index)"
:key="item.am_id" :key="item.am_id"
id="drop-target" id="drop-target"
:class="highlightImg(item.ami_id, item.checks ? item.checks : [])" :class="highlightImg(item.ami_id, item.checks ? item.checks : [])"
@@ -208,6 +201,7 @@
</font> </font>
</div> </div>
<div <div
@dblclick="dblclickEdit(item.am_id, 'table', item, index)"
id="drop-target" id="drop-target"
@dragover="handleDragOver" @dragover="handleDragOver"
@dragenter="handleDragEnter" @dragenter="handleDragEnter"
@@ -253,6 +247,7 @@
</div> </div>
<div <div
@dblclick="dblclickEdit(item.am_id, 'text', item, index)"
v-else v-else
id="drop-target" id="drop-target"
@dragover="handleDragOver" @dragover="handleDragOver"
@@ -518,7 +513,7 @@ b span{
table-layout: auto; /* 自动调整列宽 */ table-layout: auto; /* 自动调整列宽 */
text-align:left; text-align:left;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -530,7 +525,7 @@ b span{
word-wrap: nomarl; /* 长单词自动换行 */ word-wrap: nomarl; /* 长单词自动换行 */
word-break: nomarl; word-break: nomarl;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -558,7 +553,7 @@ b span{
margin:0; margin:0;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -567,7 +562,7 @@ b span{
color:#000000;text-align:left !important; color:#000000;text-align:left !important;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -575,7 +570,7 @@ b span{
table .color-highlight{ table .color-highlight{
color:rgb(0,130,170) !important; color:rgb(0,130,170) !important;
font-family:'Charis SIL' !important; font-family:'Charis SIL' !important;
font-size: 7.5000pt !important; font-size: 14px !important;
mso-font-kerning: 1.0000pt !important; mso-font-kerning: 1.0000pt !important;
line-height: 20px !important; line-height: 20px !important;
mos-line-height: 20px !important; mos-line-height: 20px !important;
@@ -736,6 +731,7 @@ export default {
if (val) { if (val) {
this.wordList = [...this.contentList]; this.wordList = [...this.contentList];
this.$nextTick(() => { this.$nextTick(() => {
window.renderMathJax(); // 主动触发 MathJax 渲染
this.getCommentsData(); this.getCommentsData();
}); });
} }
@@ -754,6 +750,7 @@ export default {
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
window.renderMathJax(); // 主动触发 MathJax 渲染
this.getCommentsData(); this.getCommentsData();
if (!this.isPreview && localStorage.getItem('scrollPosition')) { if (!this.isPreview && localStorage.getItem('scrollPosition')) {
this.$refs.scrollDiv.scrollTop = localStorage.getItem('scrollPosition'); // 滚动到 500px 位置 this.$refs.scrollDiv.scrollTop = localStorage.getItem('scrollPosition'); // 滚动到 500px 位置
@@ -770,6 +767,7 @@ export default {
this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true }); this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
}, },
activated() { activated() {
window.renderMathJax(); // 主动触发 MathJax 渲染
this.isShowEditComment(); this.isShowEditComment();
this.typesettingType = 1; this.typesettingType = 1;
this.editors = {}; this.editors = {};
@@ -797,10 +795,10 @@ export default {
}, },
methods: { methods: {
changeSort(type) { changeSort(type) {
console.log('type at line 782:', type); console.log('type at line 782:', type);
if (this.currentId) { if (this.currentId) {
this.$emit('changeSort',type, this.currentId); this.$emit('changeSort', type, this.currentId);
} }
}, },
addContent() { addContent() {
if (this.currentId) { if (this.currentId) {
@@ -808,7 +806,6 @@ export default {
} else { } else {
this.$message.warning('Please select content'); this.$message.warning('Please select content');
} }
}, },
cacheSelection() { cacheSelection() {
const selection = window.getSelection(); const selection = window.getSelection();
@@ -1251,6 +1248,7 @@ export default {
} }
}); });
}, },
initializeEditor(id, type, data, index) { initializeEditor(id, type, data, index) {
this.clearHighlight(); this.clearHighlight();
this.selectedIds = []; this.selectedIds = [];
@@ -1261,7 +1259,6 @@ export default {
this.currentId = id; this.currentId = id;
this.currentIndex = index; this.currentIndex = index;
this.currentData = data; this.currentData = data;
// const editorId = `editor${index}`; // const editorId = `editor${index}`;
// // 检查当前编辑器是否已经初始化 // // 检查当前编辑器是否已经初始化
@@ -1285,6 +1282,19 @@ export default {
// this.$set(this.editors, editorId, tinymce.get(`editor${index}`)); // this.$set(this.editors, editorId, tinymce.get(`editor${index}`));
} }
}, },
dblclickEdit(id, type, data, index) {
if (!this.isPreview) {
this.currentId = id;
this.currentIndex = index;
this.currentData = data;
this.onEdit();
}
this.clearHighlight();
this.selectedIds = [];
this.wordList.forEach((item, index) => {
item.checked = false;
});
},
deleteComment(data) { deleteComment(data) {
this.$emit('deleteComment', data); this.$emit('deleteComment', data);
}, },

24
src/main.js
View File

@@ -15,7 +15,24 @@ import Common from './components/common/common'
Vue.prototype.$validateString = function (str) { Vue.prototype.$validateString = function (str) {
return /^[a-zA-Z\s\u00C0-\u00FF\u0100-\u017F-]+$/.test(str); return /^[a-zA-Z\s\u00C0-\u00FF\u0100-\u017F-]+$/.test(str);
} }
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']], // 行内公式
displayMath: [['$$', '$$'], ['\\[', '\\]']], // 块级公式
},
svg: { fontCache: 'global' }
};
// 监听 DOM 变化，并自动渲染公式
Vue.prototype.$renderMath = function () {
if (window.MathJax && window.MathJax.typeset) {
setTimeout(() => {
window.MathJax.typeset();
}, 100); // 延迟防止 Vue 还未完全渲染
} else {
console.warn('MathJax 未正确加载');
}
};
import VXETable from 'vxe-table' import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css' import 'vxe-table/lib/style.css'
@@ -146,5 +163,8 @@ router.beforeEach((to, from, next) => {
new Vue({ new Vue({
router, router,
i18n, i18n,
render: h => h(App) render: h => h(App),
mounted() {
this.$renderMath(); // 页面加载后自动渲染
}
}).$mount('#app'); }).$mount('#app');

9
src/router/index.js
View File

@@ -992,6 +992,15 @@ export default new Router({
hideSidebar: true hideSidebar: true
} }
}, },
{
path: '/LateX', //用户端预收录-引用编辑
component: () => import('../components/page/components/table/LateX.vue'),
meta: {
title: 'LateX',
hideSidebar: true,
hideTitle: true,
}
},
{ {
name: 'PreIngestedEditor', name: 'PreIngestedEditor',
path: '/PreIngestedEditor', // 编辑端 - 预收录编辑页面 path: '/PreIngestedEditor', // 编辑端 - 预收录编辑页面