custom sir trevor property editor not persisting model value - Extending Umbraco

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Chris Parkinson 39 posts 73 karma points

Nov 20, 2013 @ 20:58

Custom 'sir trevor' property editor not persisting model value

Extending Umbraco

I'm creating a custom property editor for v7 that uses the Sir Trevor wysiwyg (as demoed by Per at the Belle and Uk Festivals).

I'm binding the model to my text area using ng-model="model.value" which works fine on the text area alone, but when I initialise sir trevor in the controller it's not persisting the text. Any tips for resolving/debugging what could be going wrong? It's probably something insanely ovbvious. Thanks in advance :)

Model:

<div ng-controller="My.SirTrevorController">
    <textarea ng-model="model.value" class="js-st-instance"></textarea>
</div>

Controller:

angular.module("umbraco").controller("My.SirTrevorController",
   function ($scope, assetsService) {
 
       assetsService
          .load([
                "/App_Plugins/SirTrevor/lib/eventable.js",
             "/App_Plugins/SirTrevor/lib/sir-trevor.js"
         ])
         .then(function () {
                new SirTrevor.Editor({ el: $('.js-st-instance') });
            });
        assetsService.loadCss("/App_Plugins/SirTrevor/lib/sir-trevor.css");
        assetsService.loadCss("/App_Plugins/SirTrevor/lib/sir-trevor-icons.css");
})

Copy Link

Comment author was deleted

Nov 20, 2013 @ 21:10

Hey

Here is the controller

angular.module("umbraco").controller("Sir.Trevor.Controller", function($scope, assetsService){

assetsService.load(
        ["/App_Plugins/SirTrevor/lib/eventable.js",
        "/App_Plugins/SirTrevor/lib/sir-trevor.min.js"])
    .then(function(){
        var editor = new SirTrevor.Editor({
        el: $('.sir-trevor'),
        blockTypes: [
            "Embedly",
            "Text",
            "List",
            "Quote",
            "Image",
            "Video",
            "Tweet"
        ]
        });


        $scope.$on("formSubmitting", function (ev, args) {
            editor.onFormSubmit();
            $scope.model.value = editor.dataStore;
        });
});

assetsService.loadCss("/app_plugins/SirTrevor/lib/sir-trevor.css");
assetsService.loadCss("/app_plugins/SirTrevor/lib/sir-trevor-icons.css");

});

Copy Link

Comment author was deleted

Nov 20, 2013 @ 21:10

guess it's the formSubmitting that's important here since sir trevor won't update the model.value automatically

Copy Link
Chris Parkinson 39 posts 73 karma points

Nov 20, 2013 @ 22:34

0

Brilliant thanks, didn't realise I'd need to handle the submit manually.

I also needed to change the view as follows:

<div ng-controller="My.SirTrevorController">

<textarea class="js-st-instance">{{ model.value }}</textarea>

</div>

Copy Link
is working on a reply...

Please Sign in or register to post replies