Integration with orthes/medium-editor-insert-plugin?

[rossvz]

Is there any way to integrate this wrapper with the orthes/medium-editor-insert-plugin?

I followed their instructions for installation and inclusion, but it looks like because I'm using this wrapper to initialize the editor its not working properly. Any experience or ideas?

[boazhoch]

+1

[mQckingbird]

Yes.
You start the editor like you would normally do, but in this case using the model as the element.
This is line 25, angular-medium-editor.js

ngModel.editor = new MediumEditor(iElement, scope.bindOptions);
         $('.editable').mediumInsert({

                addons: {
                    images: {
                        uploadScript: null,
                        deleteScript: null,
                        captionPlaceholder: 'Descripción de imagen',
                        styles: {
                            slideshow: {
                                label: '<span class="fa fa-play"></span>',
                                added: function ($el) {
                                    $el
                                        .data('cycle-center-vert', true)
                                        .cycle({
                                            slides: 'figure'
                                        });
                                },
                                removed: function ($el) {
                                    $el.cycle('destroy');
                                }
                            }
                        },
                        actions: null
                    }
                }
            }); 

For now, there's no medium-insert-plugin standalone nor angular; it really needs jQuery.
I have a few issues with insert plugin library, i'm gonna try to fix them and then rewrite the code on Angular.

[ghost]

Would love this to happen, I really don't want to use jQuery with my angular application.

+1

[monkeymars]

cant wait for this
+1

[RDMEC]

+1

[ollanmonsur]

+1

[merihs]

Hi matikbird,

I added your code but it says "mediumEditor is undefined" in images.js (line 596, col 13). I am using latest versions of plugins.

When I add below js code before angular-medium-plugin.js It works fine but at this time it looses binding on $scope.text. console.log($scope.text) always returns the same result.

var editor = new MediumEditor('.editable');
        $(function () {
            $('.editable').mediumInsert({
                editor: editor
            });
});

Is it possible you to add an example about the integration. I am missing something or the latest version of plugins does not work well with the code you added.

[himynameistimli]

I do something simple... sorta of the same but different from above. It doesn't quite solve the no jQuery issue.

I add the insert plugin as a child element to <medium-editor> so I can still have a separate directive and hook onto the parent element's ngModel. Not sure if good practice, but works for me.

directive.js

(function(){
    'use strict';

    angular.module('angular-medium-editor-insert-plugin', [])
        .directive('mediumInsert', mediumInsert);

    function mediumInsert() {
        var directive = {};
        directive.restrict = 'EA';
        directive.scope = {insertAddons: '='}
        directive.require = '^ngModel';
        directive.link = linkFunction;
        return directive;

        function linkFunction(scope, elem, attr, ngModel) {

            var editor = $('medium-editor').length ? $('medium-editor') : $('[medium-editor]');

            editor.mediumInsert({
                editor: ngModel.editor,
                addons: scope.insertAddons,
            })
        }
    }
})();

index.html

<div name="text" ng-model="text" medium-editor>
        <div medium-insert insert-addons="insertAddons"></div>
</div>

controller.js

$scope.insertAddons = { 
    "images": {
        "fileUploadOptions": {
            "url": "new-upload.php" }
        }
    }

If you need to modify the addons you can put it in the insertAddons object.

[sarfarajdaffo]

@himynameistimli
I tried to add this plugin but it is giving error
TypeError: editor.mediumInsert is not a function

[himynameistimli]

If you're using the code above then you should probably add the directive to your existing directive file structure.

    angular.module('your-app-name')
        .directive('mediumInsert', mediumInsert);

Maybe if you share your implementation?

[sarfarajdaffo]

@himynameistimli
Thanks for quick response, I have used the same as above, but now it is giving another error
medium-editor-insert-plugin.min.js:11 Uncaught TypeError: Cannot read property 'options' of undefined.

[himynameistimli]

Hi sorry for the delay. It's hard to say without looking at it more closely. Can you use the non minified version of medium-editor-insert-plugin to better diagnose the issue? Best thing would be to put some code somewhere (a codepen or something) to make it easier to debug

[ollanmonsur]

@himynameistimli , will my own app name replace this
angular.module('angular-medium-editor-insert-plugin', [])
doesn't seem to work for me too. I am using this with laravel5.2

[prabhdaffo]

@himynameistimli , your directive is working fine for me, the only problem I got, when I uploaded an image, the tags(image tags and other) are not appended with the html of the angular-medium-editor in the $scope variable (in my controller)

<div ng-model="article" medium-editor="medium-editor">
  <div medium-insert="medium-insert" insert-addons="insertAddons"></div>
</div>

angular-medium-editor-insert-plugin do not update the ng-model 'article'.

[himynameistimli]

Hey guys, sorry for the issues. I put up a plunker with my code. I figured out the issue that you guys are facing. It has to do with the directive loading before the element is fully loaded. To counter it, I just wrapped the directive in a timeout, but I think this may not be the best way. What do you guys think?

Here's the plunker: https://plnkr.co/edit/2jm6pvE5In7wMwFUJ3Gs?p=preview

And here's the code in the scripts.js:

angular.module('demo', ['angular-medium-editor'])
  .directive('mediumInsert', mediumInsert)
  .controller('demoController', demoController);

demoController.$inject = ['$scope'];
mediumInsert.$inject = ['$timeout'];

function demoController($scope) {
  $scope.text = 'This text gets is shown via .$render()';
  $scope.insertAddons = {
    "images": {
      "fileUploadOptions": {
        "url": "new-upload.php"
      }
    }
  }
}

function mediumInsert($timeout) {
  var directive = {};
  directive.restrict = 'EA';
  directive.scope = {
    insertAddons: '='
  }
  directive.require = '^ngModel';
  directive.link = linkFunction;
  return directive;

  function linkFunction(scope, elem, attr, ngModel) {
    $timeout(function() {
      var editor = $('medium-editor').length ?
        $('medium-editor') : $('[medium-editor]');
      editor.mediumInsert({
        editor: ngModel['editor'],
        addons: scope.insertAddons,
      })
    });
  }
}

[mQckingbird]

Actually I'm using 3.0 branch, and somehow it's a nightmare in Electron.

Can someone reproduce it?
You just have to uncomment the MediumExtension in the ./app/express/functions.js
Here:
https://github.com/matikbird/textiled

[monkeymars]

Hello @himynameistimli, Thanks for great job.
I try to implement your directive but got Uncaught TypeError: Cannot read property 'MediumInsert' of undefined, medium-editor-insert-plugin.js:37.
any advice?

[himynameistimli]

@monkeymars how are you implementing medium-editor inside your templates? I'll admit it's a bit janky since its using jQuery to find it but if it cannot find the element then the editor part of editor.mediumInsert(...) will be undefined.

[ollanmonsur]

@himynameistimli your directive works fine for me but the video doesn't play when returned from database. Its comes just like the preview image. I don't really know what to do here.

[goelrohan6]

@himynameistimli in the plunker above,

• where is the post request being sent to the server?

• and how do i send some additional post parameters like
  data: { 'targetPath': './media/' }

• where is the image is being sent?

• The image is in which format (dataurl or blob) ?

[himynameistimli]

@goelrohan6 for images and embeds you can specify the upload location in fileUploadOptions in the url property. If you need to modify the parameter name that you send in the POST then you can do so in paramName. Use hooks if you need to

In the end, I had to override the send / done functions (I used this fork https://github.com/malacalypse/medium-editor-insert-plugin/commit/f57916b9991e178165f07fe466a126eb8d32e7ad)

I can't remember the datauri vs blob thing. I think blob?

See https://github.com/blueimp/jQuery-File-Upload/wiki/Options for more details.

My config for images ended looking something like this:

fileUploadOptions: {
  url: baseRelativeUrl +'/images/',
  headers: {
    Authorization: 'Token ' + token,
    Accept: 'application/json'
  },
  paramName: 'image',
  send: function(e, data) {
    // logic before sending to server   
  },
  done: function(e, data) {
    // logic when done  
  }

...
}

If you have specific issues about your implementation, maybe share what you have so far?

[goelrohan6]

@himynameistimli
My imageUpload.php looks like this

$filename = $_FILES['file']['name'];
$meta = $_POST;
$destination = $meta['targetPath'].$filename;
move_uploaded_file($_FILES['file']['tmp_name'], $destination);
echo($filename." is moved to ". $destination);

so I basically need to send one post parameter named targetPath and need to get the image file
my scripts.js

  $scope.insertAddons = {
    "images": {
      "fileUploadOptions": {
        "url": "http://upload.campusbox.org/mediumImageUpload.php",
        "method": "POST",
        "data": {
          'targetPath': './media/'
        }
      }
    }
  }

I am unable to get the image on the server and also not getting the post parameters

what should i do to make it working

[AmirMustafa]

Hello Sir,
I have successfully integrated insert plugin in Medium Editor. I am using PHP for saving technology. After Uploading multiple images, when I hit play button for slideshow, it works fine in editor. Is there a way to dynamically change the images while fetching data(i.e. slideshow image remains static when image is fetched)

[AmirMustafa]

I have added my medium editor code:

/* ====================== For Image Grid Play functionality: Start ====================== */
        $(function () {
            $('.editable').mediumInsert({
                editor: editor,
                addons: {
                    images: {
                        uploadScript: null,
                        deleteScript: null,
                        //captionPlaceholder: 'Type caption for image',
                        styles: {
                            slideshow: {
                                label: '<span class="fa fa-play"></span>',
                                added: function ($el) {
                                    $el
                                        .data('cycle-center-vert', true)
                                        .cycle({
                                            slides: 'figure'
                                        });
                                },
                                removed: function ($el) {
                                    $el.cycle('destroy');
                                }
                            }
                        },
                        actions: null
                    }
                }
            });
        });

        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','../../www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-44692164-1', 'auto');
        ga('send', 'pageview');

       
    </script>
<!-- ================== Slider Indicator: Start ==================  -->