px7sihb6k
/
coeditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加‘导出PDF’功能，增加智能润色的插件框架

Browse Source
master
joefalmko 1 month ago
parent be160644ff
commit 67f8a61501
3 changed files with 258 additions and 79 deletions
Show Stats Download Patch File Download Diff File

1
ckeditor5/package.json
Unescape View File

@ -9,7 +9,6 @@
}, },
"dependencies": { "dependencies": {
"@ckeditor/ckeditor5-vue": "^7.2.0", "@ckeditor/ckeditor5-vue": "^7.2.0",
"ckeditor5": "^43.2.0", "ckeditor5": "^43.2.0",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",

5
ckeditor5/public/style.css
Unescape View File

@ -6,17 +6,16 @@
margin: 0 !important; margin: 0 !important;
} }
} }
.main-container { .main-container {
--ckeditor5-preview-height: 700px; --ckeditor5-preview-height: 700px;
font-family: 'Lato'; font-family: '宋体';
width: fit-content; width: fit-content;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.ck-content { .ck-content {
font-family: 'Lato'; font-family: '宋体';
line-height: 1.6; line-height: 1.6;
word-break: break-word; word-break: break-word;
} }

331
ckeditor5/src/App.vue
Unescape View File

@ -1,13 +1,15 @@
<template> <template>
<div> <div>
<div class="main-container"> <div class="main-container">
<div class="editor-container editor-container_document-editor editor-container_include-style" ref="editorContainerElement"> <div class="editor-container editor-container_document-editor editor-container_include-style"
ref="editorContainerElement">
<div class="editor-container__menu-bar" ref="editorMenuBarElement"></div> <div class="editor-container__menu-bar" ref="editorMenuBarElement"></div>
<div class="editor-container__toolbar" ref="editorToolbarElement"></div> <div class="editor-container__toolbar" ref="editorToolbarElement"></div>
<div class="editor-container__editor-wrapper"> <div class="editor-container__editor-wrapper">
<div class="editor-container__editor"> <div class="editor-container__editor">
<div ref="editorElement"> <div ref="editorElement">
<ckeditor v-if="isLayoutReady" v-model="config.initialData" :editor="editor" :config="config" @ready="onReady" /> <ckeditor v-if="isLayoutReady" v-model="config.initialData" :editor="editor"
:config="config" @ready="onReady" />
</div> </div>
</div> </div>
</div> </div>
@ -15,10 +17,10 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { import {
DecoupledEditor, DecoupledEditor,
// ClassicEditor,
AccessibilityHelp, AccessibilityHelp,
Alignment, Alignment,
Autoformat, Autoformat,
@ -74,7 +76,7 @@ import {
SpecialCharactersMathematical, SpecialCharactersMathematical,
SpecialCharactersText, SpecialCharactersText,
Strikethrough, Strikethrough,
Style, // Style,
Subscript, Subscript,
Superscript, Superscript,
Table, Table,
@ -89,46 +91,202 @@ import {
Undo, Undo,
// 插件必须 // 插件必须
Plugin, Plugin,
ButtonView ButtonView,
// ToolbarView,
// DropdownMenuRootListView,
createDropdown,
// SplitButtonView,
Collection,
addListToDropdown,
// Model,
// addToolbarToDropdown
} from 'ckeditor5'; } from 'ckeditor5';
import translations from 'ckeditor5/translations/zh-cn.js'; // import translations from 'ckeditor5/translations/zh-cn.js';
import 'ckeditor5/ckeditor5.css'; import 'ckeditor5/ckeditor5.css';
import { asBlob } from 'html-docx-js-typescript' import { asBlob } from 'html-docx-js-typescript'
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
// import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
// import Model from "@ckeditor/ckeditor5-ui/src/model";
// import Collection from "@ckeditor/ckeditor5-utils/src/collection";
// import {addListToDropdown,createDropdown} from "@ckeditor/ckeditor5-ui/src/dropdown/utils";
// import SplitButtonView from "@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview";
class Export2Word extends Plugin { class Export2Word extends Plugin {
init() { init() {
const editor = this.editor; const editor = this.editor;
editor.ui.componentFactory.add( 'export2word', () => { editor.ui.componentFactory.add('ExportToWord', () => {
// The button will be an instance of ButtonView. // The button will be an instance of ButtonView.
const button = new ButtonView(); const button = new ButtonView();
button.set( { button.set({
label: 'Export2Word', label: '导出为docx',
// withText: true // withText: true
tooltip: true, tooltip: true,
// 图标 直接插入svg文件 // 图标 直接插入svg文件
icon:'<svg t="1715062605726" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5479"><path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 85.333334C323.477333 170.666667 170.666667 323.477333 170.666667 512s152.810667 341.333333 341.333333 341.333333 341.333333-152.810667 341.333333-341.333333S700.522667 170.666667 512 170.666667z m0 106.666666a21.333333 21.333333 0 0 1 21.333333 21.333334v234.666666h170.666667a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H469.333333a21.333333 21.333333 0 0 1-21.333333-21.333334V298.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h42.666667z" fill="#222429" p-id="5480"></path></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', () => {
// Execute a callback function when the button is clicked
button.on('execute', () => {
// console.log(editor.getData());
const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div").innerHTML; const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div").innerHTML;
const page = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>'+pageContent+'</body></html>' const page = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>' + pageContent + '</body></html>'
// console.log(page);
asBlob(page).then(data => { asBlob(page).then(data => {
saveAs(data, 'file.docx') // save as docx file saveAs(data, 'file.docx') // save as docx file
}); // asBlob() return Promise<Blob|Buffer> }); // asBlob() return Promise<Blob|Buffer>
} ); });
return button; return button;
} ); });
// 增加菜单栏？ 不显示按钮
editor.ui.extendMenuBar({
menu: {
menuId: 'export',
label: '导出',
groups: [
{
groupId: 'export',
items: [
'ExportToWord'
]
}
]
},
position: 'after:help'
}
);
} }
} }
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', () => {
// console.log(editor.getData());
const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div");
// pageContent.className+=' print-content';
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></head><body>' + pageContent.innerHTML + '</body></html>'
// console.log(page);
const newWindow = window.open('','PrintDocument', 'height=600,width=700,top=50,left=50');
newWindow.document.write(page);
newWindow.document.close();
// newWindow.document.addEventListener('afterprint', function () {
// // 打印完成（无论用户是真正打印还是取消打印）
// newWindow.close();
// }, false);
newWindow.onload = function(){
newWindow.print();
// // newWindow.close();
}
newWindow.onafterprint=function(){
newWindow.close();
}
// asBlob(page).then(data => {
// saveAs(data, 'file.docx') // save as docx file
// }); // asBlob() return Promise<Blob|Buffer>
});
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;
});
}
}
export default { export default {
name: 'app', name: 'app',
data() { data() {
@ -136,6 +294,7 @@ export default {
isLayoutReady: false, isLayoutReady: false,
config: null, // CKEditor needs the DOM tree before calculating the configuration. config: null, // CKEditor needs the DOM tree before calculating the configuration.
editor: DecoupledEditor editor: DecoupledEditor
// editor:ClassicEditor
}; };
}, },
mounted() { mounted() {
@ -146,7 +305,7 @@ export default {
'redo', 'redo',
'|', '|',
'heading', 'heading',
'style', // 'style',
'|', '|',
'fontSize', 'fontSize',
'fontFamily', 'fontFamily',
@ -167,12 +326,11 @@ export default {
'|', '|',
'bulletedList', 'bulletedList',
'numberedList', 'numberedList',
'todoList',
'outdent', 'outdent',
'indent', 'indent',
'|','export2word' '|', 'ExportToWord','ExportToPDF','translate'
], ],
shouldNotGroupWhenFull: false shouldNotGroupWhenFull: true
}, },
plugins: [ plugins: [
AccessibilityHelp, AccessibilityHelp,
@ -230,7 +388,7 @@ export default {
SpecialCharactersMathematical, SpecialCharactersMathematical,
SpecialCharactersText, SpecialCharactersText,
Strikethrough, Strikethrough,
Style, // Style,
Subscript, Subscript,
Superscript, Superscript,
Table, Table,
@ -243,11 +401,34 @@ export default {
TodoList, TodoList,
Underline, Underline,
Undo, Undo,
Export2Word Export2Word,Translation,Export2PDF
], ],
balloonToolbar: ['bold', 'italic', '|', 'link', 'insertImage', '|', 'bulletedList', 'numberedList'], balloonToolbar: ['bold', 'italic', '|', 'link', 'insertImage', '|', 'bulletedList', 'numberedList'],
//自定义设置字体
fontFamily: { fontFamily: {
supportAllValues: true // 显示所有字体
supportAllValues: true,
// 增加字体
options: [
'default',
'宋体',
'新宋体',
'仿宋',
'楷体',
'微软雅黑',
'黑体',
'华文仿宋',
'华文楷体',
'华文隶书',
'华文宋体',
'华文细黑',
'华文新魏',
'华文行楷',
'华文中宋',
'隶书',
'苹方 常规',
'幼圆',
],
}, },
fontSize: { fontSize: {
options: [10, 12, 14, 'default', 18, 20, 22], options: [10, 12, 14, 'default', 18, 20, 22],
@ -354,62 +535,62 @@ export default {
] ]
}, },
menuBar: { menuBar: {
isVisible: true isVisible: true,
}, },
placeholder: 'Type or paste your content here!', placeholder: 'Type or paste your content here!',
style: { // style: {
definitions: [ // definitions: [
{ // {
name: 'Article category', // name: 'Article category',
element: 'h3', // element: 'h3',
classes: ['category'] // classes: ['category']
}, // },
{ // {
name: 'Title', // name: 'Title',
element: 'h2', // element: 'h2',
classes: ['document-title'] // classes: ['document-title']
}, // },
{ // {
name: 'Subtitle', // name: 'Subtitle',
element: 'h3', // element: 'h3',
classes: ['document-subtitle'] // classes: ['document-subtitle']
}, // },
{ // {
name: 'Info box', // name: 'Info box',
element: 'p', // element: 'p',
classes: ['info-box'] // classes: ['info-box']
}, // },
{ // {
name: 'Side quote', // name: 'Side quote',
element: 'blockquote', // element: 'blockquote',
classes: ['side-quote'] // classes: ['side-quote']
}, // },
{ // {
name: 'Marker', // name: 'Marker',
element: 'span', // element: 'span',
classes: ['marker'] // classes: ['marker']
}, // },
{ // {
name: 'Spoiler', // name: 'Spoiler',
element: 'span', // element: 'span',
classes: ['spoiler'] // classes: ['spoiler']
}, // },
{ // {
name: 'Code (dark)', // name: 'Code (dark)',
element: 'pre', // element: 'pre',
classes: ['fancy-code', 'fancy-code-dark'] // classes: ['fancy-code', 'fancy-code-dark']
}, // },
{ // {
name: 'Code (bright)', // name: 'Code (bright)',
element: 'pre', // element: 'pre',
classes: ['fancy-code', 'fancy-code-bright'] // classes: ['fancy-code', 'fancy-code-bright']
} // }
] // ]
}, // },
table: { table: {
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties'] contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
}, },
translations: [translations] // translations: [translations]
}; };
this.isLayoutReady = true; this.isLayoutReady = true;

Write Preview
Loading…
Cancel
Save