thijsw / angular-medium-editor

AngularJS directive for Medium.com editor clone
303 stars 94 forks source link

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

Open rossvz opened 8 years ago

rossvz commented 8 years ago

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 commented 8 years ago

+1

mQckingbird commented 8 years ago

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 commented 8 years ago

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

+1

monkeymars commented 8 years ago

cant wait for this +1

RDMEC commented 8 years ago

+1

ollanmonsur commented 8 years ago

+1

merihs commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

himynameistimli commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

@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 commented 7 years ago

@himynameistimli in the plunker above,

himynameistimli commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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 ==================  -->