Slow development speed adds significant risk to your application launch. The risk intensifies when you're building every feature from scratch. On the other hand, selecting third party packages or libraries and bundling them up with your application can also add risk through the ever-expanding list of dependencies to manage. That’s why you need to be able to clearly see the benefits and risks of selecting third party packages or components.
At Tiny, while developing our rich text editor, we're constantly building content that helps our community find beneficial pathways to finishing their projects. In this guide, you'll find an example of how you can quickly finish your project, and avoid dependency issues – by making use of TinyMCE alongside other reliable components.
Blade Icons are an example of a reliable component for your application’s design. And this guide demonstrates how you can make use of TinyMCE, Blade Icons, and the Laravel framework to get a demo application running quickly.
TL;DR
- The demo is based on an Email Editor solution, and you can go directly to the demo to see the steps involved.
- Blade Icons are designed to be fast to install: include them with Composer, and then reference them in your Laravel view files for an easier Laravel icons solution.
What are Blade Icons?
Blade Icons are a package designed for easily making SVG icons available in your Laravel project. Compared to a Laravel Font Awesome solution, Blade Icons don’t require as much time and effort to configure, because the Font Awesome icons need configuration within the Laravel app.css file, along with other bundling steps to configure.
Where to get Blade Icons for Laravel
The Blade Icons library is available for you to search for a specific SVG icon. Once you’ve selected your icons, getting Blade Icons into your Laravel application requires only two steps. For example, with an email editor, getting an envelope icon involves:
- Use the Composer to install the icon: composer require blade-ui-kit/blade-heroicons
- Reference the icon in your Laravel Views file: <x-heroicon-o-envelope />
How to set up Blade Icons
Email editors provide a design and content platform for shaping emails before they’re sent out to customers. Here’s how to get started setting up Blade Icons with TinyMCE in Laravel to quickly set up Laravel icons for your project.
There are some prerequisites:
- Laravel installed within your development environment
Access to the command line on your development environment, such as through Bash or Shell, depending on your operating system - A text editor to modify the Laravel application files, such as Zed, VS Code, or Sublime Text
- A TinyMCE API key, which is necessary to access TinyMCE through the Tiny Cloud CDN
About your API key: You can get a TinyMCE API key for FREE from the TinyMCE dashboard. Log in with your Google or GitHub credentials, and it’s available as soon as the dashboard loads. Tiny Cloud requires an API key for the editor to switch from read-only mode.
💡NOTE: Your API key comes with a 14-day Free trial of TinyMCE that includes more advanced plugins, for example, Accessibility Checker and PowerPaste (that are used in the following email editor demo).
1. Getting started with Laravel
Open your command line shell program, and use the Composer command to create the email editor demo:
composer create-project laravel/laravel email-editor-demoYou can then change into the project, and run the following Laravel commands to create the needed Blade files to configure TinyMCE:
The configuration file:
cd email-editor-demophp artisan make:component Head/tinymceConfigINFO Component [app/View/Components/Head/tinymceConfig.php] created successfully.And the TinyMCE forms file:
php artisan make:component Forms/tinymceEditorINFO Component [app/View/Components/Forms/tinymceEditor.php] created successfully.2. Constructing the Email editor with TinyMCE
There are now new files ready in your demo email editor within the important app/ folder, and the resources/ folder. Here’s how the demo directory structure looks, for the app/ folder:
app/
View/
Components/
Forms/ > tinymceEditor.php
Head/ > tinymceConfig.phpAnd for the resources/ folder:
resources/
views/
components/
forms/ > tinymce-editor.blade.php
head/ > tinymce-config.blade.phpOpen the tinymce-config.blade.php file in your text editor, and include the following:
<script src="https://cdn.tiny.cloud/1/add-your-api-key-here/tinymce/6/tinymce.min.js"
referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#editor',
plugins: 'advcode advtemplate a11ychecker autocorrect autolink emoticons image inlinecss link linkchecker lists mergetags powerpaste tinymcespellchecker help',
toolbar: 'undo redo | aidialog aishortcuts | styles | bold italic forecolor | link image emoticons | align | mergetags inserttemplate | spellcheckdialog a11ycheck | code removeformat',
toolbar_sticky: true,
menubar: false,
editable_root: false,
editable_class: 'tiny-editable',
elementpath: false,
visual: false,
link_target_list: false,
link_list: [
{ title: "Features", value: 'https://www.tiny.cloud/tinymce/features/' },
{ title: "Docs", value: 'https://www.tiny.cloud/docs/tinymce/latest/' },
{ title: "Pricing", value: 'https://www.tiny.cloud/pricing/' }
],
object_resizing: false,
formats: {
h1: { block: 'h1', styles: { fontSize: '24px', color: '#335dff' } },
h2: { block: 'h2', styles: { fontSize: '20px' } },
largetext: { block: 'p', styles: { fontSize: '20px' } },
calltoaction: { selector: 'a', styles: { backgroundColor: '#335dff', padding: '12px 16px', color: '#ffffff', borderRadius: '4px', textDecoration: 'none', display: 'inline-block' } }
},
style_formats: [
{ title: 'Paragraph', format: 'p' },
{ title: 'Heading 1', format: 'h1' },
{ title: 'Heading 2', format: 'h2' },
{ title: 'Large text', format: 'largetext' },
{ title: 'Button styles' },
{ title: 'Call-to-action', format: 'calltoaction' },
],
ai_shortcuts: [
{ title: 'Format as marketing email', prompt: 'Turn this content into an HTML-formatted marketing email in fixed-width and mobile-friendly table form, following screen width best practices' },
{ title: 'Generate call to action', prompt: 'Generate an appropriate and short call to action for this email, in the form a button.' }
],
images_file_types: "jpeg,jpg,png,gif",
spellchecker_ignore_list: ['i.e', 'Mailchimp', 'CSS-inlined'],
mergetags_list: [
{
title: "Contact",
menu: [{
value: 'Contact.FirstName',
title: 'Contact First Name'
},
{
value: 'Contact.LastName',
title: 'Contact Last Name'
},
{
value: 'Contact.Email',
title: 'Contact Email'
}
]
},
{
title: "Sender",
menu: [{
value: 'Sender.FirstName',
title: 'Sender First Name'
},
{
value: 'Sender.LastName',
title: 'Sender Last name'
},
{
value: 'Sender.Email',
title: 'Sender Email'
}
]
},
{
title: 'Subscription',
menu: [{
value: 'Subscription.UnsubscribeLink',
title: 'Unsubscribe Link'
},
{
value: 'Subscription.Preferences',
title: 'Subscription Preferences'
}
]
}
],
advtemplate_templates: [
{
title: "Newsletter intro",
content:
'<h1 style="font-size: 24px; color: rgb(51, 93, 255); font-family:Arial;">TinyMCE Newsletter</h1>\n<p style="font-family:Arial;">Welcome to your monthly digest of all things TinyMCE, where you"ll find helpful tips, how-tos, and stories of how people are using rich text editing to bring their apps to new heights!</p>',
},
{
title: "CTA Button",
content:
'<p><a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block; font-family:Arial;" href="<a href="https://tiny.cloud/pricing">https://tiny.cloud/pricing</a>">Get started with your 14-day free trial</a></p>',
},
{
title: "Footer",
content:
'<p style="text-align: center; font-size: 10px; font-family:Arial;">You received this email at because you previously subscribed.</p>\n<p style="text-align: center; font-size: 10px; font-family:Arial;">#{Subscription.Preferences}# | #{Subscription.UnsubscribeLink}#</p>',
},
],
content_style: `
body {
background-color: #f9f9fb;
}
/* Edit area functional css */
.tiny-editable {
position: relative;
}
.tiny-editable:hover:not(:focus),
.tiny-editable:focus {
outline: 3px solid #b4d7ff;
outline-offset: 4px;
}
/* Create an edit placeholder */
.tiny-editable:empty::before,
.tiny-editable:has(> br[data-mce-bogus]:first-child)::before {
content: "Write here...";
position: absolute;
top: 0;
left: 0;
color: #999;
}
`
});
</script>Save the change, and then open the tinymce-editor.blade.php, and add the following:
<form method="post">
<textarea id="editor">
<table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #0b132c; border: 2px solid #eee; border-radius: 8px 8px 0 0; overflow: hidden" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 32px 8px 16px 64px;" width="50%">
<div class="tiny-editable" style="font-family: 'helvetica', sans-serif; color: #fff; font-size: 16px; line-height: 1.5;">
<h1>Email creation made simple!</h1>
</div>
</td>
</tr>
</table>
</textarea>
</form>Save this change as well.
3. Adding Blade Icons
Navigate to the Blade Icons library, and search for Envelope Icons, for example, these three, and the associated composer commands:
- Heroicon Envelope - composer require blade-ui-kit/blade-heroicons
- Zondicon Envelope - composer require blade-ui-kit/blade-zondicons
- Evilicons Envelope - composer require codeat3/blade-evil-icons
✏️NOTE: Install these icons by changing back to the top level of the demo Laravel email app, and running the composer require commands from the command line. That’s all you need to do to get the Blade Icons.
Modify the welcome.blade.php file, that’s automatically generated with each new Laravel application, to include the TinyMCE email editor, and the Blade Icons by adding these lines into the PHP file:
In the head section:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- TinyMCE -->
<x-head.tinymce-config/>
And in the body section, to configure TinyMCE, and the Blade Icons:
…
@endif
<div class="max-w-7xl mx-auto p-6 lg:p-8">
<!-- HTML content not added due to its length -->
</div>
<div class="bg-white dark:ring-1 dark:ring-inset dark:ring-white/5 rounded-lg">
<div class="h-16 w-16 bg-red-50 dark:bg-red-800/20 flex items-center justify-center rounded-full">
<x-heroicon-o-envelope />
</div>
<div class="h-16 w-16 bg-red-50 dark:bg-red-800/20 flex items-center justify-center rounded-full">
<x-zondicon-envelope />
</div>
<div class="h-16 w-16 bg-red-50 dark:bg-red-800/20 flex items-center justify-center rounded-full">
<x-bx-envelope />
</div>
</div>
<x-forms.tinymce-editor/>✏️NOTE: The div elements around the Blade Icons make use of the existing classes and styles available with the demo Laravel project to show what’s possible in terms of styling the Blade icons for the email editor. It’s useful for the first iteration, but not complete for a production environment.
Save the change, and then use the Laravel php artisan serve command to get the email editor demo with Blade Icons started on your local host:
The Blade Icons are available in your demo email editor app, along with TinyMCE, which is ready to go for building emails.
Laravel, icons, and more components
The demo is only the first step, but demonstrates how quickly you can shape the design of your Laravel projects with Blade Icons, as well as incorporate TinyMCE for a reliable and effortlessly customizable rich text editor.
TinyMCE has dedicated integrations available for more than just Laravel, with components available for the frameworks favored by professional developers:
- Angular, with TinyMCE as a rich text editor
- Vue emoji picker with TinyMCE
- React and Font Awesome Icons, with TinyMCE
Contact us for more information about how TinyMCE can help add speed to your project, and help you reach the next, complete iteration.
