Seamlessly Integrating Google Cloud Storage into Your Vue.js Rich Text Editor with Froala and Filestack
As businesses continue to embrace the power of cloud computing, the need to effortlessly manage and store files has become paramount. If you’re a Vue.js developer working with the Froala rich-text editor, you may have encountered the challenge of implementing a file-uploading process that seamlessly integrates with Google Cloud Storage.
Fortunately, the latest version of Froala, V4.3, has introduced a game-changing solution: the Filestack plugin. This innovative feature makes integrating your Vue.js WYSIWYG editor with Google Cloud Storage a breeze, requiring only a few lines of code to set up.
In this article, we’ll dive deep into how Froala V4.3 has simplified this process, empowering you to effortlessly store your files in the Google Cloud while providing your users with a seamless rich-text editing experience. We will discover practical insights and step-by-step guidance to help you master this powerful integration.
So, let’s explore how you can elevate your Vue.js projects by seamlessly connecting your Froala rich-text editor with the reliability and scalability of Google Cloud Storage.
How does Froala V4.3 simplify the integration with Google Cloud?
Froala V4.3 introduces a game-changing feature that streamlines the process of integrating your Vue.js rich-text editor with Google Cloud Storage. This new capability comes in the form of the Filestack plugin, which seamlessly integrates the Filestack Picker directly into the Froala editor.
With the Filestack plugin, users can now upload images, videos, and files directly from the rich-text editor, and these assets will be automatically stored in your Google Cloud Storage. This is made possible by the Filestack platform, which supports a wide range of popular cloud storage services, including Google Cloud.
The integration process is incredibly straightforward. All you need to do is connect your Google Cloud account to your Filestack dashboard, and you’re good to go. From that point on, any files uploaded through the Filestack Picker within the Froala editor will be directly saved to your Google Cloud Storage, without the need for any additional configuration or complex integrations.
This streamlined approach not only saves you time and effort but also ensures a seamless user experience for your content creators. They can focus on crafting their content, while the Froala-Filestack-Google Cloud integration handles the behind-the-scenes file management, allowing you to leverage the power and reliability of Google Cloud Storage with minimal hassle.
Let’s explore how this integration works.
Step 1: Create a simple Vue project
Skip this step if you will install the editor in an existing Vue app.
Run the following commands to create a new Vue 3 project.
npm install -g @vue/cli vue create my-froala-vue-app cd my-froala-vue-app
The above code creates a new Vue 3 project named “my-froala-vue-app” and navigates to the project directory. This provides a clean starting point for integrating the Froala rich-text editor and enabling the Google Cloud Storage integration using the Filestack plugin.
Step 2: Install the Froala Editor Vue SDK
Next, you’ll need to install the Froala Editor for Vue.js. Run the following commands in your project directory:
npm install vue-froala-wysiwyg --save
This will add the required dependencies to your project, allowing you to use the Froala editor within your Vue application.
Step 3: Include Froala in Your Application
3.1 Import Froala Editor in main.js
In your “main.js” file, import the Froala associated CSS and JS files:
import { createApp } from 'vue'
import App from './App.vue'
//Import Froala Editor plugins
import 'froala-editor/js/plugins.pkgd.min.js';
// Import Froala Editor css files.
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';
// Import Froala Editor component
import VueFroala from 'vue-froala-wysiwyg';
const app = createApp(App);
app.use(VueFroala);
app.mount('#app');
This step ensures that the Froala Editor is available throughout your Vue.js application, allowing you to use it in your components.
3.2 Use Froala in a Vue Component
In your “App.vue” file, add the Froala component within the template and add some initial configuration.
<template>
<froala id="edit" :tag="'textarea'" :config="config" v-model:value="model"></froala>
</template>
<script>
export default {
name: 'App',
data () {
return {
config: {
heightMin: 300,
},
model: '<i>Edit Your Content Here!</i>'
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
The Froala component has three attributes:
:tagattribute is used to tell on which tag the editor is initialized.:configattribute is used to configure the editor options.v-model:valueUsed to load editor content. This value is affected by editor HTML changes.
Step 4: Include Filestack for Uploading and Storing Files
Since we already included the “plugins.pkgd.min.js” file in our application, then the Froala Filestack is already included and active by default. However, to correctly display the Filestack File Picker and UI Transformation tools in the editor, include the following Filestack stylesheet and scripts:
- Filestack’s File Picker script: https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js
- Filestack script for drag and drop files: https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js
- Filestack UI Transformation tool for image editing:
Open the “public/index.html” file and include the mentioned scripts.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>
<script
src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>
<script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
</body>
</html>
Step 5: Create a Filestack Account
To integrate the Filestack File Picker with your Froala Editor, you’ll need to create a Filestack account and obtain an API key.
- Sign up for a Filestack Account:
You can create a free Filestack account with low bandwidth, uploads, transformations, and storage limits. However, to upload files to Google Cloud you need a paid plan. Start a free trial of a paid plan based on your needs.
- Obtain the Filestack API Key:
- After creating your account, you’ll be taken to the Filestack dashboard.
- In the dashboard, locate the “API Keys” section and copy your “API Key”.
- You’ll need this API key to configure the Filestack integration with your Froala Editor.
With your Filestack account and API key, you’re now ready to integrate the Filestack File Picker into your Froala Editor, allowing your users to upload, store, and transform files directly within the rich-text editing experience.
Step 6: Filestack Configuration
To complete the Filestack integration, we need to configure the following options and events:
- Set the
filestackOptions.filestackAPIto your Filestack API key. - (Optional) Set the
filestackOptions.uploadToFilestackOnlytotrue. This will handle all file uploads by Filestack. - (Optional) Pass the File Picker configurations in the
filestackOptions.pickerOptionsoption to customize the Filestack Picker. - (Optional) Configure the
filestack.filestackPickerOpenedevent. This allows you to execute a custom action after a user opens the Filestack File Picker. - (Optional) Configure the
filestack.filestackPickerClosedevent. This allows you to execute a custom action after a user closes the Filestack File Picker. - (Optional) Configure the
filestack.uploadedToFilestackevent. This allows you to execute a custom action when files are successfully uploaded to your cloud storage. - (Optional) Configure the
filestack.uploadFailedToFilestackevent. This allows you to execute a custom action if the file upload fails.
Open your “App.vue” file and modify the data() function:
data () {
return {
config: {
heightMin: 300,
filestackOptions: {
uploadToFilestackOnly: true,
filestackAPI: "***",
},
events: {
'filestack.uploadedToFilestack': function () {
console.log("Callback is triggered for uploaded to filestack ",)
},
'filestack.filestackPickerOpened': function () {
console.log("Callback is triggered for picker opened ",)
},
'filestack.filestackPickerClosed': function () {
console.log("Callback is triggered for picker closed ",)
},
'filestack.uploadFailedToFilestack': function () {
console.log("Callback is triggered for file stack failed ",)
},
},
},
model: '<i>Edit Your Content Here!</i>'
}
}
Step 7: Google Cloud Configuration
Log in to your Filestack Dev Portal to configure your storage options so that uploaded files are saved in your Google Cloud account instead of Filestack’s default S3 bucket.
Simply add your service account key and ensure it has the Storage Object Admin role.
Note that depending on your internal GCS settings, additional permissions may be required, such as Storage Admin, Storage Object Creator, and Storage Object Viewer.
Obtain the JSON key for this account and paste it into the Access Key field in the GCS section of the developer portal.
Step 8: Start Your Application
With the Filestack integration and Google Cloud Storage configuration complete, you can now start your application. Run the following command in your terminal:
npm run serve
This command will start the development server and run your application at “http://localhost:8080”.
When a user clicks the Filestack File Picker button, the picker will open, allowing them to select files from various sources. The selected files will be automatically uploaded to your Google Cloud Storage account, and you can handle the successful or failed upload events using the configured callbacks. This integration provides a seamless file management experience within your Froala Editor-powered application.
What other cloud storage services are supported?
In addition to Google Cloud Storage, Filestack supports integration with other popular cloud storage services such as Amazon S3, Rackspace, Microsoft Azure Blob Storage, and Dropbox. You can configure the desired cloud storage provider in the Filestack Developer Portal and use the same integration approach as outlined for Google Cloud Storage. This flexibility allows you to choose the cloud storage solution that best fits your application’s requirements and infrastructure. The Filestack File Picker seamlessly handles file uploads and transformations, regardless of the underlying cloud storage provider.
Unlock the Power of Seamless Cloud Integration with Froala, Filestack, and Google Cloud Storage
By leveraging the Filestack plugin in Froala V4.3, you can now effortlessly integrate your Vue.js rich-text editor with the reliability and scalability of Google Cloud Storage. This game-changing integration empowers your content creators to focus on crafting exceptional content, while the behind-the-scenes file management is handled seamlessly.
With just a few lines of code, you can set up this powerful integration and unlock a new level of productivity and efficiency in your Vue.js projects. Say goodbye to the hassle of complex file upload processes and hello to a streamlined, user-friendly experience that delights your users.
No comment yet, add your voice below!