This commit is contained in:
2025-01-02 13:40:14 +08:00
parent 569124b4ad
commit 46fd1eefc1
5 changed files with 173 additions and 69 deletions

View File

@@ -1165,6 +1165,14 @@ a {
mso-font-kerning: 1pt !important;
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.wordTableHtml table blue {
color: rgb(0, 130, 170) !important;
font-family: 'Charis SIL' !important;
font-size: 7.5pt !important;
mso-font-kerning: 1pt !important;
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.wordTableHtml table tr:first-child td {
border-top: 1px solid #000 !important;

View File

@@ -1153,4 +1153,6 @@ convertParagraphsToHtml(paragraphs) {
// 通用递归方法
};
export { mediaUrl };
export { mediaUrl };

View File

@@ -461,8 +461,31 @@ export default {
content = content.replace(/\s*style="[^"]*"/g, '');
// 3. 将 <strong> 转换为 <b><em> 转换为 <i>
content = content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>');
content = content.replace(/<em>/g, '<i>').replace(/<\/em>/g, '</i>');
var div = document.createElement('div');
div.innerHTML = content; // 将 HTML 字符串加载到 div 中
// 替换所有 <strong> 为 <b>
var strongTags = div.getElementsByTagName('strong');
for (var i = 0; i < strongTags.length; i++) {
var bTag = document.createElement('b');
bTag.innerHTML = strongTags[i].innerHTML; // 保留内容
strongTags[i].parentNode.replaceChild(bTag, strongTags[i]);
}
// 替换所有 <em> 为 <i>
var emTags = div.getElementsByTagName('em');
for (var i = 0; i < emTags.length; i++) {
var iTag = document.createElement('i');
iTag.innerHTML = emTags[i].innerHTML; // 保留内容
emTags[i].parentNode.replaceChild(iTag, emTags[i]);
}
// 获取最终修改后的 HTML
content = div.innerHTML;
// 4. 去除多余的空格:替换连续的空格、换行符、制表符等
content = content.replace(/\s+/g, ' ').trim(); // 将多个空白字符替换为一个空格,并去除前后空白

View File

@@ -339,7 +339,7 @@ export default {
bold: { inline: 'b' },
italic: { inline: 'i' }
},
body_class: 'panel-body ',
object_resizing: false,
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
@@ -382,24 +382,75 @@ export default {
ed.ui.registry.addButton('removeBlue', {
text: 'Remove Blue', // 按钮文本
onAction: function () {
var selectedContent = ed.selection.getContent(); // 获取选中的文本内容
const range = ed.selection.getRng(); // 获取选区范围
let startNode = range.startContainer; // 获取选区起始节点
let closestBlue = null;
// 如果选中内容中有 <blue> 标签,去除它们
var cleanedContent = selectedContent.replace(/<\/?blue>/g, ''); // 删除所有 <blue> 和 </blue> 标签
ed.selection.setContent(cleanedContent); // 更新内容
},
onPostRender: function (buttonApi) {
// 监听编辑器中内容的变化
ed.on('NodeChange', function () {
var selectedContent = ed.selection.getContent(); // 获取选中的内容
// 检查选中的内容是否包含 <blue> 标签
if (selectedContent.includes('<blue>')) {
buttonApi.setActive(true); // 激活按钮
} else {
buttonApi.setActive(false); // 禁用按钮
// 向上查找最近的 <blue> 标签
while (startNode) {
if (startNode.nodeName && startNode.nodeName.toLowerCase() === 'blue') {
closestBlue = startNode;
break;
}
});
startNode = startNode.parentNode;
}
if (closestBlue) {
// 如果找到最近的 <blue> 标签,移除它的外层标签,但保留内容
const parent = closestBlue.parentNode;
while (closestBlue.firstChild) {
parent.insertBefore(closestBlue.firstChild, closestBlue);
}
parent.removeChild(closestBlue);
} else {
// 未找到 <blue> 标签,仅移除选中的 <blue> 标签内容
const selectedContent = ed.selection.getContent({ format: 'html' });
// 使用正则表达式移除选区中的 <blue> 标签
const cleanedContent = selectedContent
.replace(/<blue[^>]*>/g, '') // 删除起始标签 <blue>
.replace(/<\/blue>/g, ''); // 删除结束标签 </blue>
// 更新选中的内容
ed.selection.setContent(cleanedContent);
}
}
});
ed.ui.registry.addToggleButton('toggleBlue', {
text: 'Toggle Blue', // 按钮文本
onAction: function () {
var selectedContent = ed.selection.getContent({ format: 'html' }); // 获取选中内容HTML 格式)
// 创建临时 DOM 容器
var tempDiv = document.createElement('div');
tempDiv.innerHTML = selectedContent;
// 检查是否完全被 <blue> 包裹
if (tempDiv.childNodes.length === 1 && tempDiv.firstChild.nodeName.toLowerCase() === 'blue') {
// 移除 <blue> 标签
var unwrappedContent = tempDiv.firstChild.innerHTML;
ed.selection.setContent(unwrappedContent); // 更新内容
} else {
// 添加 <blue> 标签
var wrappedContent = `<blue>${selectedContent}</blue>`;
ed.selection.setContent(wrappedContent); // 更新内容
}
},
onSetup: function (buttonApi) {
// 更新按钮状态(激活或非激活)
function updateButtonState() {
var selectedContent = ed.selection.getContent({ format: 'html' });
var tempDiv = document.createElement('div');
tempDiv.innerHTML = selectedContent;
buttonApi.setActive(
tempDiv.childNodes.length === 1 && tempDiv.firstChild.nodeName.toLowerCase() === 'blue'
);
}
// 监听编辑器中的选区变化
ed.on('NodeChange', updateButtonState);
ed.on('KeyUp', updateButtonState); // 处理键盘操作导致的内容变化
}
});
ed.ui.registry.addButton('uploadWord', {
@@ -476,7 +527,7 @@ export default {
// 插入自定义表格到编辑器中
let content = ed.getContent(); // 获取内容
content = content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>');
content = content.replace(/<em>/g, '<i>').replace(/<\/strong>/g, '</i>');
content = content.replace(/<em>/g, '<i>').replace(/<\/em>/g, '</i>');
const container = document.createElement('div');
container.innerHTML = content;
@@ -540,8 +591,11 @@ export default {
},
//获取内容
getContent(type) {
this.$emit('getContent', type, window.tinymce.get(this.tinymceId).getContent());
console.log('window.tinymce.get(this.tinymceId).getContent() at line 431:', window.tinymce.get(this.tinymceId).getContent());
var content = window.tinymce.get(this.tinymceId).getContent();
content = content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>');
content = content.replace(/<em>/g, '<i>').replace(/<\/em>/g, '</i>');
this.$emit('getContent', type, content);
console.log('window.tinymce.get(this.tinymceId).getContent() at line 431:', content);
},
async export(type, data) {

View File

@@ -388,54 +388,71 @@ export default {
content_css: 'default ',
setup(ed) {
ed.ui.registry.addButton('customBlue', {
text: 'Blue', // 按钮文本
onAction: function() {
// 在选中的文本周围包裹 <blue> 标签
var selectedText = ed.selection.getContent();
var wrappedText = `<blue>${selectedText}</blue>`;
ed.selection.setContent(wrappedText);
ed.ui.registry.addButton('customBlue', {
text: 'Blue', // 按钮文本
onAction: function () {
// 在选中的文本周围包裹 <blue> 标签
var selectedText = ed.selection.getContent();
var wrappedText = `<blue>${selectedText}</blue>`;
ed.selection.setContent(wrappedText);
}
});
ed.ui.registry.addButton('removeBlue', {
text: 'Remove Blue', // 按钮文本
onAction: function () {
var content = ed.selection.getContent(); // 获取选中的文本内容
// 如果选中内容中有 <blue> 标签,去掉它们
var cleanedContent = content.replace(/<\/?blue>/g, ''); // 删除所有 <blue> 和 </blue> 标签
// 更新编辑器中的内容
ed.selection.setContent(cleanedContent);
}
});
if(!_this.readonly){
ed.on('click', function (e) {
// 判断点击的是否是目标元素
const target = e.target;
console.log('target at line 351:', target);
if (target.classList.contains('isRemarkIcon')) {
_this.$emit('onComment', target.getAttribute('main-id'));
}
});
// // 添加批注按钮
ed.ui.registry.addButton('addImageButton', {
text: 'Add Figure',
icon: 'comment',
onAction: function () {
_this.$emit('add', img);
// const selection = ed.selection;
// const selectedNode = selection.getNode(); // 获取选中的节点
// console.log('selectedNode at line 333:', selectedNode);
// if (selectedNode) {
// const comment = prompt('Enter your comment:');
// if (comment) {
// const dataId = selectedNode.getAttribute('main-id');
// _this.comments.push({ text: comment, time: new Date().getTime(), mId: dataId });
// }
// } else {
// alert('Please select some text to comment on.');
// }
}
});
ed.on('dragstart', (e) => {
// 阻止拖动事件
e.preventDefault();
});
// 监听焦点变化并高亮当前选中的元素
ed.on('focus', function () {
if (!isDeleting) {
// 处理正常的焦点逻辑
ed.getBody().style.outline = 'none'; // 当编辑器获取焦点时,移除焦点框
if (!_this.readonly) {
ed.on('click', function (e) {
// 判断点击的是否是目标元素
const target = e.target;
console.log('target at line 351:', target);
if (target.classList.contains('isRemarkIcon')) {
_this.$emit('onComment', target.getAttribute('main-id'));
}
});
// // 添加批注按钮
ed.ui.registry.addButton('addImageButton', {
text: 'Add Figure',
icon: 'comment',
onAction: function () {
_this.$emit('add', img);
// const selection = ed.selection;
// const selectedNode = selection.getNode(); // 获取选中的节点
// console.log('selectedNode at line 333:', selectedNode);
// if (selectedNode) {
// const comment = prompt('Enter your comment:');
// if (comment) {
// const dataId = selectedNode.getAttribute('main-id');
// _this.comments.push({ text: comment, time: new Date().getTime(), mId: dataId });
// }
// } else {
// alert('Please select some text to comment on.');
// }
}
});
ed.on('dragstart', (e) => {
// 阻止拖动事件
e.preventDefault();
});
// 监听焦点变化并高亮当前选中的元素
ed.on('focus', function () {
if (!isDeleting) {
// 处理正常的焦点逻辑
ed.getBody().style.outline = 'none'; // 当编辑器获取焦点时,移除焦点框
_this.updateCurrentTag(ed);
}
});
// 监听焦点变化并高亮当前选中的元素
ed.on('selectionChange', function () {
_this.updateCurrentTag(ed);
});