parent
de8a257c8b
commit
11a27eec33
@ -1,5 +0,0 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,212 @@
|
||||
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: '<svg t="1730216969869" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2612" width="200" height="200"><path d="M576 832H224c-17.6 0-32-14.4-32-32V192h608c17.6 0 32 14.4 32 32v288c0 17.7 14.3 32 32 32s32-14.3 32-32V224c0-52.9-43.1-96-96-96H160c-17.7 0-32 14.3-32 32v640c0 52.9 43.1 96 96 96h352c17.7 0 32-14.3 32-32s-14.3-32-32-32z" p-id="2613"></path><path d="M951.7 757.5c0.2-0.2 0.4-0.5 0.6-0.7 0.1-0.2 0.3-0.3 0.4-0.5 0.2-0.3 0.4-0.6 0.7-0.8 0.1-0.1 0.2-0.3 0.3-0.4l0.6-0.9c0.1-0.1 0.2-0.2 0.3-0.4l0.6-0.9c0.1-0.1 0.2-0.3 0.2-0.4 0.2-0.3 0.4-0.6 0.5-0.9 0.1-0.1 0.2-0.3 0.3-0.4 0.2-0.3 0.3-0.6 0.4-0.9 0.1-0.2 0.2-0.4 0.3-0.5 0.1-0.3 0.2-0.5 0.4-0.8 0.1-0.2 0.2-0.4 0.3-0.7 0.1-0.2 0.2-0.5 0.3-0.7 0.1-0.3 0.2-0.5 0.3-0.8 0.1-0.2 0.1-0.4 0.2-0.6l0.3-0.9c0.1-0.2 0.1-0.4 0.2-0.6 0.1-0.3 0.2-0.6 0.3-1 0-0.2 0.1-0.3 0.1-0.5 0.1-0.3 0.2-0.7 0.2-1 0-0.2 0.1-0.4 0.1-0.5 0.1-0.3 0.1-0.7 0.2-1 0-0.2 0.1-0.4 0.1-0.6 0-0.3 0.1-0.6 0.1-0.9 0-0.3 0-0.5 0.1-0.8 0-0.2 0-0.5 0.1-0.7 0.1-1.1 0.1-2.1 0-3.2 0-0.3 0-0.5-0.1-0.7 0-0.3 0-0.5-0.1-0.8 0-0.3-0.1-0.6-0.1-0.9 0-0.2 0-0.4-0.1-0.6 0-0.3-0.1-0.7-0.2-1 0-0.2-0.1-0.4-0.1-0.5-0.1-0.3-0.1-0.7-0.2-1 0-0.2-0.1-0.3-0.1-0.5-0.1-0.3-0.2-0.6-0.3-1-0.1-0.2-0.1-0.4-0.2-0.6l-0.3-0.9c-0.1-0.2-0.1-0.4-0.2-0.6-0.1-0.3-0.2-0.5-0.3-0.8-0.1-0.2-0.2-0.5-0.3-0.7-0.1-0.2-0.2-0.4-0.3-0.7-0.1-0.3-0.2-0.5-0.4-0.8-0.1-0.2-0.2-0.4-0.3-0.5-0.1-0.3-0.3-0.6-0.4-0.9-0.1-0.2-0.2-0.3-0.3-0.4-0.2-0.3-0.3-0.6-0.5-0.9-0.1-0.1-0.2-0.3-0.2-0.4l-0.6-0.9c-0.1-0.1-0.2-0.2-0.3-0.4l-0.6-0.9c-0.1-0.1-0.2-0.3-0.3-0.4-0.2-0.3-0.4-0.6-0.7-0.8-0.1-0.2-0.3-0.3-0.4-0.5-0.2-0.2-0.4-0.5-0.6-0.7-0.2-0.2-0.4-0.5-0.7-0.7l-0.4-0.4-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l73.4 73.4H592c-17.7 0-32 14.3-32 32s14.3 32 32 32h258.7l-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3 6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4l128-128 0.4-0.4c0.4-0.6 0.6-0.9 0.8-1.1z" p-id="2614"></path><path d="M709.3 320.4c-17.4-2.9-33.9 8.9-36.8 26.3l-42.8 256.9-87.3-261.8c-4.4-13-16.6-21.8-30.4-21.8-13.8 0-26 8.8-30.4 21.9l-87.3 261.8-42.8-256.9c-2.9-17.4-19.4-29.2-36.8-26.3-17.4 2.9-29.2 19.4-26.3 36.8l64 384c2.4 14.5 14.4 25.5 29.1 26.6 14.7 1.1 28.2-7.8 32.9-21.8L512 453.2l66.4 199.1c3.9 11.8 15 19.8 27.4 19.8h52.9c14.1 0 26.2-10.2 28.5-24.1l48.4-290.6c2.9-17.6-8.9-34.1-26.3-37z" p-id="2615"></path></svg>'
|
||||
|
||||
});
|
||||
|
||||
// Execute a callback function when the button is clicked
|
||||
button.on('execute', () => {
|
||||
const pageContent = getPageContent();
|
||||
const style = getStyle();
|
||||
const page = '<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>@media print{@page{size:A4 portrait;margin:0cm 3cm}@page:left{margin-left:2.5cm;margin-right:2.7cm;}@page:right{margin-left:2.7cm;margin-right:2.5cm;}}</style>' + style + '</head><body>' + pageContent + '</body></html>'
|
||||
|
||||
// console.log(page);
|
||||
asBlob(page).then(data => {
|
||||
saveAs(data, 'file.docx') // save as docx file
|
||||
}); // asBlob() return Promise<Blob|Buffer>
|
||||
});
|
||||
|
||||
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: '<svg t="1730309942693" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2589" width="200" height="200"><path d="M576 832H224c-17.6 0-32-14.4-32-32V192h608c17.6 0 32 14.4 32 32v288c0 17.7 14.3 32 32 32s32-14.3 32-32V224c0-52.9-43.1-96-96-96H160c-17.7 0-32 14.3-32 32v640c0 52.9 43.1 96 96 96h352c17.7 0 32-14.3 32-32s-14.3-32-32-32z" p-id="2590"></path><path d="M960 734.4c0-0.3 0-0.5-0.1-0.7 0-0.3 0-0.5-0.1-0.8 0-0.3-0.1-0.6-0.1-0.9 0-0.2 0-0.4-0.1-0.6 0-0.3-0.1-0.7-0.2-1 0-0.2-0.1-0.4-0.1-0.5-0.1-0.3-0.1-0.7-0.2-1 0-0.2-0.1-0.3-0.1-0.5-0.1-0.3-0.2-0.6-0.3-1-0.1-0.2-0.1-0.4-0.2-0.6l-0.3-0.9c-0.1-0.2-0.1-0.4-0.2-0.6-0.1-0.3-0.2-0.5-0.3-0.8-0.1-0.2-0.2-0.5-0.3-0.7-0.1-0.2-0.2-0.4-0.3-0.7-0.1-0.3-0.2-0.5-0.4-0.8-0.1-0.2-0.2-0.4-0.3-0.5-0.1-0.3-0.3-0.6-0.4-0.9-0.1-0.2-0.2-0.3-0.3-0.4-0.2-0.3-0.3-0.6-0.5-0.9-0.1-0.1-0.2-0.3-0.2-0.4l-0.6-0.9c-0.1-0.1-0.2-0.2-0.3-0.4l-0.6-0.9c-0.1-0.1-0.2-0.3-0.3-0.4-0.2-0.3-0.4-0.6-0.7-0.8-0.1-0.2-0.3-0.3-0.4-0.5-0.2-0.2-0.4-0.5-0.6-0.7-0.2-0.2-0.4-0.5-0.7-0.7l-0.4-0.4-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l73.4 73.4H592c-17.7 0-32 14.3-32 32s14.3 32 32 32h258.7l-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3 6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4l128-128 0.4-0.4 0.7-0.7c0.2-0.2 0.4-0.5 0.6-0.7 0.1-0.2 0.3-0.3 0.4-0.5 0.2-0.3 0.4-0.6 0.7-0.8 0.1-0.1 0.2-0.3 0.3-0.4l0.6-0.9c0.1-0.1 0.2-0.2 0.3-0.4l0.6-0.9c0.1-0.1 0.2-0.3 0.2-0.4 0.2-0.3 0.4-0.6 0.5-0.9 0.1-0.1 0.2-0.3 0.3-0.4 0.2-0.3 0.3-0.6 0.4-0.9 0.1-0.2 0.2-0.4 0.3-0.5 0.1-0.3 0.2-0.5 0.4-0.8 0.1-0.2 0.2-0.4 0.3-0.7 0.1-0.2 0.2-0.5 0.3-0.7 0.1-0.3 0.2-0.5 0.3-0.8 0.1-0.2 0.1-0.4 0.2-0.6l0.3-0.9c0.1-0.2 0.1-0.4 0.2-0.6 0.1-0.3 0.2-0.6 0.3-1 0-0.2 0.1-0.3 0.1-0.5 0.1-0.3 0.2-0.7 0.2-1 0-0.2 0.1-0.4 0.1-0.5 0.1-0.3 0.1-0.7 0.2-1 0-0.2 0.1-0.4 0.1-0.6 0-0.3 0.1-0.6 0.1-0.9 0-0.3 0-0.5 0.1-0.8 0-0.2 0-0.5 0.1-0.7-0.1-1.5-0.1-2.5-0.1-3.6zM352 320c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32s32-14.3 32-32V576h192c70.6 0 128-57.4 128-128s-57.4-128-128-128H352z m288 128c0 35.3-28.7 64-64 64H384V384h192c35.3 0 64 28.7 64 64z" p-id="2591"></path></svg>'
|
||||
|
||||
});
|
||||
|
||||
// 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 = '<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>@media print{@page{size:A4 portrait;margin:0cm 3cm}@page:left{margin-left:2.5cm;margin-right:2.7cm;}@page:right{margin-left:2.7cm;margin-right:2.5cm;}}</style>' + style + '</head><body>' + pageContent.replaceAll('ck-focused', 'ck-blurred').replaceAll('ck-weight_selected', '') + '</body></html>'
|
||||
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: '<svg t="1730903613822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2614" width="200" height="200"><path d="M849.92 981.333333H175.658667A132.736 132.736 0 0 1 42.666667 848.597333V175.36A132.736 132.736 0 0 1 175.658667 42.666667H849.92C921.898667 42.666667 981.333333 102.016 981.333333 175.402667v673.152C981.333333 922.026667 921.898667 981.333333 849.92 981.333333zM175.658667 136.362667a38.698667 38.698667 0 0 0-39.125334 39.04v673.152c0 21.888 17.194667 39.082667 39.125334 39.082666H849.92a38.698667 38.698667 0 0 0 39.125333-39.04V175.36c-1.578667-21.845333-18.773333-39.04-39.125333-39.04H175.658667z" fill="#172B4D" p-id="2615"></path><path d="M374.314667 957.866667a46.08 46.08 0 0 1-46.933334-46.805334V111.36a46.08 46.08 0 0 1 46.933334-46.890667c26.624 0 46.933333 20.309333 46.933333 46.890667v799.658667a46.08 46.08 0 0 1-46.933333 46.848z" fill="#172B4D" p-id="2616"></path></svg>'
|
||||
|
||||
});
|
||||
|
||||
// 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 };
|
||||
@ -1,12 +1,12 @@
|
||||
// import { createApp } from 'vue'
|
||||
// import App from './App.vue'
|
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
|
||||
import { createApp } from 'vue';
|
||||
import '../public/style.css';
|
||||
import App from './App.vue';
|
||||
import { CkeditorPlugin } from '@ckeditor/ckeditor5-vue';
|
||||
import mitt from 'mitt';
|
||||
|
||||
const app = createApp(App);
|
||||
const emitter = mitt();
|
||||
|
||||
createApp(App).use(CkeditorPlugin).mount('#app');
|
||||
app.config.globalProperties.emitter = emitter;
|
||||
app.use(CkeditorPlugin);
|
||||
app.mount('#app');
|
||||
@ -1,4 +1,21 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
|
||||
const AutoImport = require('unplugin-auto-import/webpack')
|
||||
const Components = require('unplugin-vue-components/webpack')
|
||||
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
|
||||
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true
|
||||
transpileDependencies: true,
|
||||
configureWebpack: {
|
||||
plugins: [
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()]
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()]
|
||||
}),
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
Loading…
Reference in new issue