import {
Plugin,
ButtonView,
createDropdown,
Collection,
addListToDropdown,
} from 'ckeditor5';
import { asBlob } from 'html-docx-js-typescript'
import { saveAs } from 'file-saver';
import {
getStyle,
getPageContent
} from './utils';
// 导出为docx插件
class Export2Word extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add('ExportToWord', () => {
// The button will be an instance of ButtonView.
const button = new ButtonView();
button.set({
label: '导出为docx',
// withText: true
tooltip: true,
// 图标 直接插入svg文件
icon: ''
});
// Execute a callback function when the button is clicked
button.on('execute', () => {
const pageContent = getPageContent();
const style = getStyle();
const page = '' + style + '' + pageContent + ''
// console.log(page);
asBlob(page).then(data => {
saveAs(data, 'file.docx') // save as docx file
}); // asBlob() return Promise
});
return button;
});
// 增加菜单栏？ 不显示按钮
// editor.ui.extendMenuBar({
// menu: {
// menuId: 'export',
// label: '导出',
// groups: [
// {
// groupId: 'export',
// items: [
// 'ExportToWord'
// ]
// }
// ]
// },
// position: 'after:help'
// }
// );
}
}
// 导出为PDF插件
class Export2PDF extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add('ExportToPDF', () => {
// The button will be an instance of ButtonView.
const button = new ButtonView();
button.set({
label: '导出为PDF',
// withText: true
tooltip: true,
// 图标 直接插入svg文件
icon: ''
});
// Execute a callback function when the button is clicked
button.on('execute', () => {
const pageContent = getPageContent();
console.log(pageContent);
const style = getStyle();
// 去掉element中的 ck-focused ck-weight_selected消除页面和图片的蓝边
const page = '' + style + '' + pageContent.replaceAll('ck-focused', 'ck-blurred').replaceAll('ck-weight_selected', '') + ''
const newWindow = window.open('', 'PrintDocument', 'height=600,width=700,top=50,left=50');
newWindow.document.write(page);
newWindow.document.close();
newWindow.print();
newWindow.onafterprint = function () {
newWindow.close();
}
});
return button;
});
}
}
// 智能润色插件
class Translation extends Plugin {
init() {
// console.log('Translation initialized!');
this.editor.ui.componentFactory.add('translate', (locale) => {
const dropdownView = createDropdown(locale);
dropdownView.buttonView.set({
label: '智能助手',
withText: true,
});
const items = new Collection();
items.add({
type: 'button',
model: {
id: 'summary',
withText: true,
label: '摘要',
}
});
items.add({
type: 'button',
model: {
id: 'decoration',
withText: true,
label: '润色'
}
});
items.add({
type: 'button',
model: {
id: 'extension',
withText: true,
label: '续写'
}
});
items.add({
type: 'button',
model: {
id: 'correction',
withText: true,
label: '修改'
}
});
items.add({
type: 'button',
model: {
id: 'translation',
withText: true,
label: '翻译'
}
});
addListToDropdown(dropdownView, items);
dropdownView.on('execute', (eventInfo) => {
const { id, label } = eventInfo.source;
// 获取选中的文本，用来进行后续操作
const selectionText = window.getSelection().toString();
if (id === 'summary') {
// this.editor.execute('ExportToWord');
console.log('Object (en):', label, selectionText);
}
});
return dropdownView;
});
}
}
// 侧边栏
class ToggleSideBar extends Plugin{
// constructor(toggleSidebar) {
// super();
// this.toggleSidebar = toggleSidebar;
// }
init() {
const editor = this.editor;
editor.ui.componentFactory.add('SideBar', () => {
// The button will be an instance of ButtonView.
const button = new ButtonView();
button.set({
label: '侧边栏',
// withText: true
tooltip: true,
// 图标 直接插入svg文件
icon: ''
});
// Execute a callback function when the button is clicked
button.on('execute', () => {
// 打开sidebar
const bt = document.getElementById("toggleSidebarButton");
console.log(bt);
bt.click();
});
return button;
});
}
}
export { Export2Word, Export2PDF, Translation, ToggleSideBar };