Enhance Your Content with beautiful Photos Using the Image Tui Plugin
WYSIWYG editors simplify web content creation by allowing users to format their content without having coding skills. For instance, you can insert images by uploading them through a simple user interface and see how they will look on the web page. The editor is responsible for writing the HTML code to display the image.
In this article, we aim to enhance the user experience by enabling image manipulation before insertion in the editor. Users can crop, flip, rotate, draw, and add shapes, icons, text, mask filters, and image filters using the Toast UI Image editor. This editor is integrated flawlessly with the Froala editor using its Image Tui Plugin.
With the Image Tui Plugin, users can effortlessly enhance their content with visually striking images that perfectly match their desired aesthetic. This empowers content creators to produce more engaging and visually appealing web pages without the need for specialized image editing software. Let’s learn how it works.
What is The Toast UI Image Editor?
The Toast UI Image Editor is a free, open-source JavaScript tool for editing images using HTML5 Canvas. It offers a user-friendly interface and powerful image filters, making it a convenient tool for image editing. The editor is widely supported across major web browsers, including Chrome, Internet Explorer 10+, Edge, Safari, and Firefox. Its responsive design ensures a good user experience on screens with a minimum size of 550 x 450 pixels. The editor theme can be easily customized using the editor API.
The Toast UI Image Editor Features
The editor comes with a wide range of great photo manipulation features, suitable for most use cases:
- Load image to canvas
- Undo/Redo (With shortcut)
- Download
- Reset
- Delete Object(Shape, Line, Mask Image…)
- Crop
- Flip
- Rotation
- Resize
- Free drawing
- Line drawing
- Shape
- Icon
- Text
- Mask Filter
- Image Filter
- Grayscale
- Invert
- Sepia
- Blur Sharpen
- Emboss
- Remove-white
- Brightness
- Noise
- Pixelate
- Color filter
- Tint
- Multiply
- Blend
Integrating The Toast UI Image Editor With The Froala WYSIWYG Editor
The integration between the Toast UI Image Editor and Froala WYSIWYG editor is very simple, thanks to the Image Tui plugin.
Include Froala Editor Files
Let’s begin with a basic setup of Froala editor in a simple HTML web page:
- Include Froala Stylesheet and JavaScript files.
- Add HTML element to load editor at.
- Add a script with the Froala initialization code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.min.css' rel='stylesheet' type='text/css' />
<style>
body{
background-color: black;
}
.container{
margin: 5% auto;
width: 80%;
display: block;
}
.container h1{
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1 class="header">Let's build something beautiful</h1>
<div id="example"></div>
</div>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.min.js'></script>
<script>
var editor = new FroalaEditor('#example');
</script>
</body>
</html>
This will load the basic Froala editor features.
Include The Toast UI Image Editor Files
To use the Toast UI Image Editor, include its stylesheet and JavaScript files.
<link rel="stylesheet" href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-image-editor.min.js"></script>
Include The Froala TUI Image Plugin Files
The Froala TUI Image plugin requires Froala’s Image plugin to be active. Let’s include the stylesheet and JavaScript files for the image and TUI plugins.
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/image.min.css' rel='stylesheet' type='text/css' />
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/third_party/image_tui.min.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/image.min.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/third_party/image_tui.min.js'></script>
How It Works
When you run the editor with the above setup, you can edit images using the Toast UI Image Editor by following these steps:
- Insert an image into the editor.
- Click on the image to edit it.
- Click on the “Advanced Edit“ button from the displayed popup.
- Start editing the image using the Toast UI Image Editor.
- Save changes to use the edited image instead of the original one.
Customizing The Froala Editor
While customizing the editor, keep your eye on the following options to avoid accidentally deactivating the Toast UI Image Editor.
pluginsEnabled
This option tells the editor which plugins are enabled and can be used by users. If you are customizing this option, make sure you have added the image and the imageTUI plugins.
var editor = new FroalaEditor('#example',{
pluginsEnabled: ['image', 'imageTUI'],
});
toolbarButtons
This option controls the buttons displayed on the Froala toolbar. If you are customizing this setting, ensure that you have included the InsertImage button.
var editor = new FroalaEditor('#example',{
pluginsEnabled: ['image', 'imageTUI'],
toolbarButtons: ['insertImage'],
});
imageEditButtons
This option determines the buttons shown on the Edit Image popup. Make sure the imageTUI button is included. This will allow users to open the TUI image editor.
var editor = new FroalaEditor('#example',{
pluginsEnabled: ['image', 'imageTUI'],
toolbarButtons: ['insertImage'],
imageEditButtons: ['imageReplace', 'imageAlign', 'imageCaption', 'imageRemove', 'imageTUI']
});
Customizing The TUI Plugin
The Toast UI Image Editor has a powerful API that helps customize the features displayed to the user and the editor UI. When the Toast UI Image Editor is integrated into the Froala editor through the TUI plugin, you can customize the TUI editor by utilizing the imageTUIOptions option.
var editor = new FroalaEditor('#example',{
pluginsEnabled: ['image', 'imageTUI'],
toolbarButtons: ['insertImage'],
imageEditButtons: ['imageReplace', 'imageAlign', 'imageCaption', 'imageRemove', 'imageTUI'],
imageTUIOptions: {
includeUI: {
initMenu: "filter",
menuBarPosition: "right",
theme: {
"menu.activeIcon.path": "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/icon-b.svg",
"menu.disabledIcon.path": "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/icon-a.svg",
"menu.hoverIcon.path": "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/icon-c.svg",
"menu.normalIcon.path": "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/icon-d.svg",
"submenu.activeIcon.name": "icon-c",
"submenu.activeIcon.path": "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/icon-c.svg",
"submenu.normalIcon.name": "icon-d",
"submenu.normalIcon.path": "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/icon-d.svg"
}
}
}
});
Do I need to subscribe to a specific plan for using the Froala TUI plugin?
The Froala TUI plugin, as well as other Froala plugins, are available in any of the Froala’s plans. Check our pricing page and select the plan that best fits your needs. Froala’s flexible licensing options ensure you can utilize the full capabilities of the TUI plugin, tailored to your specific requirements, with no additional costs or restrictions.
Does Froala Offer a Free Trial?
You can try Froala for free by downloading the editor and using it on your localhost or staging site. The unlicensed editor displays an alert message under the toolbar; however, it doesn’t restrict any features of the editor. Once you are ready to use the editor in production, purchase a license to get the API key and remove the unlicensed message.
Elevate Your Content with Visually Stunning Images
The integration of the Toast UI Image Editor with the Froala WYSIWYG editor through the Image TUI plugin is a game-changer for content creators. This powerful combination empowers you to effortlessly enhance your web content with visually striking, professionally edited images.
No longer are you limited to basic image insertion. With the Toast UI Image Editor, you can unleash your creativity, cropping, flipping, rotating, drawing, and applying a wide range of filters to your images – all within the familiar Froala editor interface. This allows you to produce more engaging, visually appealing content without the need for specialized image editing software.
So what are you waiting for? Start your Froala WYSIWYG editor free trial today. Captivate your audience, boost your brand, and take your online presence to new heights. The tools are at your fingertips – all you need to do is unlock their potential.
No comment yet, add your voice below!