Copied to clipboard

Flag this post as spam?

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


  • Jonathan Roberts 372 posts 1005 karma points
    Jul 21, 2017 @ 09:24
    Jonathan Roberts
    0

    umb-editor rte in a slider or carousel

    Hi,

    I would like to use the:

    <ng-form>
                <umb-editor model="textInput" ng-model="rteText"></umb-editor>
    </ng-form>
    

    within a multiple slide Slider Macro or in a Carousel Macro where the model.value is an object of different values for example:

    <div ui-sortable="sortableOptions" ng-model="model.value">
    
        <div class="simple-slider-list simple-slider-list-field" ng-class="{'simple-slider-open':selected == slide}" ng-click="select(slide)" ng-repeat="slide in model.value track by $index">
    
            <span class="simple-slider-list-number">
                {{slide.name}}
                <i class="icon right icon-navigation"></i>
                <i ng-click="remove($index)" class="icon right icon-delete"></i>
            </span>
    
           <div class="simple-slider-list-field">
                <input type="text" placeholder="Name" ng-model="slide.name" />
            </div>
    
    
            <ng-form>
                <umb-editor model="textInput" ng-model="rteText"></umb-editor>
            </ng-form>
    
        </div>
    
    </div>
    

    and the Controller looks like:

    angular.module("umbraco").controller("AccordionEditor.controller",
    function ($scope, assetsService, $http, dialogService, mediaHelper) {
    
        $scope.textInput = {
            label: 'bodyText',
            description: '...',
            view: 'rte',
            value: $scope.rteText,
            config: {
                editor: {
                    toolbar: ["code", "removeformat", "link", "unlink", "bold", "italic", "underline", "strikethrough"],
                    stylesheets: [],
                    dimensions: {
                        height: 200
                    }
                }
            }
        };
        $scope.$watch('textInput.value', function (newValue, oldValue) {
            $scope.rteText = newValue;
        });
    
        var defaultItem = { name: "", summary: "", img: "", link: undefined };
    
        if (!$scope.model.value) {
            $scope.model.value = [];
        }
    
        if ($scope.model.value.length > 0) {
            $scope.selected = $scope.model.value[0];
        }
    
        $scope.select = function (index) {
            $scope.selected = index;
        };
    
        $scope.remove = function ($index) {
            $scope.model.value.splice($index, 1);
        };
    
        $scope.add = function () {
    
                $scope.model.value.splice($scope.model.value.length + 1, 0, angular.copy(defaultItem));
                $scope.selected = $scope.model.value[$scope.model.value.length - 1];
    
    
        };
    
        $scope.pick = function (slide) {
            dialogService.mediaPicker({
                multiPicker: false,
                callback: function (data) {
                    slide.img = mediaHelper.resolveFile(data, false);
                }
            });
        };
    
        $scope.pickContent = function (slide) {
            dialogService.treePicker({
                multiPicker: false,
                section: "content",
                treeAlias: "content",
                callback: function (data) {
                    slide.link = { name: data.name, id: data.id };
                }
            });
        };
    
        $scope.sortableOptions = {
            handle: ".icon-navigation",
            axis: "y",
            delay: 150,
            distance: 5
        };
    
        // Load css asset
        assetsService.loadCss("/App_Plugins/CarouselEditor/assets/CarouselEditor.css");
    
    });
    

    But im not sure how to populate the RTE and return a value:

    $scope.textInput = {
            label: 'bodyText',
            description: '...',
            view: 'rte',
            value: $scope.rteText,
            config: {
                editor: {
                    toolbar: ["code", "removeformat", "link", "unlink", "bold", "italic", "underline", "strikethrough"],
                    stylesheets: [],
                    dimensions: {
                        height: 200
                    }
                }
            }
        };
        $scope.$watch('textInput.value', function (newValue, oldValue) {
            $scope.rteText = newValue;
        });
    

    Has anyone done this before?

    Thanks

    Jon

  • Dave Woestenborghs 3325 posts 11170 karma points MVP 5x admin c-trib
    Jul 21, 2017 @ 10:14
    Dave Woestenborghs
    0

    Hi Jon,

    Haven't done this in a while, but I wrote a article about it a few years ago.

    You can read it here : https://24days.in/umbraco-cms/2014/umbraco-angular-tips/

    Don't know if it still works. But should get you started.

    Dave

  • Jonathan Roberts 372 posts 1005 karma points
    Jul 21, 2017 @ 10:31
    Jonathan Roberts
    0

    Hi,

    Thanks for your link but it didnt work. Im not that great with AngularJS - I confuses me :)

  • Dave Woestenborghs 3325 posts 11170 karma points MVP 5x admin c-trib
    Jul 21, 2017 @ 10:46
    Dave Woestenborghs
    0

    Hi Jonathan,

    What did not work. Can you be a little bit more specific

    Dave

  • Jonathan Roberts 372 posts 1005 karma points
    Jul 21, 2017 @ 10:51
    Jonathan Roberts
    0

    Hi,

    Sorry - that is where I am at a loss - I cant really explain what is wrong as I have no idea how to implement your example into what I have.

    Im basically looping my Accordion by

    ng-repeat="slide in model.value track by $index
    

    I have a rte within that loop - but I am not sure what to add to the ng-model:

     <ng-form>
                <umb-editor model="rteText" ng-model="textInput"></umb-editor>
      </ng-form>
    

    I have this code to populate and get value when the user reloads the CMS:

    $scope.getSummaryValue = function () {
            if ($scope.model.value.length > 0) {
                return $scope.model.value[0].summary;
            }
        }
    
    
        $scope.textInput = {
            label: 'bodyText',
            description: '...',
            view: 'rte',
            value: $scope.getSummaryValue(),
            config: {
                editor: {
                    toolbar: ["code", "removeformat", "link", "unlink", "bold", "italic", "underline", "strikethrough"],
                    stylesheets: [],
                    dimensions: {
                        height: 200
                    }
                }
            }
        };
        $scope.$watch('textInput.value', function (newValue, oldValue) {
            if ($scope.model.value.length > 0) {
                $scope.model.value[0].summary = newValue;
            }
    
        });
    

    But again I have no idea what to put in the Watch and the value of the "textInput". At the moment (as in your example) you do this:

    $scope.model.value[0].summary
    

    but of course you have the [0] - first one on the $scope.model.value array.

    Does this make sense - sorry about my "angularjs" ignorance.

    Thanks for all your help,

    Jon

  • Jonathan Roberts 372 posts 1005 karma points
    Jul 24, 2017 @ 09:01
    Jonathan Roberts
    0

    HI, Would anyone else be able to assist?

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies