Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New demo suggestion #234

Closed
celsowm opened this issue Dec 31, 2024 · 3 comments
Closed

New demo suggestion #234

celsowm opened this issue Dec 31, 2024 · 3 comments

Comments

@celsowm
Copy link

celsowm commented Dec 31, 2024 •
edited
Loading

Hi !
First of all, congrats for your amazing lib !

I have a small suggestion of a new demo: ckeditor 5 + html-to-pdfmake:

<!DOCTYPE html>
<html lang="pt-BR">

<head>
	<meta charset="UTF-8">
	<title>CKEditor 5 - Decoupled Editor com Visualização PDF</title>
	<style>
		body,
		html {
			height: 100%;
			margin: 0;
			font-family: Arial, sans-serif;
		}

		.container {
			display: flex;
			height: 100%;
		}

		.left-pane,
		.right-pane {
			width: 50%;
			padding: 20px;
			box-sizing: border-box;
			overflow: auto;
		}

		.left-pane {
			border-right: 1px solid #ccc;
		}

		/* Estilos para o toolbar do CKEditor */
		.toolbar-container {
			border-bottom: 1px solid #ccc;
			margin-bottom: 10px;
		}

		/* Estilos para o visualizador de PDF */
		#pdf-viewer {
			width: 100%;
			height: 100%;
			border: none;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="left-pane">
			<div id="toolbar-container" class="toolbar-container"></div>
			<div id="editor">
				<p>Digite o seu conteúdo aqui...</p>
			</div>
		</div>
		<div class="right-pane">
			<h2>Visualização do PDF</h2>
			<!-- Elemento para exibir o PDF gerado -->
			<object id="pdf-viewer" type="application/pdf">
				<p>Seu navegador não suporta visualização de PDF.</p>
			</object>
		</div>
	</div>

	<!-- Importando o CKEditor 5 Decoupled Document build via CDN -->
	<script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/decoupled-document/ckeditor.js"></script>
	<!-- Importando as bibliotecas pdfmake e html-to-pdfmake via CDN -->
	<script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>
	<script>
		// Inicializando o CKEditor
		DecoupledEditor
			.create(document.querySelector('#editor'))
			.then(editor => {
				const toolbarContainer = document.querySelector('#toolbar-container');
				toolbarContainer.appendChild(editor.ui.view.toolbar.element);
				window.editor = editor;

				// Função para gerar e exibir o PDF
				const generatePDF = () => {
					const editorData = editor.getData();

					// Converter o HTML para o formato do pdfmake
					const pdfmakeContent = htmlToPdfmake(editorData);
					const docDefinition = { content: pdfmakeContent };

					console.log(pdfMake.createPdf(docDefinition).getDataUrl());

					// Gera o PDF como URL de dados e atualiza o visualizador
					pdfMake.createPdf(docDefinition).getDataUrl()
						.then(function (dataUrl) {
							const pdfViewer = document.getElementById('pdf-viewer');
							pdfViewer.setAttribute('data', dataUrl);
						})
						.catch(function (error) {
							console.error('Erro ao gerar o PDF:', error);
						});
				};

				// Gera o PDF inicialmente
				generatePDF();

				// Atualiza o PDF sempre que houver uma alteração no editor
				editor.model.document.on('change:data', () => {
					generatePDF();
				});
			})
			.catch(error => {
				console.error(error);
			});
	</script>
</body>

</html>
@Aymkdn
Copy link
Owner

Aymkdn commented Dec 31, 2024

Sorry, I don't understand what you expect from me?

@Aymkdn Aymkdn added the waiting-for-requestor Waiting for the requestor to provide more info label Dec 31, 2024
@celsowm
Copy link
Author

celsowm commented Dec 31, 2024

Sorry, I don't understand what you expect from me?

Hi !
Your current online demo is this one: https://aymkdn.github.io/html-to-pdfmake/index.html
My humble suggestion is a new one using ckeditor to generate in real time pdf from a wyswyg editor

@github-actions github-actions bot removed the waiting-for-requestor Waiting for the requestor to provide more info label Dec 31, 2024
@Aymkdn
Copy link
Owner

Aymkdn commented Dec 31, 2024

Thank you for the suggestion. I appreciate your input. However, my intention is to make it clear to everyone that they need to provide HTML code to the library. The primary goal of this project wasn’t to export a WYSIWYG editor, but rather to simplify the process of creating laid-out PDFs using well-known HTML.
So I'll keep the demo as it is.

@Aymkdn Aymkdn closed this as completed Dec 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@celsowm @Aymkdn