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 409 posts 1063 karma points
    Jun 06, 2016 @ 10:33
    Jonathan Roberts
    0

    Rich Text Editor

    Hi, How possible is it to add a Rich Text editor to the list of available controls?

    I have read http://www.enkelmedia.se/blogg/2013/12/4/umbraco-7-use-the-rich-text-editor-tinymce-in-a-custom-section.aspx but have no joy in either option.

    Many thanks Jon

  • Paul de Quant 403 posts 1521 karma points
    Jun 08, 2016 @ 08:16
    Paul de Quant
    101

    Hi Jon,

    While it may not be perfect, I did manage to get this working.

    Here's my rte.controller.js

    angular.module("umbraco").controller("UIOMatic.Views.RTE",
    function ($scope, $http, $routeParams) {
    
        $http({ method: 'GET', url: 'backoffice/RTE/RTEApi/getDescription', params: { id: $routeParams.id.split('?')[0] } })
                .success(function (data) {
    
                    var rowProps = $scope.property;
    
                    $scope.property = {
                        view: 'rte',
                        config: {
                            editor: {
                                toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbmacro", "table", "umbembeddialog"],
                                stylesheets: [],
                                dimensions: { height: 400, width: 640 }
                            }
                        },
                        value: JSON.parse(data)
                    };
    
                    $scope.property.Value = JSON.parse(data);
    
                    $scope.$watch('property', function () {
                        if ($scope.property != undefined) {
                            var result = $.grep($scope.properties, function (e) { return e.Key === rowProps.Key; });
                            result[0].Value = $scope.property.value;
                        }
                    }, true);
    
                })
                .error(function () {
                    $scope.error = "An Error has occured while loading!";
                });
    
    });
    

    And this is rte.html file

    <div ng-controller="UIOMatic.Views.RTE">
    <umb-editor model="property" ></umb-editor></div>
    

    I also had to create a custom ApiController to retrieve my description.

        [PluginController("RTE")]
    public class RTEApiController : UmbracoAuthorizedJsonController
    {
        public string getDescription(int id)
        {
            var query = new Sql().Select("Description").From("[TABLE NAME]").Where("Id = @0", id);
            return DatabaseContext.Database.First<string>(query);
        }
    }
    

    Hope this helps.

    Thanks

    Paul

  • Paul de Quant 403 posts 1521 karma points
    Jun 09, 2016 @ 10:21
    Paul de Quant
    1

    Just realised I spent so much time trying to get the edit step to work - I didn't test the controller when creating. Please find the revised code below.

    angular.module("umbraco").controller("UIOMatic.Views.RTE",
    function ($scope, $http, $routeParams) {
    
        if ($routeParams.id.indexOf('?') > -1) {
    
            $http({ method: 'GET', url: 'backoffice/RTE/RTEApi/getDescription', params: { id: $routeParams.id.split('?')[0] } })
                    .success(function (data) {
    
                        var rowProps = $scope.property;
    
                        $scope.property = {
                            view: 'rte',
                            config: {
                                editor: {
                                    toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbmacro", "table", "umbembeddialog"],
                                    stylesheets: [],
                                    dimensions: { height: 400, width: 640 }
                                }
                            },
                            value: JSON.parse(data)
                        };
    
                        $scope.property.Value = JSON.parse(data);
    
                        $scope.$watch('property', function () {
                            if ($scope.property != undefined) {
                                var result = $.grep($scope.properties, function (e) { return e.Key === rowProps.Key; });
                                if (result != null && result.length > 0) {
                                    result[0].Value = $scope.property.value;
                                }
    
                            }
                        }, true);
    
                    })
                    .error(function () {
                        $scope.error = "An Error has occured while loading!";
                    });
        } else {
    
            var rowProps = $scope.property;
    
            $scope.property = {
                view: 'rte',
                config: {
                    editor: {
                        toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbmacro", "table", "umbembeddialog"],
                        stylesheets: [],
                        dimensions: { height: 400, width: 640 }
                    }
                },
            };
    
            $scope.$watch('property', function () {
                if ($scope.property != undefined) {
                    var result = $.grep($scope.properties, function (e) { return e.Key === rowProps.Key; });
                    if (result != null && result.length > 0) {
                        result[0].Value = $scope.property.value;
                    }
    
                }
            }, true);
    
        }
    
    
    });
    
  • Comment author was deleted

    Jun 10, 2016 @ 07:44

    Awesome, thanks for sharing (if you are up for it you can also create a pull request so we can include it in the default distro)

  • Paul de Quant 403 posts 1521 karma points
    Jun 10, 2016 @ 07:47
    Paul de Quant
    0

    Hi Tim,

    Happy to do this - could you point me in the right direction, I've not done one of these before.

    Thanks

    Paul

  • Comment author was deleted

    Jun 10, 2016 @ 07:50

    Hey Paul, that would be awesome!!!

    The code lives at https://github.com/TimGeyssens/UIOMatic

    Then you can follow these instructions https://help.github.com/articles/using-pull-requests/

    You basically fork the existing repo, make the necessary changes, push and then there should be a button "new pull request"

  • Paul de Quant 403 posts 1521 karma points
    Jun 10, 2016 @ 08:15
    Paul de Quant
    0

    Hi Tim,

    Thanks for the instructions, I've just tried adding my files as per your instructions. I've added rte.html, rte.controller.js and modified package.manifest to include the controller.

    I still have a PluginController to add, however I'm not sure I can add this one as it's specific to our database.

    Can you confirm if I've done this first bit correctly.

    Thanks

    Paul

  • Comment author was deleted

    Jun 10, 2016 @ 08:17

    Yup that's ace! Thanks!

  • Paul de Quant 403 posts 1521 karma points
    Jun 10, 2016 @ 08:20
    Paul de Quant
    0

    Thanks for confirming, however the control won't work without this code:-

    [PluginController("RTE")] public class RTEApiController : UmbracoAuthorizedJsonController { public string getDescription(int id) { var query = new Sql().Select("Description").From("[TABLE NAME]").Where("Id = @0", id); return DatabaseContext.Database.First

    Is there a place for this or should it be excluded for the project?

    Thanks

    Paul

  • Comment author was deleted

    Jun 10, 2016 @ 08:27

    So it stores it's value in a separate table?

  • Paul de Quant 403 posts 1521 karma points
    Jun 10, 2016 @ 09:43
    Paul de Quant
    0

    It's in the same table, however we noticed the TinyMCE editor loads in a way that you can't set the value of it. So we noticed that by using the $http.get we could slow it down enough to set the value of the editor.

    I'm currently looking at better ways of doing this, but no joy so far.

    Thanks

    Paul

  • Comment author was deleted

    Jun 10, 2016 @ 09:45

    Ok thanks for the explanation

  • Paul de Quant 403 posts 1521 karma points
    Jun 10, 2016 @ 10:53
    Paul de Quant
    0

    Hi Tim,

    Do you know how I can add a directive to one of the controllers, from what I've been reading it should be possible to add a directive in order to add a priority and make it less of a priority to add the TinyMCE editor.

    Thanks

    Paul

  • Comment author was deleted

    Jun 10, 2016 @ 10:57

    Once it's added to the package manifest you should be able to use it...(if it isn't a default Umbraco one)

    And if you want to register it you can do the following

    var app = angular.module("umbraco");
    
    //This is my Angular module that I want to inject/require
    app.requires.push('tableSort'); 
    
    app.controller("Analytics.BrowserController", function ($scope, $location,     statsResource) {
        //Do stuff here...
    });
    
  • Comment author was deleted

    Jun 10, 2016 @ 10:57
  • Paul de Quant 403 posts 1521 karma points
    Jun 10, 2016 @ 14:21
    Paul de Quant
    0

    Hi Tim,

    I've managed to update the controller, with out the need for the Plugin Controller. I've created a new pull request with the updated rte.controller.js file.

    Cheers

    Paul

  • Comment author was deleted

    Jun 10, 2016 @ 14:22

    Awesome, will check that out!

  • 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