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 { createApp } from 'vue';
|
||||||
import '../public/style.css';
|
import '../public/style.css';
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import { CkeditorPlugin } from '@ckeditor/ckeditor5-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 { 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({
|
module.exports = defineConfig({
|
||||||
transpileDependencies: true
|
transpileDependencies: true,
|
||||||
|
configureWebpack: {
|
||||||
|
plugins: [
|
||||||
|
AutoImport({
|
||||||
|
resolvers: [ElementPlusResolver()]
|
||||||
|
}),
|
||||||
|
Components({
|
||||||
|
resolvers: [ElementPlusResolver()]
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in new issue