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 1520 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 1520 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 1520 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 1520 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 1520 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 1520 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 1520 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 1520 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!

Please Sign in or register to post replies

Write your reply to:

Draft