Laravel - Medium Editor + Image Plugin Integration

Apr 23, 2019

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:

npm install medium-editor

Include the below line into bootstrap.js.

window.MediumEditor = require('medium-editor');

Include the below lines into app.scss.

@import '~bootstrap/scss/bootstrap';
@import '~medium-editor/src/sass/medium-editor'; //Insert this one
@import '~medium-editor/src/sass/themes/beagle'; //Insert this one

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:

npm run dev

A simple view with the Medium Editor integrated would look something as below:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="{{ mix('css/app.css') }}" rel="stylesheet">
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  <title>Medium Editor</title>
  </head>
<body>
<div class="container">
  <div class="row">
    <div class="col">
      <form id="form-submit" method="post">
          @csrf
          <div class="editable"></div>
          <button id="btn-submit">Submit</button>
      </form>
      
    </div>
  </div>
</div>
  
<script src="{{ mix('js/app.js') }}"></script>
<script>
    $(document).ready(function () {
        var editor = new MediumEditor('.editable');    
    });
</script>
</body>
</html>

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.

... 

$(document).ready(function () {
    var editor = new MediumEditor('.editable');

    $("#btn-submit").click(function(){
        $("#description").val(editor.getContent());
        
        $("#form-submit").submit();
    });
});

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.

... 

$(document).ready(function () {
    var editor = new MediumEditor('.editable');

    editor.subscribe('editableInput', function (eventObj, editable) {
        let content = editor.getContent();
        // Ajax call to update your database
    });
});

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:

npm install medium-editor-insert-plugin

The plugin requires a few other libraries to be installed, which will be done automatically by npm. We would just need to include them.

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

mix.scripts([
    'public/js/app.js',
    'node_modules/handlebars/dist/handlebars.runtime.js',
    'node_modules/jquery-sortable/source/js/jquery-sortable-min.js',
    'node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js',
    'node_modules/blueimp-file-upload/js/jquery.iframe-transport.js',
    'node_modules/blueimp-file-upload/js/jquery.fileupload.js',
    'node_modules/medium-editor-insert-plugin/dist/js/medium-editor-insert-plugin.min.js',
], 'public/js/app.js');

mix.styles([
    'public/css/app.css',
    'node_modules/medium-editor-insert-plugin/dist/css/medium-editor-insert-plugin.css',
], 'public/css/app.css');

Compile them. In your terminal:

npm run dev

After which, initialise the plugin in your view.

$(document).ready(function () {
   var editor = new MediumEditor('.editable');
        
   editor.subscribe('editableInput', function (eventObj, editable) {
     let content = editor.getContent();
     // Ajax call to update your database
   });
    
    $(function () {
      $('.editable').mediumInsert({
        editor: editor,
         addons: {
          images: {
            fileUploadOptions: {
              url: '{{ url('medium-editor/upload') }}', //Specify a url to upload the image to
              formData: {
                id: 123, // Passing along more data should you need it
                _token: '{{ csrf_token() }}', // CSRF token needed if you are using POST / PATCH / DELETE
              },
              acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            }
          }
        }
      });
    });

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.

Written By

JC Tan

Published in PHP

Enjoyed the post?

Clap to support the author, help others find it, and make your opinion count.

JC Tan's recent posts