Get started with froala-design-blocks CDN
Custom license licensed
Froala Design Blocks: Library of pre-made blocks for Froala WYSIWYG editor. Enhances content creation.
Tags:- froala
- froala design blocks
- html design
- bootstrap
- material design
- html templates
- website design
- html5
- trending design
Stable version
Copied!
How to start using froala-design-blocks CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.cdnhub.io/froala-design-blocks/2.0.1/css/froala_blocks.min.css">
<script src="https://cdn.jsdelivr.net/npm/froala-wysiwyg@2.13.0/js/froala_editor.min.js"></script>
<script src="https://cdn.cdnhub.io/froala-design-blocks/2.0.1/js/plugins/blocks.min.js"></script>
<title>Get started with froala-design-blocks CDN - cdnhub.io</title>
<style>
#container { width: 600px; height: 400px; border: 1px solid #ccc; }
</style>
</head>
<body>
<div id="container">
<textarea id="editor"></textarea>
</div>
<script>
// Initialize the Froala editor with design blocks
new FroalaEditor('editor', {
pluginsEnabled: ['blocks'],
blocks: [
{ title: 'Text', name: 'text', content: '<p>Hello World!</p>' },
{ title: 'Image', name: 'image', content: '<img src="image.jpg" alt="Image">' },
{ title: 'Heading 1', name: 'heading1', content: '<h1>Heading 1</h1>' },
{ title: 'Heading 2', name: 'heading2', content: '<h2>Heading 2</h2>' },
{ title: 'Paragraph', name: 'paragraph', content: '<p>This is a paragraph.</p>' },
{ title: 'List', name: 'list', content: '<ul><li>Item 1</li><li>Item 2</li></ul>' },
{ title: 'Quote', name: 'quote', content: '<blockquote><p>This is a quote.</p></blockquote>' },
{ title: 'Link', name: 'link', content: '<a href="https://example.com">Link</a>' },
{ title: 'Table', name: 'table', content: '<table><thead><tr><th>Column 1</th><th>Column 2</th></tr></thead><tbody><tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr></tbody></table>' },
]
});
</script>
</body>
</html>
Copied!
Copied!