Laravel - Medium Editor + Image Plugin Integration
Our goal today is to integrate Medium Editor into Laravel. As of this post, I am using Laravel 5.7 but it should work across all Laravel 5.x version.
A sample version of how Medium Editor looks like can be viewed at the official demo page of the package. It has a few themes out of the box which includes a bootstrap
theme.
Install and start your Laravel project as usual, then we would use npm
to retrieve the medium-editor
.
At your terminal:
Include the below line into bootstrap.js
.
Include the below lines into app.scss
.
You can change the theme based on your liking by changing the word beagle
to the other alternative: bootstrap
, default
, flat
, mani
, roman
, tim
.
Time to compile and piece everything togehter! Back to your terminal:
A simple view with the Medium Editor integrated would look something as below:
Saving Your Editor Content
There are 2 ways to do this, either post your form with by clicking a button manually or subscribe to the editableInput
event which will be triggered whenever there's changes inside the editor.
Manual Form Submission
The idea is that we've a hidden text input and the content of our medium editor will be copied over before we submit the form.
Subscribing to Change Event
Every single action / changes to the editor will trigger the editableInput
event, we will subsribe to this event and get update for each changes that we do to the Medium Editor.
Integrating Image / Video Plugin
A very common use case is to have images / video embedded in your editor, so let's implement this as well.
You can play with the upload plugin here and more detailed API and documentation can be found at their Github page.
As usual, we use npm
to download the required files.
At your terminal:
The plugin requires a few other libraries to be installed, which will be done automatically by npm
. We would just need to include them.
Compile them. In your terminal:
After which, initialise the plugin in your view.
There are a lot of customizations and configurations available, take a look at their documentations.
Wrapping up, there are a lot of other plugins / extensions available on the Medium Editor page, implementing them should be the same as implementing the Image plugin.
Clap to support the author, help others find it, and make your opinion count.