ESI-HTML-DOCX/ckeditor5-export
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎉 finally got docx from ckeditor input XD

Browse Source
This commit is contained in:
Sahatsawat Kanpai 2024-12-23 14:58:02 +07:00
parent bb7298b01e
commit 96c31e7779
4 changed files with 628 additions and 573 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1151
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -36,13 +36,16 @@
"@ckeditor/ckeditor5-dev-build-tools": "43.0.1",
"@ckeditor/ckeditor5-inspector": ">=4.1.0",
"@ckeditor/ckeditor5-package-tools": "^3.0.0",
"@types/file-saver": "^2.0.7",
"@typescript-eslint/eslint-plugin": "~5.43.0",
"@typescript-eslint/parser": "^5.18.0",
"@vitest/coverage-istanbul": "^2.0.5",
"@vitest/browser": "^2.0.5",
"ckeditor5": "latest",
"@vitest/coverage-istanbul": "^2.0.5",
"ckeditor5": "43.3.1",
"eslint": "^7.32.0",
"eslint-config-ckeditor5": ">=8.0.0",
"file-saver": "^2.0.5",
"html-docx-js-typescript": "^0.1.5",
"http-server": "^14.1.0",
"husky": "^4.2.5",
"lint-staged": "^10.2.6",

19
sample/ckeditor.ts
View File

@ -26,7 +26,11 @@ import {
MediaEmbed,
Paragraph,
Table,
TableToolbar
TableToolbar,
FontFamily,
FontColor,
FontSize,
FontBackgroundColor
} from 'ckeditor5';
import CKEditorInspector from '@ckeditor/ckeditor5-inspector';
@ -59,7 +63,11 @@ ClassicEditor
TableToolbar,
CodeBlock,
Code,
Base64UploadAdapter
Base64UploadAdapter,
FontFamily,
FontColor,
FontSize,
FontBackgroundColor
],
toolbar: [
'undo',
@ -83,7 +91,12 @@ ClassicEditor
'blockQuote',
'insertTable',
'mediaEmbed',
'codeBlock'
'codeBlock',
'|',
'fontFamily',
'fontColor',
'fontSize',
'fontBackgroundColor'
],
image: {
toolbar: [

24
src/export.ts
View File

@ -2,6 +2,9 @@ import { Plugin, ButtonView } from 'ckeditor5';
import ckeditor5Icon from '../theme/icons/ckeditor.svg';
import { asBlob } from 'html-docx-js-typescript'
import { saveAs } from 'file-saver';
export default class Export extends Plugin {
public static get pluginName() {
return 'Export' as const;
@ -22,13 +25,22 @@ export default class Export extends Plugin {
tooltip: true
} );
// Insert a text into the editor after clicking the button.
this.listenTo( view, 'execute', () => {
model.change( writer => {
const textNode = writer.createText( 'Hello CKEditor 5!' );
// // Insert a text into the editor after clicking the button.
// this.listenTo( view, 'execute', () => {
// model.change( writer => {
// const textNode = writer.createText( 'Hello CKEditor 5!' );
model.insertContent( textNode );
} );
// model.insertContent( textNode );
// } );
// editor.editing.view.focus();
// } );
// Insert a text into the editor after clicking the button.
this.listenTo( view, 'execute', async () => {
asBlob(this.editor.getData()).then((data: any) => {
saveAs(data, 'file.docx') // save as docx file
}) // asBlob() return Promise<Blob|Buffer>
editor.editing.view.focus();
} );