提交
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import Vue from 'vue';
|
||||
import JSZip from 'jszip';
|
||||
import Common from '@/components/common/common'
|
||||
import Tiff from 'tiff.js';
|
||||
@@ -1150,6 +1151,226 @@ convertParagraphsToHtml(paragraphs) {
|
||||
},
|
||||
|
||||
|
||||
initEditorButton(vueInstance,ed) {
|
||||
|
||||
ed.ui.registry.addMenuButton('customDropdown', {
|
||||
text: 'Set Title', // 下拉框标题
|
||||
fetch: function (callback) {
|
||||
// 定义下拉框的内容
|
||||
const items = [
|
||||
{
|
||||
label: 'First level title',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: 'Secondary Title',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: 'Third level title',
|
||||
value: 3
|
||||
}
|
||||
];
|
||||
const menuItems = items.map((item) => ({
|
||||
type: 'menuitem',
|
||||
text: item.label,
|
||||
onAction: function () {
|
||||
var edSelection = ed.selection;
|
||||
const selectedNode = edSelection.getNode(); // 获取选中的节点
|
||||
if (selectedNode) {
|
||||
// 向上查找最外层的 div
|
||||
let outerDiv = selectedNode;
|
||||
while (outerDiv && outerDiv.tagName !== 'DIV') {
|
||||
outerDiv = outerDiv.parentNode;
|
||||
}
|
||||
// 如果找到的 div 节点存在
|
||||
if (outerDiv) {
|
||||
const dataId = outerDiv.getAttribute('main-id');
|
||||
vueInstance.$emit('onEditTitle', {
|
||||
mainId: dataId,
|
||||
value: item.value
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}));
|
||||
callback(menuItems);
|
||||
}
|
||||
});
|
||||
// 添加自定义菜单项
|
||||
ed.ui.registry.addButton('Save', {
|
||||
icon: 'checkmark',
|
||||
text: 'Save',
|
||||
onAction: function () {
|
||||
var deleteButtons = document.querySelectorAll('.tox-tinymce-inline');
|
||||
var edSelection = ed.selection;
|
||||
const selectedNode = edSelection.getNode(); // 获取选中的节点
|
||||
let outerDiv = selectedNode;
|
||||
while (outerDiv && outerDiv.tagName !== 'DIV') {
|
||||
outerDiv = outerDiv.parentNode;
|
||||
}
|
||||
// 如果找到的 div 节点存在
|
||||
if (outerDiv) {
|
||||
const dataId = outerDiv.getAttribute('main-id');
|
||||
var content;
|
||||
console.log('outerDiv at line 663:', outerDiv.innerHTML);
|
||||
content = outerDiv.innerHTML.replace(/<(?!\/?(img|b|i|sub|sup|span|strong|em |blue)\b)[^>]+>/g, '');
|
||||
content =content.replace(/<([a-zA-Z]+)>\s*<\/\1>/g, '');
|
||||
content = content.replace(/ /g, ' ');
|
||||
|
||||
content = content.replace(/\s*style="[^"]*"/g, '');
|
||||
|
||||
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]);
|
||||
}
|
||||
content = div.innerHTML;
|
||||
console.log('content at line 486:', content);
|
||||
vueInstance.$emit('saveContent', content, dataId);
|
||||
}
|
||||
}
|
||||
});
|
||||
ed.ui.registry.addButton('Edit', {
|
||||
icon: 'highlight-bg-color',
|
||||
text: 'Edit',
|
||||
onAction: function () {
|
||||
var edSelection = ed.selection;
|
||||
const selectedNode = edSelection.getNode(); // 获取选中的节点
|
||||
let outerDiv = selectedNode;
|
||||
while (outerDiv && outerDiv.tagName !== 'DIV') {
|
||||
outerDiv = outerDiv.parentNode;
|
||||
}
|
||||
// 如果找到的 div 节点存在
|
||||
if (outerDiv) {
|
||||
const dataId = outerDiv.getAttribute('main-id');
|
||||
console.log('dataId at line 1258:', dataId)
|
||||
|
||||
vueInstance.$emit('onEdit', dataId);
|
||||
}
|
||||
}
|
||||
});
|
||||
ed.ui.registry.addButton('commentAdd', {
|
||||
icon: 'comment-add',
|
||||
text: 'Comment Add',
|
||||
onAction: function () {
|
||||
var edSelection = ed.selection;
|
||||
const selectedNode = edSelection.getNode(); // 获取选中的节点
|
||||
if (selectedNode) {
|
||||
// 向上查找最外层的 div
|
||||
let outerDiv = selectedNode;
|
||||
while (outerDiv && outerDiv.tagName !== 'DIV') {
|
||||
outerDiv = outerDiv.parentNode;
|
||||
}
|
||||
// 如果找到的 div 节点存在
|
||||
if (outerDiv) {
|
||||
const dataId = outerDiv.getAttribute('main-id');
|
||||
let selectedText = edSelection.getContent({ format: 'text' });
|
||||
vueInstance.$emit('onAddComment', {
|
||||
mainId: dataId,
|
||||
label: selectedText ? selectedText : ''
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
ed.ui.registry.addButton('delete', {
|
||||
icon: 'remove',
|
||||
text: 'Delete',
|
||||
onAction: function () {
|
||||
var edSelection = ed.selection;
|
||||
const selectedNode = edSelection.getNode(); // 获取选中的节点
|
||||
if (selectedNode) {
|
||||
// 向上查找最外层的 div
|
||||
let outerDiv = selectedNode;
|
||||
while (outerDiv && outerDiv.tagName !== 'DIV') {
|
||||
outerDiv = outerDiv.parentNode;
|
||||
}
|
||||
// 如果找到的 div 节点存在
|
||||
if (outerDiv) {
|
||||
const dataId = outerDiv.getAttribute('main-id');
|
||||
vueInstance.$emit('onDelete',dataId);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// 定义自定义按钮
|
||||
ed.ui.registry.addButton('clearButton', {
|
||||
text: 'Empty',
|
||||
|
||||
onAction: () => {
|
||||
// 插入自定义表格到编辑器中
|
||||
ed.setContent('');
|
||||
}
|
||||
});
|
||||
|
||||
ed.ui.registry.addButton('customBlue', {
|
||||
text: 'Blue', // 按钮文本
|
||||
onAction: function () {
|
||||
// 在选中的文本周围包裹 <blue> 标签
|
||||
var selectedText = ed.selection.getContent();
|
||||
console.log('selectedText at line 529:', selectedText);
|
||||
if (selectedText) {
|
||||
var wrappedText = `<blue>${selectedText}</blue>`;
|
||||
ed.selection.setContent(wrappedText);
|
||||
} else {
|
||||
this.$message.error('请选择要添加蓝色的文本');
|
||||
}
|
||||
}
|
||||
});
|
||||
ed.ui.registry.addButton('removeBlue', {
|
||||
text: 'Blue', // 按钮文本
|
||||
onAction: function () {
|
||||
const range = ed.selection.getRng(); // 获取选区范围
|
||||
let startNode = range.startContainer; // 获取选区起始节点
|
||||
let closestBlue = null;
|
||||
|
||||
// 向上查找最近的 <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);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// 通用递归方法
|
||||
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user