I am using ckeditor5, when I try to export the a pdf using the demo that is avaliable on the website (using Ckeditor builder) it works, but when I implement the code (App.css & App.jsx) on my side it did not work as expected. the editor did not export all the content ?
✔️ Expected result
for example I try to export the following doc.
Authorities are working to identify the cause of a partial ferry dock collapse on Georgia’s Sapelo Island that turned a day of celebration into tragedy, leaving at least seven dead and six critically injured as crowds gathered for a cultural festival. In the midst of a celebration of the island’s small Gullah-Geechee community of Black slave descendants, a gangway collapsed on the visitor ferry dock shortly before 4 p.m. Saturday and plunged at least 20 people into the water, Georgia Department of Natural Resources Capt. Chris Hodge said at a Saturday night news conference. It remains unclear why the Marsh Landing Dock collapsed. A team of engineers and construction specialists plan to be at the dock early Sunday to begin investigating why it failed, Natural Resources spokesperson Tyler Jones told the Associated Press. “The gangway has been secured on Sapelo Island and the incident is currently under investigation,” the Georgia DNR, which manages the island and operates the ferry service, said in a news release Saturday night. Ferries typically depart from the Sapelo-side dock three times a day, taking visitors to the mainland dock in Meridian. Among those who died was a chaplain for the DNR, Georgia DNR spokesperson Melissa Cummings confirmed to CNN. Details about other people who died have yet to be released. Two of those injured were flown by air ambulance to hospitals for treatment, Hodge said. The state’s natural resources department said multiple other emergency agencies assisted them by deploying boats equipped with side-scan sonar and helicopters for search and rescue missions. A reunification point was set up at an area church where those searching for family members can gather, the McIntosh County Sheriff’s Office said. CNN has reached out to the McIntosh County Sheriff’s Office, McIntosh County EMS and the US Coast Guard for more information. RELATED ARTICLE Descendants of enslaved Africans on Georgia island fear losing their culture and some property after a change in zoning laws The tragedy happened during Gullah-Geechee Cultural Heritage Awareness Month, which is celebrated in October in the states of North Carolina, South Carolina, Georgia and Florida. The Sapelo Island Cultural And Revitalization Society, which hosts the island’s annual Cultural Day Festival, said it was grateful for the support people have shown. “Our thoughts and prayers are with the families and loved ones who lost their lives and who were injured,” the nonprofit organization whose mission is to preserve Gullah-Geechee culture, land and community on Sapelo Island said in a Facebook post. “The Sapelo Island community is grateful for the outpouring of love and support and we ask that you join us in praying for the families of those who were impacted by this tragedy.” The nearby city of Darien in McIntosh County said “a day of celebration has turned to tragedy following an accident.” Both President Joe Biden and Georgia Gov. Brian Kemp said they were “heartbroken” over the news of the collapse in separate statements on Saturday. The tragedy comes after the island suffered damage during Hurricane Helene, including a six-day power outage, according to the Southern Poverty Law Center. “Jill and I mourn those who lost their lives, and we pray for the injured and anyone still missing. We are also grateful to the first responders at the scene,” Biden said. He added the White House is in touch with state and local officials to provide any assistance that would be helpful to the community. “As state and local first responders continue to work this active scene, we ask that all Georgians join us in praying for those lost, for those still in harm’s way, and for their families,” Kemp said in a post on X.
❌ Actual result
Authorities are working to identify the cause of a partial ferry dock collapse on Georgia’s Sapelo Island that turned a day of celebration into tragedy, leaving at least seven dead and six critically injured as crowds gathered for a cultural festival. In the midst of a celebration of the island’s small Gullah-Geechee community of Black slave descendants, a gangway collapsed on the visitor ferry dock shortly before 4 p.m. Saturday and plunged at least 20 people into the water, Georgia Department of Natural Resources Capt. Chris Hodge said at a Saturday night news conference. It remains unclear why the Marsh Landing Dock collapsed. A team of engineers and construction specialists plan to be at the dock early Sunday to begin investigating why it failed, Natural Resources spokesperson Tyler Jones told the Associated Press. “The gangway has been secured on Sapelo Island and the incident is currently under investigation,” the Georgia DNR, which manages the island and operates the ferry service, said in a news release Saturday night. Ferries typically depart from the Sapelo-side dock three times a day, taking visitors to the mainland dock in Meridian. Among those who died was a chaplain for the DNR, Georgia DNR spokesperson Melissa Cummings confirmed to CNN. Details about other people who died have yet to be released. Two of those injured were flown by air ambulance to hospitals for treatment, Hodge said. The state’s natural resources department said multiple other emergency agencies assisted them by deploying boats equipped with side-scan sonar and helicopters for search and rescue missions. A reunification point was set up at an area church where those searching for family members can gather, the McIntosh County Sheriff’s Office said. CNN has reached out to
❓ Possible solution
If you have ideas, you can list them here. Otherwise, you can delete this section.
📃 Other details
Browser: I tried Chrome and Firefox
OS: … windows 11
First affected CKEditor version: …
Installed CKEditor plugins: …
App.jsx
"use client";
import { useState, useEffect, useRef } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
// Load the editor content when the component mounts
useEffect(() => {
const initializeEditorContent = async () => {
const content = await loadEditorContent();
setEditorContent(content); // Update state with loaded content
if (editorInstance && content) {
editorInstance.setData(content); // Set editor content if the editor is ready
}
};
initializeEditorContent();
}, [editorInstance]); // Depend on editorInstance to run this when it is available
return (
{isLayoutReady && (
{
setEditorInstance(editor); // Store a reference to the editor instance using state
}}
onChange={(event, editor) => {
const data = editor.getData();
saveEditorContent(data); // Save content as the editor changes
}}
/>
)}
</div>
);
}
If you'd like to see this fixed sooner, add a 👍 reaction to this post.
Hi @anasknbar. It looks like you are trying to use our premium features (import { ExportPdf, ExportWord, ImportWord } from "ckeditor5-premium-features";) which require a license key.
To get the license key, you can sign up for a trial in the last tab in CKEditor Builder, which you used to create the project.
📝 Provide detailed reproduction steps (if any)
I am using ckeditor5, when I try to export the a pdf using the demo that is avaliable on the website (using Ckeditor builder) it works, but when I implement the code (App.css & App.jsx) on my side it did not work as expected. the editor did not export all the content ?
✔️ Expected result
for example I try to export the following doc. Authorities are working to identify the cause of a partial ferry dock collapse on Georgia’s Sapelo Island that turned a day of celebration into tragedy, leaving at least seven dead and six critically injured as crowds gathered for a cultural festival. In the midst of a celebration of the island’s small Gullah-Geechee community of Black slave descendants, a gangway collapsed on the visitor ferry dock shortly before 4 p.m. Saturday and plunged at least 20 people into the water, Georgia Department of Natural Resources Capt. Chris Hodge said at a Saturday night news conference. It remains unclear why the Marsh Landing Dock collapsed. A team of engineers and construction specialists plan to be at the dock early Sunday to begin investigating why it failed, Natural Resources spokesperson Tyler Jones told the Associated Press. “The gangway has been secured on Sapelo Island and the incident is currently under investigation,” the Georgia DNR, which manages the island and operates the ferry service, said in a news release Saturday night. Ferries typically depart from the Sapelo-side dock three times a day, taking visitors to the mainland dock in Meridian. Among those who died was a chaplain for the DNR, Georgia DNR spokesperson Melissa Cummings confirmed to CNN. Details about other people who died have yet to be released. Two of those injured were flown by air ambulance to hospitals for treatment, Hodge said. The state’s natural resources department said multiple other emergency agencies assisted them by deploying boats equipped with side-scan sonar and helicopters for search and rescue missions. A reunification point was set up at an area church where those searching for family members can gather, the McIntosh County Sheriff’s Office said. CNN has reached out to the McIntosh County Sheriff’s Office, McIntosh County EMS and the US Coast Guard for more information. RELATED ARTICLE Descendants of enslaved Africans on Georgia island fear losing their culture and some property after a change in zoning laws The tragedy happened during Gullah-Geechee Cultural Heritage Awareness Month, which is celebrated in October in the states of North Carolina, South Carolina, Georgia and Florida. The Sapelo Island Cultural And Revitalization Society, which hosts the island’s annual Cultural Day Festival, said it was grateful for the support people have shown. “Our thoughts and prayers are with the families and loved ones who lost their lives and who were injured,” the nonprofit organization whose mission is to preserve Gullah-Geechee culture, land and community on Sapelo Island said in a Facebook post. “The Sapelo Island community is grateful for the outpouring of love and support and we ask that you join us in praying for the families of those who were impacted by this tragedy.” The nearby city of Darien in McIntosh County said “a day of celebration has turned to tragedy following an accident.” Both President Joe Biden and Georgia Gov. Brian Kemp said they were “heartbroken” over the news of the collapse in separate statements on Saturday. The tragedy comes after the island suffered damage during Hurricane Helene, including a six-day power outage, according to the Southern Poverty Law Center. “Jill and I mourn those who lost their lives, and we pray for the injured and anyone still missing. We are also grateful to the first responders at the scene,” Biden said. He added the White House is in touch with state and local officials to provide any assistance that would be helpful to the community. “As state and local first responders continue to work this active scene, we ask that all Georgians join us in praying for those lost, for those still in harm’s way, and for their families,” Kemp said in a post on X.
❌ Actual result
Authorities are working to identify the cause of a partial ferry dock collapse on Georgia’s Sapelo Island that turned a day of celebration into tragedy, leaving at least seven dead and six critically injured as crowds gathered for a cultural festival. In the midst of a celebration of the island’s small Gullah-Geechee community of Black slave descendants, a gangway collapsed on the visitor ferry dock shortly before 4 p.m. Saturday and plunged at least 20 people into the water, Georgia Department of Natural Resources Capt. Chris Hodge said at a Saturday night news conference. It remains unclear why the Marsh Landing Dock collapsed. A team of engineers and construction specialists plan to be at the dock early Sunday to begin investigating why it failed, Natural Resources spokesperson Tyler Jones told the Associated Press. “The gangway has been secured on Sapelo Island and the incident is currently under investigation,” the Georgia DNR, which manages the island and operates the ferry service, said in a news release Saturday night. Ferries typically depart from the Sapelo-side dock three times a day, taking visitors to the mainland dock in Meridian. Among those who died was a chaplain for the DNR, Georgia DNR spokesperson Melissa Cummings confirmed to CNN. Details about other people who died have yet to be released. Two of those injured were flown by air ambulance to hospitals for treatment, Hodge said. The state’s natural resources department said multiple other emergency agencies assisted them by deploying boats equipped with side-scan sonar and helicopters for search and rescue missions. A reunification point was set up at an area church where those searching for family members can gather, the McIntosh County Sheriff’s Office said. CNN has reached out to
❓ Possible solution
If you have ideas, you can list them here. Otherwise, you can delete this section.
📃 Other details
App.jsx "use client"; import { useState, useEffect, useRef } from "react"; import { CKEditor } from "@ckeditor/ckeditor5-react";
import { ClassicEditor, AccessibilityHelp, Alignment, Autoformat, AutoImage, AutoLink, Autosave, BalloonToolbar, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Code, CodeBlock, Essentials, FindAndReplace, FontBackgroundColor, FontColor, FontFamily, FontSize, FullPage, GeneralHtmlSupport, Heading, Highlight, HorizontalLine, HtmlComment, HtmlEmbed, ImageBlock, ImageCaption, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, LinkImage, List, ListProperties, Markdown, MediaEmbed, PageBreak, Paragraph, PasteFromMarkdownExperimental, PasteFromOffice, RemoveFormat, SelectAll, ShowBlocks, SourceEditing, SpecialCharacters, SpecialCharactersArrows, SpecialCharactersCurrency, SpecialCharactersEssentials, SpecialCharactersLatin, SpecialCharactersMathematical, SpecialCharactersText, Strikethrough, Style, Subscript, Superscript, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, TodoList, Underline, Undo, } from "ckeditor5"; import { ExportPdf, ExportWord, ImportWord } from "ckeditor5-premium-features"; import { loadEditorContent, saveEditorContent, } from "./utils/chromeStorageUtils.js"; import "ckeditor5/ckeditor5.css"; import "ckeditor5-premium-features/ckeditor5-premium-features.css";
import "./App.css";
export default function App() { const editorContainerRef = useRef(null); const editorRef = useRef(null); const [isLayoutReady, setIsLayoutReady] = useState(false);
const [editorContent, setEditorContent] = useState(""); const [editorInstance, setEditorInstance] = useState(null); // State for editor instancece
useEffect(() => { setIsLayoutReady(true);
}, []);
const editorConfig = { toolbar: { items: [ "undo", "redo", "|", 'importWord', 'exportWord', 'exportPdf', 'PageBreak', // "sourceEditing", // "showBlocks", "|", // "heading", // "style", "|", "fontSize", "fontFamily", "fontColor", "fontBackgroundColor", // "|", // "bold", // "italic", // "underline", "|", "link", "insertTable", "highlight", "blockQuote", "codeBlock", "|", "alignment", "|", // "bulletedList", // "numberedList", "todoList", // "outdent", // "indent", ], shouldNotGroupWhenFull: true, }, plugins: [ AccessibilityHelp, Alignment, Autoformat, AutoImage, AutoLink, Autosave, BalloonToolbar, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Code, CodeBlock, Essentials, ExportPdf, ExportWord, FindAndReplace, FontBackgroundColor, FontColor, FontFamily, FontSize, FullPage, GeneralHtmlSupport, Heading, Highlight, HorizontalLine, HtmlComment, HtmlEmbed, ImageBlock, ImageCaption, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, ImportWord, Indent, IndentBlock, Italic, Link, LinkImage, List, ListProperties, Markdown, MediaEmbed, PageBreak, Paragraph, PasteFromMarkdownExperimental, PasteFromOffice, RemoveFormat, SelectAll, ShowBlocks, SourceEditing, SpecialCharacters, SpecialCharactersArrows, SpecialCharactersCurrency, SpecialCharactersEssentials, SpecialCharactersLatin, SpecialCharactersMathematical, SpecialCharactersText, Strikethrough, Style, Subscript, Superscript, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, TodoList, Underline, Undo, ], balloonToolbar: [ "bold", "italic", "underline", "|", "link", "|", "bulletedList", "numberedList", "|", "outdent", "indent", ], exportPdf: { stylesheets: [ / This path should point to application stylesheets. / / See: https://ckeditor.com/docs/ckeditor5/latest/features/converters/export-pdf.html / "./App.css", / Export PDF needs access to stylesheets that style the content. / "https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.css", "https://cdn.ckeditor.com/ckeditor5-premium-features/43.2.0/ckeditor5-premium-features.css", ], fileName: "export-pdf-demo.pdf", converterOptions: { format: "Tabloid", margin_top: "20mm", margin_bottom: "20mm", margin_right: "24mm", margin_left: "24mm", page_orientation: "portrait", }, }, exportWord: { stylesheets: [ / This path should point to application stylesheets. / / See: https://ckeditor.com/docs/ckeditor5/latest/features/converters/export-word.html / "./App.css", / Export Word needs access to stylesheets that style the content. / "https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.css", "https://cdn.ckeditor.com/ckeditor5-premium-features/43.2.0/ckeditor5-premium-features.css", ], fileName: "export-word-demo.docx", converterOptions: { document: { orientation: "portrait", size: "Tabloid", margins: { top: "20mm", bottom: "20mm", right: "24mm", left: "24mm", }, }, }, }, fontFamily: { supportAllValues: true, }, fontSize: { options: [10, 12, 14, "default", 18, 20, 22], supportAllValues: true, }, heading: { options: [ { model: "paragraph", title: "Paragraph", class: "ck-heading_paragraph", }, { model: "heading1", view: "h1", title: "Heading 1", class: "ck-heading_heading1", }, { model: "heading2", view: "h2", title: "Heading 2", class: "ck-heading_heading2", }, { model: "heading3", view: "h3", title: "Heading 3", class: "ck-heading_heading3", }, { model: "heading4", view: "h4", title: "Heading 4", class: "ck-heading_heading4", }, { model: "heading5", view: "h5", title: "Heading 5", class: "ck-heading_heading5", }, { model: "heading6", view: "h6", title: "Heading 6", class: "ck-heading_heading6", }, ], }, htmlSupport: { allow: [ { name: /^.*$/, styles: true, attributes: true, classes: true, }, ], }, image: { toolbar: [ "toggleImageCaption", "imageTextAlternative", "|", "imageStyle:inline", "imageStyle:wrapText", "imageStyle:breakText", "|", "resizeImage", ], }, initialData: '', link: { addTargetToExternalLinks: true, defaultProtocol: "https://", decorators: { toggleDownloadable: { mode: "manual", label: "Downloadable", attributes: { download: "file", }, }, }, }, list: { properties: { styles: true, startIndex: true, reversed: true, }, }, menuBar: { isVisible: true, }, placeholder: "Type or paste your content here!", style: { definitions: [ { name: "Article category", element: "h3", classes: ["category"], }, { name: "Title", element: "h2", classes: ["document-title"], }, { name: "Subtitle", element: "h3", classes: ["document-subtitle"], }, { name: "Info box", element: "p", classes: ["info-box"], }, { name: "Side quote", element: "blockquote", classes: ["side-quote"], }, { name: "Marker", element: "span", classes: ["marker"], }, { name: "Spoiler", element: "span", classes: ["spoiler"], }, { name: "Code (dark)", element: "pre", classes: ["fancy-code", "fancy-code-dark"], }, { name: "Code (bright)", element: "pre", classes: ["fancy-code", "fancy-code-bright"], }, ], }, table: { contentToolbar: [ "tableColumn", "tableRow", "mergeTableCells", "tableProperties", "tableCellProperties", ], }, };
// Load the editor content when the component mounts useEffect(() => { const initializeEditorContent = async () => { const content = await loadEditorContent(); setEditorContent(content); // Update state with loaded content if (editorInstance && content) { editorInstance.setData(content); // Set editor content if the editor is ready } };
}, [editorInstance]); // Depend on editorInstance to run this when it is available
return (
); }
If you'd like to see this fixed sooner, add a 👍 reaction to this post.
Hi @anasknbar. It looks like you are trying to use our premium features (
import { ExportPdf, ExportWord, ImportWord } from "ckeditor5-premium-features";) which require a license key.To get the license key, you can sign up for a trial in the last tab in CKEditor Builder, which you used to create the project.
in the dashboard, it said that the license key that I generated only for the following features >> "Note: The license key is valid for Track changes and Comments, Revision history, Pagination, AI Assistant, Multi-level lists and CKEditor 5 Productivity Pack ( Case Change, Document Outline, Format Painter, Merge Fields, Paste from Office Enhanced, Slash Command, Table of Contents, Template ) plugins." PDF exporting are omitted! and I try to use the LICENSE_KEY and the TOKEN_URL anyway but it still gives me a PDF doc with less content ### NOTE: "the word exporting is working"
Here is my App.jsx code : `'use client' import { useState, useEffect, useRef } from 'react'; import { CKEditor } from '@ckeditor/ckeditor5-react';
import { ClassicEditor, AccessibilityHelp, Alignment, Autoformat, AutoImage, AutoLink, Autosave, BalloonToolbar, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Code, CodeBlock, Essentials, FindAndReplace, FontBackgroundColor, FontColor, FontFamily, FontSize, FullPage, GeneralHtmlSupport, Heading, Highlight, HorizontalLine, HtmlComment, HtmlEmbed, ImageBlock, ImageCaption, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, LinkImage, List, ListProperties, Markdown, MediaEmbed, PageBreak, Paragraph, PasteFromMarkdownExperimental, PasteFromOffice, RemoveFormat, SelectAll, ShowBlocks, SourceEditing, SpecialCharacters, SpecialCharactersArrows, SpecialCharactersCurrency, SpecialCharactersEssentials, SpecialCharactersLatin, SpecialCharactersMathematical, SpecialCharactersText, Strikethrough, Style, Subscript, Superscript, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, TodoList, Underline, Undo } from 'ckeditor5'; import { ExportPdf, ExportWord, ImportWord } from 'ckeditor5-premium-features';
import 'ckeditor5/ckeditor5.css'; import 'ckeditor5-premium-features/ckeditor5-premium-features.css';
import './App.css'; const LICENSE_KEY = "****"; const TOKEN_URL = "****"; export default function App() { const editorContainerRef = useRef(null); const editorRef = useRef(null); const [isLayoutReady, setIsLayoutReady] = useState(false);
} `