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

19
sample/ckeditor.ts
View File

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

24
src/export.ts
View File

@ -2,6 +2,9 @@ import { Plugin, ButtonView } from 'ckeditor5';
import ckeditor5Icon from '../theme/icons/ckeditor.svg'; 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 { export default class Export extends Plugin {
public static get pluginName() { public static get pluginName() {
return 'Export' as const; return 'Export' as const;
@ -22,13 +25,22 @@ export default class Export extends Plugin {
tooltip: true tooltip: true
} ); } );
// Insert a text into the editor after clicking the button. // // Insert a text into the editor after clicking the button.
this.listenTo( view, 'execute', () => { // this.listenTo( view, 'execute', () => {
model.change( writer => { // model.change( writer => {
const textNode = writer.createText( 'Hello CKEditor 5!' ); // 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(); editor.editing.view.focus();
} ); } );